- 浏览: 2203561 次
- 性别:
- 来自: 北京
文章分类
- 全部博客 (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 634本篇将带你深入理解 Flutter 开发过程中关于字体和文 ... -
Flutter -自定义日历组件
2020-03-01 17:56 1110颜色文件和屏幕适配的文件 可以自己给定 import ... -
Dart高级(一)——泛型与Json To Bean
2020-02-23 19:13 1004从 Flutter 发布到现在, 越来越多人开始尝试使用 Da ... -
flutter loading、Progress进度条
2020-02-21 17:03 1179Flutter Progress 1 条形无固定值进度条 ... -
Flutter使用Https加载图片
2020-02-21 01:39 1019Flutter使用Https加载图片 使用http加载图片出 ... -
flutter shared_preferences 异步变同步
2020-02-21 00:55 847前言 引用 在开发原生iOS或Native应用时,一般有判断上 ... -
Flutter TextField边框颜色
2020-02-19 21:31 936监听要销毁 myController.dispose(); T ... -
flutter Future的正确用法
2020-02-18 21:55 807在flutter中经常会用到异步任务,dart中异步任务异步处 ... -
记一次Flutter简单粗暴处理HTTPS证书检验方法
2020-02-18 14:13 978最近在做Flutter项目到了遇到一个无解的事情,当使用Ima ... -
flutter 获取屏幕宽度高度 通知栏高度等屏幕信息
2019-07-27 08:39 1342##MediaQuery MediaQuery.of(con ... -
Mac上制作Centos7系统U盘安装盘
2019-07-23 11:25 651Centos7 下载地址: https://www.cento ... -
关于flutter RefreshIndicator扩展listview下拉刷新的问题
2019-07-10 19:40 1139当条目过少时listview某些嵌套情况下可能不会滚动(条目 ... -
flutter listview 改变状态的时候一直无限添加
2019-07-10 16:01 789setstate的时候会一直无限的调用listview.bui ... -
Flutter Android端启动白屏问题的解决
2019-07-09 00:51 1522问题描述 Flutter 应用在 Android 端上启动时 ... -
Flutter中SnackBar使用
2019-07-08 23:43 780底部弹出,然后在指定时间后消失。 注意: build(Bui ... -
Flutter 之点击空白区域收起键盘
2019-07-08 18:43 1791点击空白处取消TextField焦点这个需求是非常简单的,在学 ... -
Flutter 弹窗 Dialog ,AlertDialog,IOS风格
2019-07-08 18:04 1380import 'package:flutter/mate ... -
flutter ---TextField 之 输入类型、长度限制
2019-07-08 14:30 2336TextField想要实现输入类型、长度限制需要先引入impo ... -
【flutter 溢出BUG】键盘上显示bottom overflowed by 104 PIXELS
2019-07-08 11:13 1566一开始直接使用Scaffold布局,body:new Colu ... -
解决Flutter项目卡在Initializing gradle...界面的问题
2019-07-07 12:53 879Flutter最近很火,我抽出了一点时间对Flutter进行了 ...
相关推荐
本文将深入探讨如何使用Qt QML来设计和实现一个汽车仪表盘控件。 首先,Qt是一个跨平台的应用程序开发框架,支持多种操作系统,如Windows、Linux、Android和iOS等。而QML是Qt的一个重要组成部分,它允许开发者用...
Design-UI后台管理页面原型库则专注于网页后台界面的设计,提供了如仪表盘、数据表格、操作按钮等常见的后台管理元素,适用于构建企业管理、数据分析等后台系统的原型。 iOS原型库遵循苹果的Human Interface ...
- 高级仪表盘相比自助仪表盘提供更多定制化选项。 - 下钻联动效果增强了交互性和数据分析的深度。 #### 分析报告 25. **应用场景与特点**: - 应用于业务汇报、项目总结等场景。 - 特点在于能够整合多种数据源...
开发者可以通过编程方式调整几乎每一个细节,如自定义数据点的形状、大小、颜色,添加趋势线、误差线,以及设置动画效果等。此外,TeeChart还支持实时数据更新和交互式操作,例如鼠标悬停时显示数据值,点击图表元素...
2. **图表组件(TAdvChart)**:提供了多种图表类型,如柱状图、折线图、饼图等,支持实时数据更新,能够用于数据分析和可视化,是制作统计报告和仪表盘的理想选择。 3. **表单设计器(TAdvFormDesigner)**:允许...
由于提供的文件信息中包含了很多重复的内容以及扫描错误,我将会尽量提炼出有用的信息,并且根据给定的文件内容制作一个丰富的知识点总结。这里将主要讨论CarPlay系统的开发相关的知识。 知识点一:CarPlay系统概述...
5. **仪表盘**:提供直观的仪表盘视图来监控关键指标。 #### 六、Power BI 的高级特性 1. **Power Query (M 函数)**:用于编写自定义的数据提取和转换脚本。 2. **DAX 表达式**:基于 Excel 公式的扩展语言,用于...
"fligthsimubuild61"可能是这个项目的一个构建版本,包含了游戏的可执行文件、资源和其他配置信息。学习这个项目,开发者可以深入理解Unity3D在飞行模拟游戏开发中的应用,提升自己的技能,并为创建更复杂的游戏奠定...
2. **报表设计**:提供直观的拖放界面,用户可以创建各种类型的报表,如表格、图表、仪表盘等。此外,还可以利用强大的过滤和排序功能,使数据更加清晰易懂。 3. **自定义组件**:arcplan允许用户开发自己的函数、...
- 使用图表、仪表盘等形式展示数据分析结果,便于直观了解当前疫情防控的状态。 - 可以借助BI工具如Tableau、Power BI等进行数据可视化展示。 2. **云服务的应用**: - 将企业的部分IT系统迁移到云端,利用云...
我们需要创建一个可自定义的UIControl子类,代表转速表,并在其中设计仪表盘的图形元素,如指针、刻度线和背景。同时,还要实现触控事件处理,使得用户可以通过滑动来模拟调整转速。 三、数据获取与处理 转速信息...
有线:“查找权限页面可能会非常棘手,但”我的权限“中的好友制作了一个方便的仪表盘,链接到每个人” ***** 它是如何工作的? ***** - 只需下载适用于您喜爱的浏览器或Android / iOS设备的扩展程序或应用程序...