首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

iOS:以百分比形式在UIView中绘制圆

在iOS开发中,如果你想在UIView中以百分比形式绘制一个圆,你可以使用Core Graphics框架来实现自定义的绘制逻辑。以下是实现这一功能的基础概念、优势、类型、应用场景以及可能遇到的问题和解决方案。

基础概念

Core Graphics是一个提供2D图形渲染的框架,它允许开发者直接绘制图形到屏幕上。你可以使用它来创建自定义的UIView,并在其draw(_:)方法中进行绘制。

优势

  • 灵活性:可以精确控制绘制的每一个细节。
  • 性能:对于简单的图形绘制,Core Graphics通常比使用图片资源更高效。
  • 可定制性:可以根据应用的需求动态改变图形的外观。

类型

  • 圆形:根据百分比绘制部分圆或环形。
  • 弧形:绘制圆的一部分,通常用于进度指示器。

应用场景

  • 进度条:显示任务的完成度。
  • 仪表盘:模拟真实世界的仪表盘,如速度计、温度计等。
  • 数据可视化:在图表中展示数据的百分比。

实现步骤

  1. 创建一个继承自UIView的子类。
  2. 重写draw(_:)方法。
  3. 使用Core Graphics函数进行绘制。

示例代码

代码语言:txt
复制
import UIKit

class PercentageCircleView: UIView {
    
    var percentage: CGFloat = 0.0 {
        didSet {
            setNeedsDisplay() // 当百分比改变时重绘视图
        }
    }
    
    override func draw(_ rect: CGRect) {
        guard let context = UIGraphicsGetCurrentContext() else { return }
        
        // 设置圆心和半径
        let center = CGPoint(x: rect.width / 2, y: rect.height / 2)
        let radius = min(rect.width, rect.height) / 2
        
        // 绘制背景圆
        context.setStrokeColor(UIColor.lightGray.cgColor)
        context.setLineWidth(10)
        context.addArc(center: center, radius: radius, startAngle: .pi * 1.5, endAngle: .pi * 1.5 + .pi * 2, clockwise: true)
        context.strokePath()
        
        // 绘制百分比圆
        context.setStrokeColor(UIColor.blue.cgColor)
        let endAngle = .pi * 1.5 + .pi * 2 * percentage
        context.addArc(center: center, radius: radius, startAngle: .pi * 1.5, endAngle: endAngle, clockwise: true)
        context.strokePath()
    }
}

可能遇到的问题及解决方案

  1. 圆弧绘制不正确:确保计算的角度和方向正确,Core Graphics中的角度是以弧度为单位,且顺时针方向为正。
  2. 性能问题:如果视图需要频繁重绘,考虑优化绘制逻辑或使用CADisplayLink来控制重绘频率。
  3. 颜色和线宽不一致:检查setStrokeColorsetLineWidth的调用,确保它们在正确的上下文中设置。

参考链接

通过以上步骤和代码示例,你可以在iOS应用中实现一个以百分比形式绘制的圆形视图。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

使用CAShapeLayer绘图

之前讲过使用UIBezierPathUIView的drawRect绘图, 今天我们讲下另外一种方式: CAShaperLayer 先说说使用CAShapeLayer的优点: GPU执行, GPU执行...按照之前的思路是创建一个UIView子类, 用UIBezierPath画一个外围的不闭合圆弧, 画中间点 代码量不是很多弹也不少, 那假如用CAShapeLayer实现时怎么样子的呢?...重点是这里有一个初学者经常会犯的错误, 同学们绘制曲线的时候经常会layer父图层的相对位置去绘制曲线,这是错的!!! 应该以layer自身的坐标系划线。...请记住,iOSx轴正方向(即水平向右)为0度,顺时针旋转一周为360度。 下面我们再使用CAShapeLayer绘制一些特殊的形状 ?...比如hud这个, 我们之前用UIBezierPathUIView的DrawRect画画过, 相对比较简单 我们用CAShapeLayer事实看。

1.2K10
  • 纯二进制的形式在内存绘制一个对象

    一、引用类型实例的内存布局 二、二进制的形式创建对象 三、字节数组与实例状态的同一性 四、ObjHeader针对哈希被同步状态的缓存 一、引用类型实例的内存布局 从内存布局的角度来看,一个引用类型的实例由如下图所示的三部分组成...二、二进制的形式创建对象 既然我们已经知道了引用类型实例的内存布局,也知道了引用指向的确切的地址,我们不仅可以采用纯“二进制”的方式在内存“绘制”一个指定引用类型的实例,还可以修改某个变量的“值”指向它...{ public int Foo { get; set; } public int Bar { get; set; } } 根据上述针对内存布局的介绍,我们知道任何一个Foobar实例x64...自此我们将“凭空”在内存绘制”了一个Foobar对象。...我们的演示程序调用了Create创建了一个Foo和Bar属性分别为1和2的Foobar对象,并得到它真正映射在内存的字节序列。

    24120

    MemProcFS:虚拟文件系统文件形式查看物理内存

    关于 MemProcFS是一款功能强大且方便实用的物理内存数据查看工具,该工具可以帮助广大研究人员一个虚拟文件系统文件形式查看物理内存数据。...工具特性 该工具支持「鼠标点击」的方式进行内存分析,无需复杂的命令行参数,可以通过挂载的虚拟文件系统的文件或通过功能丰富的应用程序库访问内存内容和组件,也支持将该工具引入到自己的项目中。...默认M加载内存转储文件: memprocfs.exe -device c:\temp\win10x64-dump.raw 默认M加载内存转储文件,开启Verbose模式: memprocfs.exe...1 -forensic-yara-rules c:\yara\rules\windows_malware_index.yar Linux上/home/pi/mnt/加载内存转储文件: ....-device c:\temp\win10x64-dump.raw 只读模式使用WinPMEM驱动器加载实时目标内存: memprocfs.exe -device pmem 读写模式使用PCILeech

    28010

    iOS学习——Quartz2D学习(1)

    Quartz2D学习(1) 本文问答形式主要讲述Quartz2D的相关内容,参考内容是网上下载的学习视频资料。 1、什么是Quartz2D?   ...他是一个二维的绘图引擎,同时支持iOS和Mac系统 2、Quartz2D能完成的工作   画基本线条,绘制文字,图片,截图,自定义UIView. 3、Quartz2D开发的价值   当我们的控件样式极其复杂时...相关联.才能将内容绘制到View上面.DrawRect方法方法里 步骤: 1.要先自定定UIView 2.实现DrawRect方法 3.DrawRect方法取得跟View相关联的上下文...调用这些方法之前,我们要进行一些其他的任务去确保正确的绘制path,以及path的设置。 使用UIColor类的方法去stroke和fill想要的颜色。...使用stroke和fill方法进行渲染时,不需要我们手动去获取上下文了,这两个方法会自定获取view的上下文,然后该view上绘制渲染path对应的路径,stroke是绘制线,fill是填充path对应的封闭区域

    1.1K20

    教你Tableau绘制蝌蚪图等带有空心的图表(多链接)

    本文将通过分享多种方法,包括成功的与失败的尝试,来讲解如何在Tableau创建蝌蚪图等带有空心的图表。...我之前遇到过这种情况并且多年来尝试过各种方法,所以我会分享自己一些的尝试和简单的解决方法,用于Tableau中使用空白绘制蝌蚪图等图表。...再有就是自定义图形极低的分辨率会使你无法PDF 或图像高分辨率打印或导出它们。 那么如何更改数据?我们可以通过计算来缩短这些线。...现在你的图例应该有12种颜色。 双击图例的任意颜色打开编辑颜色菜单 将所有销售圈(副本)颜色改为白色(或背景颜色)并根据需要指定其他颜色。...此外,你还可以反转尺寸来将白色圆圈放在外部,点与点之间产生间隙。

    8.4K50

    IOS开发系列——UIView专题之三:自定义绘制篇【整理,部分原创】

    3UIView重绘机制 3.1DrawRect机制 3.1.1简介 iOS的绘图操作是UIView类的drawRect方法完成的,所以如果我们要想在一个UIView绘图,需要写一个扩展UIView...(调用setNeedsDisplay会自动调用drawRect) UIView,重写drawRect: (CGRect) aRect方法,可以自己定义想要画的图案.且此方法一般情况下只会画一次.也就是说这个...drawRect是Controller->loadView, Controller->viewDidLoad两方法之后调用的.所以不用担心控制器,这些View的drawRect就开始画了.这样可以控制器设置一些值给...2、若使用calayer绘图,只能在drawInContext:(类似鱼drawRect)绘制,或者delegate的相应方法绘制。.../essayInfo/116.html (good)IOS用CGContextRef画各种图形(文字、、直线、弧线、矩形、扇形、椭圆、三角形、圆角矩形、贝塞尔曲线、图片) http://blog.csdn.net

    1.1K30

    iOS基础动画教程

    这个方法可以包含一个代码块,里面设置要改变的东西,执行的时候iOS会自动动画的形式展现出来,代码如下: [UIView animateWithDuration:1 animations:^{...= CGAffineTransformMakeScale(2.0, 2.0);// 长和宽分别变成原来的两倍 }]; 这里就将方块通过一秒钟的动画慢慢放大到原来的两倍,这里要明确的是放大过程,...如果只是想旋转一下停住,按照这种方式写,改变角度就可以了,但是如果想要旋转一个整,第一个想到的可能是把角度改成整: [UIView animateWithDuration:1 animations...,还是原位置,所以iOS选择不动。...以上就是基本的iOS UIView动画了,单个看各自都挺简单的,我们的真实使用当中,当然也要注意结合使用,发挥想象力,简单的功能也是可以组合出帅气的效果的~ 可以github下载我的示例工程:https

    73630

    iOS开发——Core Graphics绘图

    我们搭建UI界面时,有很多时候,我们会用到iOS自带的绘图功能来完成一些界面的效果,很常用也很方便。今天我们在这里就一起讨论一下iOS的绘图功能。...CoreGraphics也称为Quartz 2D 是UIKit下的主要绘图系统,频繁的用于绘制自定义视图。Core Graphics是高度集成于UIView和其他UIKit部分的。...绘图就好比画布上拿着画笔机械的进行画画,通过制定不同的参数来进行不同的绘制。...iOS常见的图形绘制 画线 画圆、圆弧、贝塞尔曲线 画矩形、椭圆形、多边形 绘制图片 绘制文字 ---- iOS绘图基础 绘图之前,我们先来了解一下几个基本的概念 context:上下文,ios绘图的方法都需要传一个上下文...context,这个context重写uiview的drawRect的方法里调用UIGraphicsGetCurrentContext()获取 path:路径,ios绘图可以想象为你拿着一支笔去画图,

    2.5K20

    图层树和寄宿图 -- iOS Core Animation 系列一

    视图层级关系可以互相嵌套,一个视图可以管理它的所有子视图的位置。 iOS,所有的视图都是从UIView这个基类派生出来的。...1.3 平行的层级关系 每个UIView都对应着一个CALayer,视图的职责是创建并管理这个图层,确保党子视图层级关系添加或者被移除的时候,他们对应的图层也同样的在对应的层级关系树中有相同的操作...如果contentsScale设置为1.0,将会每个点1个像素绘制图片,如果2.0,则以每个点2个像素绘制图片(这就是Retina屏)。...因为默认情况下,UIView仍会绘制超过边界的内容,CALayer也不例外。 UIView有个clipsToBounds属性来决定是否显示超出边界的内容。...但是绘制仍然被裁剪了。这是因为我们CALayerDelegate方法,没有对超出边界歪的内容提供绘制支持。 除非创建一个单独的图层,我们平时基本不会用到CALayerDelegate。

    1.2K20

    CALayer 图层概念二、CALayer属性二、方法

    UIView负责监听和相应事件.UIView是更高层的封装 iOS ,你能看得见,摸得着的东西基本上都是UIView.比如一个按钮,一个文本标签,一个文本输入框, 一个图标等.这些都是UIView....当UIView需要显示到屏幕上时,会调用drawRect:方法进行绘图,并且会将所有内容绘制自己的图层上,绘图完毕后,系统会将图层拷贝到屏幕上,于是就完成了UIView得显示.换句话说,UIView...首先 : CALayer是定义QuartzCore框架. CGImageRef, CGColorRef两种数据类型是定义CoreGraphics框架的....其次 : QuartzCore框架和CoreGraphics框架是可以跨平台使用的,iOS和Mac OS X上都能使用 (C语言编写) 但是UIKit只能在iOS中使用 (OC编写)....= YES ; 设置两边多余地方不裁剪 button.imageView.clipsToBounds = NO; 路径绘制,绘图剪裁 矩形图片剪裁成并且外面设置圆环并存储 给layer设置背景图片

    1.4K70

    setNeedsDisplay看我就懂!

    一、着手 我定义了一个UIView的子类,用于演示使用setNeedsDisplay,这个CircleView子类会在draw(_ rect: CGRect)方法内简单绘制一个,它有一个颜色属性,这是我们将要设置用来改变圆的颜色...二、配置属性、组件 应用程序的下一部分是故事板配置一些UIKit组件,其中一个是CircleView。...,根据故事板配置的步进器的默认值,我触发了一组初始的圆形颜色。...而我们自定义了自己的UIView子类,所以我们需要处理影响显示的控件的更新。改变颜色的情况下,当然需要我们自己控制重新绘制。...所以我们需要调用setNeedsDisplay,明确地告诉系统必须重新绘制,从而显示新的颜色 由此,我们需要考虑三个重要的原则: 1、iOS,视图很明显会被缓存。

    1.3K60

    大前端开发的“树” (下)

    文本或者背景色),管理子图层的位置,在数据结构上构成树的形式,称之为图层树;图层树的能力包括: 阴影、圆角、带颜色的边框 3D 变换 非矩形范围 透明遮罩 多级非线性动画 CALayer 的工作过程...,我们暂且使用这个概念叙述,后文再探讨 Flutter 具体的树组织形式。...它和 Android View、iOS UIView 、 Web HTML + CSS 有一定的对应关系。 5.1.2 Element 对比差异减少操作对底层绘制操作次数的中间节点。... Web 的语境下它就相当于 DOM 树,Android 和 iOS 的语境它覆盖了 View layout 和 paint 流程。...5.2.3 小结 Flutter 各个组件构成一整棵树的整体,通过组件间的协同来完成视图的绘制

    1.9K30

    iOS面试题-UI篇

    UIView显示屏幕上归功于CALayer,通过调用drawRect方法来渲染自身的内容,调节CALayer属性可以调整UIView的外观, UIView继承自UIResponder,比起CALayer...可以响应用户事件,Xcode6之后可以方便的通过视图调试功能查看图层之间的关系 UIViewiOS系统界面元素的基础,所有的界面元素都继承自它。...) layerClass { // 使某个UIView的子类使用GL来进行绘制 return ([CAEAGLLayer class]); } UIView的CALayer类似UIView...加载图片的过程大致如下: 首先会在 SDWebImageCache 寻找图片是否有对应的缓存, 它会url 作为数据的索引先在内存寻找是否有对应的缓存 如果缓存未找到就会利用通过MD5处理过的key...如何进行iOS6、7的适配 通过判断版本来控制,来执行响应的代码 功能适配:保证同一个功能在6、7上都能用 UI适配:保证各自的显示风格 // iOS版本为7.0以上(包含7.0) #define iOS7

    2K21

    iOS学习——核心动画之Layer基础

    UIImageViewUIView的主layer上添加了一个次layer(用来绘制contents),我们设置边框的是主layer,但是次layer在上变,不会有任何的影响,所以当我们调用切割语句的时候...明白要怎么选择之前,我们先了解一下UIView和layer的不同点: iOS中看的见,摸得着的都是UIView,例如一个按钮,UITextField,UILable等等,都是UIView UIView...之所以能够显示屏幕上,是试音UIView中有一个图层 创建UIView的时候,系统会自动创建一个CALayer在其中,用于显示东西,可以通过view.layer来去获取图层属性 当UIView要去显示的时候...,先去调用drawRect方法,将要绘制的东西绘制到图层上,然后拷贝图层,完成了UIView的显示 UIView只有交互的功能,没有显示的功能 CALayer只要显示的功能,没有交互的功能 UIView...position:它是用来设置当前的layer父控件当中的位置的,默认它的坐标原点,父控件的左上角为(0.0)点。   anchorPoint:锚点,就是把锚点定到position所指的位置。

    1.5K61

    Quartz2D复习(四) --- 图层CALayer和动画CAAnimation

    1、CALayer 1)、ios,能看得见摸得着的东西基本上都是UIView, 比如按钮、文本标签、文本输入框、图标等,这些都是UIView 2)、UIView之所以能显示屏幕上,完全是因为它内部的一个图层...retain) CALayer *layer; 4)、当UIView需要显示到屏幕上时,会调用drawRect:方法进行绘图,并且会将所有内容绘制自己的图层上,绘图完毕后,系统会将图层拷贝到屏幕上,于是就完成了...框架的[Core Animation];   CGImageRef、CGColorRef两种数据类型是定义CoreGraphics框架;   UIColor、UIImage是定义UIKit框架的...;   QuartzCore框架和CoreGraphics框架是可以跨平台使用的,ios和Mac OSX上能使用;   但是UIKit只能在ios中使用;为了保证可移植性,QuartzCore不能使用...  subtype : 动画过度方向   startProgress : 动画起点(整体动画的百分比)   endProgress : 动画终点(整体动画的百分比)   转场动画过度效果: ?

    1.4K30

    绘图-CAShapeLayer、CABasicAnimation以及核心动画

    前言 QeartzCore是iOS的图层框架,Quartz Core 的渲染能力可以像三维一样对二维图像进行任意操纵,在这个框架我们可以对试图的图层进行定制,实现我们想要的效果。...但实际上UIView是对CALayer封装,CALayer的基础上再添加交互功能。UIView的显示必须依赖于CALayer。...CAShapeLayer有不同于CALayer的属性,它从CALayer继承而来的属性绘制时是不起作用的。...LineWidth 是边界上绘制的宽度,而且 绘制的宽度被边界一分为二。 #如果LineWidth 为0 ,strokeColor设置后也是没有效果的。...如果设置为YES,就意味着动画完成后会动画的形式回到初始值。 fillMode -> 决定当前对象非动画时间段的行为.比如动画开始之前,动画结束之后。

    2.8K30

    Android 自定义圆形进度View

    进行App开发过程不免会需要自定义一些View,比如我们之前说的iOS平台下的具有任务刻度的View ,今天我们来看看android怎么实现一个圆形的进行view吧,大致效果如下: ?...void draw(Canvas canvas) 完成操作绘制操作 无论是原的绘制还是文本的绘制首先我们要计算他们的位置,而要计算这些我们需要调用系统提供的测绘方法获取宽高并保存下来留待后续使用...因为我们是画弧线而是进度达到100%的一种表现形式而已。...这里其实是有一个大坑的----我们数学是按照象限沿着逆时针来走的而此处却跟我们的常识有出入:从我们钟表上的3点位置顺时针作为起点开始 2.3 指示文本的绘制 文本绘制这个逻辑其实也算是比较简单的...+ titleRect.height() / 2, mTitlePaint); DecimalFormat df = new DecimalFormat("#%");//乘以100后百分比形式输出

    72020
    领券