一个圆形时钟

简介: 画个时钟吧

先上效果看看:


微信图片_20221017210403.gif

clock.gif


微信图片_20221017210411.gif

clock.gif

突然想到时钟挺有意思的就弄了个


先画个表盘吧


///


CGPoint center = CGPointMake(ViewWidth*0.5, ViewHeight*0.5);
CAShapeLayer *smillLayer = [CAShapeLayer layer];
UIBezierPath *smillpath = [UIBezierPath bezierPath];
for (int i = 0 ; i<60; i++) {
    CGPoint pos = [self getRoundPointR:ViewR angle:-90+6*I];
    CGPoint pos1 = [self getRoundPointR:ViewR-5 angle:-90+6*I];
    [smillpath moveToPoint:CGPointMake(pos.x, pos.y)];
    [smillpath addLineToPoint:CGPointMake(pos1.x, pos1.y)];
}
smillLayer.path = smillpath.CGPath;
smillLayer.lineWidth = 1;
smillLayer.strokeColor = self.theDialColor.CGColor;
smillLayer.fillColor = [UIColor clearColor].CGColor;
[self.layer addSublayer:smillLayer];
CAShapeLayer *momentLayer = [CAShapeLayer layer];
UIBezierPath *momentpath = [UIBezierPath bezierPath];
NSArray *arr = @[@"12",@"1",@"2",@"3",@"4",@"5",@"6",@"7",@"8",@"9",@"10",@"11"];
for (int i = 0 ; i<arr.count; i++) {
    CGPoint pos = [self getRoundPointR:ViewR angle:-90+30*I];
    CGPoint pos1 = [self getRoundPointR:ViewR-8 angle:-90+30*I]; 
    [momentpath moveToPoint:CGPointMake(pos.x, pos.y)];
    [momentpath addLineToPoint:CGPointMake(pos1.x, pos1.y)];
    CGPoint pos2 = [self getRoundPointR:ViewR-16 angle:-90+30*I];
    NSString *str = arr[i];
    NSMutableDictionary *dic = [NSMutableDictionary dictionaryWithObject:[UIFont systemFontOfSize:14] forKey:NSFontAttributeName];
    CGSize size = [str boundingRectWithSize:CGSizeMake(MAXFLOAT, 0.0) options:NSStringDrawingUsesLineFragmentOrigin attributes:dic context:nil].size;    
    NSDictionary *dict = @{NSFontAttributeName:[UIFont systemFontOfSize:12],NSForegroundColorAttributeName:[UIColor blackColor]};
    [str drawAtPoint:CGPointMake(pos2.x-size.width/2, pos2.y-7) withAttributes:dict];
}
momentLayer.path = momentpath.CGPath;
momentLayer.lineWidth = 2;
momentLayer.strokeColor = self.theDialColor.CGColor;
momentLayer.fillColor = [UIColor clearColor].CGColor;
[self.layer addSublayer:momentLayer];
CAShapeLayer *backGroundLayer = [CAShapeLayer layer];
UIBezierPath *path = [UIBezierPath bezierPathWithArcCenter:center radius:ViewR startAngle:-M_PI_2 endAngle:-M_PI_2+M_PI_2*4 clockwise:YES];
backGroundLayer.path = path.CGPath;
backGroundLayer.lineWidth = 1;
backGroundLayer.strokeColor = self.theDialColor.CGColor;
backGroundLayer.fillColor = [UIColor clearColor].CGColor;
[self.layer addSublayer:backGroundLayer];


画时针

///


UIBezierPath *path = [UIBezierPath bezierPath];
[path moveToPoint:CGPointMake(5, 0)];
[path addLineToPoint:CGPointMake(0, ViewR-(ViewR/2))];
[path addLineToPoint:CGPointMake(10, ViewR-(ViewR/2))];
[path closePath];
CAShapeLayer *hoursLayer = [CAShapeLayer layer];
hoursLayer.lineJoin = kCALineJoinRound;
hoursLayer.anchorPoint = CGPointMake(0.5, 1);
hoursLayer.position = CGPointMake(ViewWidth*0.5, ViewHeight*0.5);
hoursLayer.bounds = CGRectMake(0, 0, 10, ViewR-(ViewR/2));
hoursLayer.path = path.CGPath;
hoursLayer.strokeColor = self.hourColor.CGColor;
hoursLayer.fillColor = self.hourColor.CGColor;
[self.layer addSublayer:hoursLayer];
self.hoursLayer = hoursLayer;


画分针


///


CGFloat weight = 8;
UIBezierPath *path = [UIBezierPath bezierPath];
[path moveToPoint:CGPointMake(weight/2, 0)];
[path addLineToPoint:CGPointMake(0, ViewR-(ViewR/10))];
[path addLineToPoint:CGPointMake(weight, ViewR-(ViewR/10))];
[path closePath];
CAShapeLayer *minuteLayer = [CAShapeLayer layer];
minuteLayer.anchorPoint = CGPointMake(0.5, 1);
minuteLayer.position = CGPointMake(ViewWidth*0.5, ViewHeight*0.5);
minuteLayer.bounds = CGRectMake(0, 0, weight, ViewR-(ViewR/10));
minuteLayer.path = path.CGPath;
minuteLayer.strokeColor = self.minuteColor.CGColor;
minuteLayer.fillColor = self.minuteColor.CGColor;
[self.layer addSublayer:minuteLayer];
self.minuteLayer = minuteLayer;


画秒针

///


CATextLayer *textLayer = [CATextLayer layer];
textLayer.alignmentMode = @"center";
textLayer.anchorPoint = CGPointMake(0.5, 0.5);
textLayer.position = CGPointMake(ViewWidth*0.5, ViewHeight*0.5+40);
textLayer.bounds = CGRectMake(0, 0, 100, 20);
textLayer.string = @"00:00:00";    
textLayer.fontSize = 12;
textLayer.foregroundColor = [UIColor blackColor].CGColor;
[self.layer addSublayer:textLayer];
self.textLayer = textLayer;
CGFloat weight = 6;
UIBezierPath *path = [UIBezierPath bezierPath];
[path moveToPoint:CGPointMake(weight/2, 0)];
[path addLineToPoint:CGPointMake(0, ViewR-(ViewR/40))];
[path addLineToPoint:CGPointMake(weight, ViewR-(ViewR/40))];
[path closePath];
CAShapeLayer *secondLayer = [CAShapeLayer layer];
secondLayer.anchorPoint = CGPointMake(0.5, 1);
secondLayer.position = CGPointMake(ViewWidth*0.5, ViewHeight*0.5);
secondLayer.bounds = CGRectMake(0, 0, weight, ViewR-(ViewR/40));
secondLayer.path = path.CGPath;
secondLayer.strokeColor =self.secondColor.CGColor;
secondLayer.fillColor = self.secondColor.CGColor;
[self.layer addSublayer:secondLayer];
self.secondLayer = secondLayer;


设置每秒刷新时间

///


NSCalendar *calendar = [NSCalendar currentCalendar];
NSDateComponents *compoents = [calendar components:NSCalendarUnitSecond|NSCalendarUnitMinute|NSCalendarUnitHour fromDate:[NSDate date]];
CGFloat sec = compoents.second;
CGFloat minute = compoents.minute;
CGFloat hour = compoents.hour;
NSLog(@"%f:%f:%f",hour,minute,sec);
CGFloat secondA = sec * 6;
CGFloat minuteA = minute * 6;
CGFloat hourA = hour *30;
hourA += minute * 0.5;
self.secondLayer.transform = CATransform3DMakeRotation(angle2RADIAN(secondA), 0, 0, 1);
self.minuteLayer.transform = CATransform3DMakeRotation(angle2RADIAN(minuteA), 0, 0, 1);
self.hoursLayer.transform = CATransform3DMakeRotation(angle2RADIAN(hourA), 0, 0, 1);
self.textLayer.string = [NSString stringWithFormat:@"%02.f:%02.f:%02.f",hour,minute,sec];


如对您有帮助请具体可参考本文dome

相关文章
|
3月前
51单片机实现led灯亮度变化!
51单片机实现led灯亮度变化!
33 0
|
9月前
时钟(分针和时针的重合问题)
时钟(分针和时针的重合问题)
66 1
|
3月前
[光源频闪] Basler相机光源频闪设置操作说明
[光源频闪] Basler相机光源频闪设置操作说明
151 0
|
前端开发 JavaScript
CSS动画篇之炫酷时钟之时钟墙
CSS动画篇之炫酷时钟之时钟墙
70 1
|
10月前
|
算法 图形学
矩形范围碰撞检测
矩形范围碰撞检测
|
C++ 计算机视觉 Python
Qt+C++跑马灯-指示灯-风扇-虚线灯带-动画仿真
这篇博客针对<<Qt+C++跑马灯-指示灯-风扇-虚线灯带-动画仿真>>编写代码,代码整洁,规则,易读。 学习与应用推荐首选。
125 0
|
前端开发
canvas颗粒时钟
使用canvas做一个颗粒时钟,附带动态效果
83 0
canvas颗粒时钟
|
前端开发
canvas炫酷转盘时钟
canvas炫酷转盘时钟,拿来即用
62 0
canvas炫酷转盘时钟
|
移动开发 前端开发 Shell
使用canvas绘制时钟
使用canvas绘制时钟
74 0
|
JavaScript 前端开发 算法
html+css+JavaScript实现简洁的圆形时钟数字时钟+指针时钟
使用前端三件套实现一个实时跟新的时钟,其中包括电子时钟和刻度时钟
281 0
html+css+JavaScript实现简洁的圆形时钟数字时钟+指针时钟