- 浏览: 2157378 次
- 性别:
- 来自: 北京
文章分类
- 全部博客 (1240)
- mac/IOS (287)
- flutter (1)
- J2EE (115)
- android基础知识 (582)
- android中级知识 (55)
- android组件(Widget)开发 (18)
- android 错误 (21)
- javascript (18)
- linux (70)
- 树莓派 (18)
- gwt/gxt (1)
- 工具(IDE)/包(jar) (18)
- web前端 (17)
- java 算法 (8)
- 其它 (5)
- chrome (7)
- 数据库 (8)
- 经济/金融 (0)
- english (2)
- HTML5 (7)
- 网络安全 (14)
- 设计欣赏/设计窗 (8)
- 汇编/C (8)
- 工具类 (4)
- 游戏 (5)
- 开发频道 (5)
- Android OpenGL (1)
- 科学 (4)
- 运维 (0)
- 好东西 (6)
- 美食 (1)
最新评论
-
liangzai_cool:
请教一下,文中,shell、C、Python三种方式控制led ...
树莓派 - MAX7219 -
jiazimo:
...
Kafka源码分析-序列5 -Producer -RecordAccumulator队列分析 -
hp321:
Windows该命令是不是需要安装什么软件才可以?我试过不行( ...
ImageIO读jpg的时候出现javax.imageio.IIOException: Unsupported Image Type -
hp321:
Chenzh_758 写道其实直接用一下代码就可以解决了:JP ...
ImageIO读jpg的时候出现javax.imageio.IIOException: Unsupported Image Type -
huanghonhpeng:
大哥你真强什么都会,研究研究。。。。小弟在这里学到了很多知识。 ...
android 浏览器
我们首先看一下这个速度表盘的效果:
为了实现上述的效果,我们首当其冲的是得了解的是贝塞尔曲线,听上去好高大上的样子,接下来我先就我了解贝塞尔曲线的知识给未接触的朋友普及一下。
大家先欣赏一下各种贝塞尔曲线
一阶
二阶
三阶
高阶
我们要完成上述表盘的效果,需要用到的就是贝塞尔曲线!
我们看一下苹果官方文档对它的介绍
上述文字简单翻译一下的意思是:你可以使用贝塞尔曲线来定义直线和曲线和自定义的图形。官方还有很长的篇幅来解释它,有兴趣的可以去看。
下面我主要介绍UIBezierPath和CAShapeLayer一起使用,完成上述表盘的效果,我默认你已经经过查找资料对他们很熟悉。
首先我们分解步骤
1.画出内侧的圆弧
苹果官方提供了3阶以下的api接口,我使用一个二阶的api,实现圆弧。
弧线的参考系:
2.画出外侧的刻度
3.增加刻度值
需要使用创建label的方式,首先我们得计算出label的position,然后添加
4.实现速度显示(实现方式很多,可以是Label,也可以画出来,就不赘述)
这里说一下画的方式
5.实现进度
我们只需要改变strokeEnd即可实现速度变化,默认0~1之间。
我们可以在外部通过定时器方法模拟速度表盘的变化,即可实现上述速度表盘。
结尾:本文只是简单的介绍一种思路,个人感觉可以优化的空间很多,打算整理写一个上传gitHub的三方库,提供多个可供外界改变的接口,希望有兴趣的朋友一起来做,维护这个库,欢迎私信联系。
为了实现上述的效果,我们首当其冲的是得了解的是贝塞尔曲线,听上去好高大上的样子,接下来我先就我了解贝塞尔曲线的知识给未接触的朋友普及一下。
Bézier curve(贝塞尔曲线)是应用于二维图形应用程序的数学曲线.主要有起始点、终止点(也称锚点)、控制点这几个概念。通过调整控制点,贝塞尔曲线的形状会发生变化。
大家先欣赏一下各种贝塞尔曲线
一阶
二阶
三阶
高阶
我们要完成上述表盘的效果,需要用到的就是贝塞尔曲线!
我们看一下苹果官方文档对它的介绍
The UIBezierPath class lets you define a path consisting of straight and curved line segments and render that path in your custom views. You use this class initially to specify just the geometry for your path. Paths can define simple shapes such as rectangles, ovals, and arcs or they can define complex polygons that incorporate a mixture of straight and curved line segments. After defining the shape, you can use additional methods of this class to render the path in the current drawing context.
上述文字简单翻译一下的意思是:你可以使用贝塞尔曲线来定义直线和曲线和自定义的图形。官方还有很长的篇幅来解释它,有兴趣的可以去看。
下面我主要介绍UIBezierPath和CAShapeLayer一起使用,完成上述表盘的效果,我默认你已经经过查找资料对他们很熟悉。
首先我们分解步骤
1.画出内侧的圆弧
苹果官方提供了3阶以下的api接口,我使用一个二阶的api,实现圆弧。
//主要解释一下各个参数的意思 //center 中心点(可以理解为圆心) //radius 半径 //startAngle 起始角度 //endAngle 结束角度 //clockwise 是否顺时针 UIBezierPath *cicrle = [UIBezierPath bezierPathWithArcCenter:centers radius:95 startAngle:- M_PI endAngle: 0 clockwise:YES]; CAShapeLayer *shapeLayer = [CAShapeLayer layer]; shapeLayer.lineWidth = 5.f; shapeLayer.fillColor = [UIColor clearColor].CGColor; shapeLayer.strokeColor = RGBColor(185,243,110).CGColor; shapeLayer.path = cicrle.CGPath; [self.layer addSublayer:shapeLayer];
弧线的参考系:
2.画出外侧的刻度
CGFloat perAngle = M_PI / 50; //我们需要计算出每段弧线的起始角度和结束角度 //这里我们从- M_PI 开始,我们需要理解与明白的是我们画的弧线与内侧弧线是同一个圆心 for (int i = 0; i< 51; i++) { CGFloat startAngel = (-M_PI + perAngle * i); CGFloat endAngel = startAngel + perAngle/5; UIBezierPath *tickPath = [UIBezierPath bezierPathWithArcCenter:centers radius:150 startAngle:startAngel endAngle:endAngel clockwise:YES]; CAShapeLayer *perLayer = [CAShapeLayer layer]; if (i % 5 == 0) { perLayer.strokeColor = [UIColor colorWithRed:0.62 green:0.84 blue:0.93 alpha:1.0].CGColor; perLayer.lineWidth = 10.f; }else{ perLayer.strokeColor = [UIColor colorWithRed:0.22 green:0.66 blue:0.87 alpha:1.0].CGColor; perLayer.lineWidth = 5; } perLayer.path = tickPath.CGPath; [self.layer addSublayer:perLayer]; }
3.增加刻度值
需要使用创建label的方式,首先我们得计算出label的position,然后添加
CGPoint point = [self calculateTextPositonWithArcCenter:centers Angle:textAngel]; NSString *tickText = [NSString stringWithFormat:@"%d",i * 2]; //默认label的大小14 * 14 UILabel *text = [[UILabel alloc] initWithFrame:CGRectMake(point.x - 5, point.y - 5, 14, 14)]; text.text = tickText; text.font = font; text.textColor = [UIColor colorWithRed:0.54 green:0.78 blue:0.91 alpha:1.0]; text.textAlignment = NSTextAlignmentCenter; [self addSubview:text]; //默认计算半径135 - (CGPoint)calculateTextPositonWithArcCenter:(CGPoint)center Angle:(CGFloat)angel { CGFloat x = 135 * cosf(angel); CGFloat y = 135 * sinf(angel); return CGPointMake(center.x + x, center.y - y); }
4.实现速度显示(实现方式很多,可以是Label,也可以画出来,就不赘述)
这里说一下画的方式
- (void)drawRect:(CGRect)rect { NSDictionary *attributes = [NSDictionary dictionaryWithObjectsAndKeys:[UIFont boldSystemFontOfSize:15],NSFontAttributeName,[UIColor whiteColor], NSForegroundColorAttributeName, nil]; [@"km/h" drawInRect:CGRectMake(centers.x - 15, centers.y, 60, 20) withAttributes:attributes]; }
5.实现进度
// 进度的曲线 UIBezierPath *progressPath = [UIBezierPath bezierPathWithArcCenter:centers radius:120 startAngle:- M_PI endAngle:0 clockwise:YES]; progressLayer = [CAShapeLayer layer]; progressLayer.lineWidth = 50.f; progressLayer.fillColor = [UIColor clearColor].CGColor; progressLayer.strokeColor = RGBAColor(185,243,110,0.2).CGColor; progressLayer.path = progressPath.CGPath; progressLayer.strokeStart = 0; progressLayer.strokeEnd = 0;
我们只需要改变strokeEnd即可实现速度变化,默认0~1之间。
//提供一个外部的接口,通过重写setter方法来改变进度 - (void)setSpeed:(double)speed { _speed = speed; progressLayer.strokeEnd = _speed? _speed/100:0; speedLabel.text = [NSString stringWithFormat:@"%.f",speed]; }
我们可以在外部通过定时器方法模拟速度表盘的变化,即可实现上述速度表盘。
结尾:本文只是简单的介绍一种思路,个人感觉可以优化的空间很多,打算整理写一个上传gitHub的三方库,提供多个可供外界改变的接口,希望有兴趣的朋友一起来做,维护这个库,欢迎私信联系。
发表评论
-
带你深入理解 FLUTTER 中的字体“冷”知识
2020-08-10 23:40 587本篇将带你深入理解 Flutter 开发过程中关于字体和文 ... -
Flutter -自定义日历组件
2020-03-01 17:56 1047颜色文件和屏幕适配的文件 可以自己给定 import ... -
Dart高级(一)——泛型与Json To Bean
2020-02-23 19:13 941从 Flutter 发布到现在, 越来越多人开始尝试使用 Da ... -
flutter loading、Progress进度条
2020-02-21 17:03 1064Flutter Progress 1 条形无固定值进度条 ... -
Flutter使用Https加载图片
2020-02-21 01:39 925Flutter使用Https加载图片 使用http加载图片出 ... -
flutter shared_preferences 异步变同步
2020-02-21 00:55 785前言 引用 在开发原生iOS或Native应用时,一般有判断上 ... -
Flutter TextField边框颜色
2020-02-19 21:31 869监听要销毁 myController.dispose(); T ... -
flutter Future的正确用法
2020-02-18 21:55 753在flutter中经常会用到异步任务,dart中异步任务异步处 ... -
记一次Flutter简单粗暴处理HTTPS证书检验方法
2020-02-18 14:13 858最近在做Flutter项目到了遇到一个无解的事情,当使用Ima ... -
flutter 获取屏幕宽度高度 通知栏高度等屏幕信息
2019-07-27 08:39 1246##MediaQuery MediaQuery.of(con ... -
Mac上制作Centos7系统U盘安装盘
2019-07-23 11:25 605Centos7 下载地址: https://www.cento ... -
关于flutter RefreshIndicator扩展listview下拉刷新的问题
2019-07-10 19:40 1015当条目过少时listview某些嵌套情况下可能不会滚动(条目 ... -
flutter listview 改变状态的时候一直无限添加
2019-07-10 16:01 695setstate的时候会一直无限的调用listview.bui ... -
Flutter Android端启动白屏问题的解决
2019-07-09 00:51 1420问题描述 Flutter 应用在 Android 端上启动时 ... -
Flutter中SnackBar使用
2019-07-08 23:43 701底部弹出,然后在指定时间后消失。 注意: build(Bui ... -
Flutter 之点击空白区域收起键盘
2019-07-08 18:43 1696点击空白处取消TextField焦点这个需求是非常简单的,在学 ... -
Flutter 弹窗 Dialog ,AlertDialog,IOS风格
2019-07-08 18:04 1308import 'package:flutter/mate ... -
flutter ---TextField 之 输入类型、长度限制
2019-07-08 14:30 2218TextField想要实现输入类型、长度限制需要先引入impo ... -
【flutter 溢出BUG】键盘上显示bottom overflowed by 104 PIXELS
2019-07-08 11:13 1466一开始直接使用Scaffold布局,body:new Colu ... -
解决Flutter项目卡在Initializing gradle...界面的问题
2019-07-07 12:53 811Flutter最近很火,我抽出了一点时间对Flutter进行了 ...
相关推荐
iOS 仪表盘,仪表盘的画法和详情,刻度等得画法,
iOS 仪表盘 MeterView ,MeterView 是一个模拟的仪表盘控件。
绘制仪表盘
iOS端非常漂亮的全代码绘制的仪表盘,提供两种显示模式。
一个绘制的仪表盘。在实际开发中是要根据需求去自定制的,所以未进行封装,只提供一种实现思路,内部关键代码已给出注释,很简单。。
一个简单的仪表盘 大家可以拿去改造改造 感觉自己实现的比较复杂 有什么更好的办法? gif图没截取
以前有几个iOS demo平台有很多参考控件的但后来这些平台都逐一关闭了,,挺可惜的!现在iOS开源控件比安卓少,安卓随便找下能得到...速度仪表盘和温度计当时也折腾了一天,分享出来放心下载使用。都有缓动效果比较逼真
IOS 上实现的自定义仪表盘,像车速里程表,可以用来做流量监控之类的应用
IOS 车牌号录入 自定义键盘CollectionView 自定义键盘
一个类似于仪表盘的百分比选择控件 github地址:https://github.com/chuting/CTDial 支持pod集成
本篇文章主要介绍了IOS上实现的自定义仪表盘示例,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
接着,将所准备的 u 盘插入到电脑 usb 插口当中,等待 u 盘读取识别后,按下窗口下方的“ 一键制作启动 u 盘” 按钮,开始进入到下一个制作 u 盘启动盘的环节。 在下一个环节中,我们会看到一个新的窗口操作画面,...
和IOS原生键盘基本一致,可以自定义键盘上的文字,对于一些什么偏远地区的语言IOS原来没有的,可以自定义文字。另外加了键盘的随机分布,只需要在初始化的时候设置isRandomKeyBoard属性,即可每次触发键盘时,键盘...
这是一个表盘样式的指示器,你可以选择指针的指向,也可以滑动指针!一个简单的效果!
ios系统制作工具,绿色版本,是一款制作U盘系统的好工具
仿芝麻信用的仪表盘动画效果: 1.圆环上白点的旋转 2.分数值的变化 3.背景色的变化
下载地址 https://github.com/wayone/Indicator
本程序使用了绘图技术,绘制了脉冲图,可动曲线图以及指针可动的仪表盘功能,欢迎大家下载
ios固件制作工具