社区首页 >问答首页 >如何在使用CAShapeLayer - Swift绘制的路径上标记点?

如何在使用CAShapeLayer - Swift绘制的路径上标记点?
EN

Stack Overflow用户
提问于 2016-03-09 23:04:33
回答 1查看 1.9K关注 0票数 0

我有一个使用CAShapeLayerUIView中绘制的自定义路径。它是半圆,上半圆,从左到右画。

下面是在UIView子类中使用的、写入的代码:

代码语言:javascript
代码运行次数:0
复制
func drawSemicircle() {

        // drawing an upper half of a circle -> 180 degree to 0 degree, clockwise
        let startAngle = CGFloat(M_PI)
        let endAngle = CGFloat(0.0)
        let centerPoint = CGPointMake(CGRectGetWidth(frame)/2 , CGRectGetHeight(frame))

        // path set here
        let semirCircleLayer = CAShapeLayer()
        let semirCirclePath = UIBezierPath(arcCenter:centerPoint, radius: CGRectGetWidth(frame)/2 - 20.0 , startAngle:startAngle, endAngle:endAngle, clockwise: true)
        semirCircleLayer.path = semirCirclePath.CGPath

        // layer customisation
        semirCircleLayer.fillColor = UIColor.clearColor().CGColor
        semirCircleLayer.strokeColor = UIColor(red: 237.0/255.0, green: 236.0/255.0, blue: 236.0/255.0, alpha: 1.0).CGColor
        semirCircleLayer.lineWidth = 20.0
        semirCircleLayer.lineCap = kCALineCapButt
        layer.addSublayer(semirCircleLayer)
    }

当前路径如下所示:

我试着实现的是在条形.Like上的一些点标记一个模拟时钟的毕业+数字,但没有那么复杂。只需在任何进度水平上标记1点。最后一个输出,如下所示:

能帮我个忙吗?

EN

回答 1

Stack Overflow用户

发布于 2016-03-11 11:22:20

您将希望在毕业时使用另一个CAShapeLayer,在毕业典礼结束时使用一个CATextLayer

我建议您使用100%的图层方法来最适合您的现有代码,而不是像my answer here那样进行核心图形绘制。

像这样的事情应该能起作用:

代码语言:javascript
代码运行次数:0
复制
func drawSemicircle() {

    // drawing an upper half of a circle -> 180 degree to 0 degree, clockwise
    let startAngle = CGFloat(M_PI)
    let endAngle = CGFloat(0.0)
    let centerPoint = CGPoint(x: CGRectGetWidth(frame)*0.5 , y: CGRectGetHeight(frame))
    let radius = frame.size.width*0.5 - 80.0 // radius of your arc

    // path set here
    let semiCircleLayer = CAShapeLayer()
    semiCircleLayer.frame = bounds // requried for layer calculations
    let semiCirclePath = UIBezierPath(arcCenter:centerPoint, radius:radius, startAngle:startAngle, endAngle:endAngle, clockwise: true)
    semiCircleLayer.path = semiCirclePath.CGPath

    // layer customisation
    semiCircleLayer.fillColor = UIColor.clearColor().CGColor
    semiCircleLayer.strokeColor = UIColor(red: 237.0/255.0, green: 236.0/255.0, blue: 236.0/255.0, alpha: 1.0).CGColor
    semiCircleLayer.lineWidth = 20.0
    semiCircleLayer.lineCap = kCALineCapButt
    layer.addSublayer(semiCircleLayer)


    // draw graduation (cue the wall of code!)

    let graduationLayer = CAShapeLayer() // the graduation layer that'll display the graduation
    graduationLayer.frame = semiCircleLayer.bounds

    let graduationWidth = CGFloat(4.0) // the width of the graduation
    let graduationLength = CGFloat(50.0) // the length of the graduation
    let graduationColor = UIColor.redColor() // the color of both the graduation line and text

    let startGradRad = radius-semiCircleLayer.lineWidth*0.5 // the starting radius of the graduation
    let endGradRad = startGradRad+graduationLength // the ending radius of the graduation

    let graduationAngle = CGFloat(M_PI*0.79) // 21% along the arc from the left (0 degrees coresponds to the right hand side of the circle, with the positive angle direction going anti-clocwise (much like a unit circle in maths), so we define 79% along the arc, from the right hand side)

    // the starting point of the graduation line. the angles are negative as the arc is effectively drawn upside-down in the UIKit coordinate system.
    let startGradPoint = CGPoint(x: cos(-graduationAngle)*startGradRad+centerPoint.x, y: sin(-graduationAngle)*startGradRad+centerPoint.y)
    let endGradPoint = CGPoint(x: cos(-graduationAngle)*endGradRad+centerPoint.x, y: sin(-graduationAngle)*endGradRad+centerPoint.y)

    // the path for the graduation line
    let graduationPath = UIBezierPath()
    graduationPath.moveToPoint(startGradPoint) // start point
    graduationPath.addLineToPoint(endGradPoint) // end point

    graduationLayer.path = graduationPath.CGPath // add path to the graduation shape layer

    // configure stroking options
    graduationLayer.fillColor = UIColor.clearColor().CGColor
    graduationLayer.strokeColor = graduationColor.CGColor
    graduationLayer.lineWidth = graduationWidth

    // add to semi-circle layer
    semiCircleLayer.addSublayer(graduationLayer)

    // the font of the text to render at the end of the graduation
    let textFont = UIFont.systemFontOfSize(30)

    // the text to render at the end of the graduation - do you custom value logic here
    let str : NSString = "value"

    // default paragraph style
    let paragraphStyle = NSParagraphStyle()

    // the text attributes dictionary. used to obtain a size of the drawn text in order to calculate its frame
    let textAttributes = [NSParagraphStyleAttributeName:paragraphStyle, NSFontAttributeName:textFont]

    // size of the rendered text
    let textSize = str.sizeWithAttributes(textAttributes)

    let xOffset = abs(cos(graduationAngle))*textSize.width*0.5 // the x-offset of the text from the end of the graduation line
    let yOffset = abs(sin(graduationAngle))*textSize.height*0.5 // the y-offset of the text from the end of the graduation line

    /// the padding between the graduation line and the text
    let graduationTextPadding = CGFloat(5.0)

    // bit of pythagorus to determine how far away the center of the text lies from the end of the graduation line. multiplying the values together is cheaper than using pow. the text padding is added onto it.
    let textOffset = sqrt(xOffset*xOffset+yOffset*yOffset)+graduationTextPadding

    // the center of the text to render
    let textCenter = CGPoint(x: cos(-graduationAngle)*textOffset+endGradPoint.x, y: sin(-graduationAngle)*textOffset+endGradPoint.y)

    // the frame of the text to render
    let textRect = CGRect(x: textCenter.x-textSize.width*0.5, y: textCenter.y-textSize.height*0.5, width: textSize.width, height: textSize.height)

    let textLayer = CATextLayer()
    textLayer.contentsScale = UIScreen.mainScreen().scale // to ensure the text is rendered at the screen scale
    textLayer.frame = textRect
    textLayer.string = str
    textLayer.font = textFont
    textLayer.fontSize = textFont.pointSize // required as CATextLayer ignores the font size of the font you pass
    textLayer.foregroundColor = graduationColor.CGColor // color of text
    graduationLayer.addSublayer(textLayer)
}

输出:

这里有相当多的代码,因为您必须做一些额外的逻辑来计算CATextLayer的大小。您可以通过使用UILabel简化这一点,因为您可以使用sizeToFit来计算大小,但是这可能会使层层次结构复杂化。

我已经尽力解释了每一行代码--但是如果你还有问题,我会很乐意回答它们的!

此外,如果您重新构造代码,您可以很容易地考虑到分级角度,以及从类外部更改其他变量。我在下面的完整项目中提供了一个这方面的示例。

完整项目:https://github.com/hamishknight/Dial-View

票数 6
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/35909748

复制
相关文章
python3 TypeError: a
运行telnetlib的时候报错:TypeError: a bytes-like object is required, not ‘str’,原因是因为python2和python3的版本的差异。 在python2中可正常运行,而python3最重要的新特性也是对文本和二进制数据做了更清晰的区分。文本用unicode编码,为str类型,二进制数据则为bytes类型。
py3study
2020/01/03
1.1K0
Mac 安装Python3
Python 2.7.10 (default, Jul 15 2017, 17:16:57) 
星宇大前端
2019/01/15
2K0
Pygraphviz
代码越来越复杂,为了理清架构,需要搞清楚现有代码业务逻辑,没有很顺手的工具,简单写写学习一下。
vanguard
2020/12/30
5750
python3 调用heapq库 时遭遇 "TypeError: unorderable types"
同样的代码在LeetCode上提交,在 python3解释器 下报错,换成 python2解释器 下却好好的:
JNingWei
2018/09/27
7550
python3 调用heapq库 时遭遇 "TypeError: unorderable types"
mac python3 安装parami
$ git clone https://github.com/paramiko/paramiko.git
py3study
2020/01/03
4740
mac> python3 安装Djang
说明:mac系统自带了python2.x (在/System/Library/Frameworks/Python.Frameworks/Version/2.x/...)
py3study
2020/01/03
4990
安装python3(mac、使用brew
其中在最后一行/usr/local/Cellar/python/3.6.5这个便是使用brew安装python3的目录
py3study
2020/01/13
3.1K0
mac系统安装pycharm_mac下载python3
pycharm 是一款针对python开发的优秀的IDE, 以下是针对其在mac上的开发配置使用
全栈程序员站长
2022/09/28
5200
PyGraphviz 安装使用
PyGraphviz 对于图、点和边的设置,如颜色、样式、形状等属性,分别提供有 graph_attr、node_attr 和 edge_attr 属性设置函数。
zhipingChen
2018/09/13
2.2K0
PyGraphviz 安装使用
基础服务系列-Mac 安装Python3
前言 本例采用brew安装。未安装brew,参考Mac 安装Brew。 安装步骤 search brew search python3 ==> Formulae boost-python3 python3 ✔ python@3 ✔ python@3.8 If you meant "python3" specifically: It was migra
用户2146693
2021/12/28
3200
基础服务系列-Mac 安装Python3
mac安装虚拟环境python3
Virtaulenvwrapper是virtualenv的扩展包,可以更方便地新增,删除,复制,切换虚拟环境。
新人小试
2020/03/31
5980
python3搞系统里头之Mac篇
mac系统自带python2环境, 但现在一般使用的都是python3, 而且python2在2020.1.1以后不会再进行维护了, 所以安装个python3还是很有必要的
不止于python
2022/05/31
3140
python3搞系统里头之Mac篇
Mac下Python3安装及基于Idea开发
本篇文章带大家基于Mac OS操作系统,下载、安装Python环境,并基于Idea编写第一个Demo。
程序新视界
2023/04/09
1.1K0
Mac下Python3安装及基于Idea开发
MAC os :LightGBM Installation Error in MacOS with Anaconda Python3
macos 报错 OSError: dlopen(/Users/yanerrol/opt/anaconda3/envs/py366/lib/python3.6/site-packages/lightgbm/lib_lightgbm.so, 6): Library not loaded: /usr/local/opt/libomp/lib/libomp.dylib Referenced from: /Users/yanerrol/opt/anaconda3/envs/py366/lib/python3.6
AI拉呱
2021/03/04
1.5K0
linux下运行python3出现TypeError: a bytes-like object is required, not 'str'
 以上代码用python3运行后,出现TypeError: a bytes-like object is required, not 'str'
逆向小白
2018/09/12
13.8K0
linux下运行python3出现TypeError: a bytes-like object is required, not 'str'
mac os+selenium2+chrome驱动+python3
mac os 10.11.5 mac自带python2.7,自己下载了python3.5,pip list查看系统中的安装包,本人电脑中已经安装了pip和setuptools,若未安装,请先使用
全栈程序员站长
2022/09/07
4710
Mac上最简单配置python3开发环
网上有使用pyenv方式安装python3以实现与系统的python版本共存而不冲突,个人觉得其实没有必要,我们其实可以单独运行python3。 首先我们还是需要先安装python3,这里使用homebrew安装,方便快捷好管理,棒棒哒!
py3study
2020/01/05
1.3K0
Mac下安装Python3、pip、ipython的方法
1 安装Xcode 1.1 App Store 搜索Xcode 并安装 1.2 安装 Xcode command line tool 1.2.1 打开命令行terminal工具 control + space 输入terminal 回车 1.2.2 安装Xcode command line tool xcode-select --install 2 安装套件管理工具 Homebrew 2.1 安装 Homebrew /usr/bin/ruby -e "$(curl -fsSL https://raw
Python疯子
2018/09/06
1.7K0
python3在pycharm中为什么导入random模块不能用? TypeError: ‘module’ object is not callable…
新手学python求大神指导,也用sys导入了random.py的路径,仍然不行。
全栈程序员站长
2022/07/07
1.5K0
Django Models UML
Generate a class diagram based on GraphViz(pygraphviz) and django django-extensions
vanguard
2020/12/09
8260

相似问题

Python3,可除以3,typeError

12

Python3: TypeError:“TypeError”对象不可订阅

11

安装PyGraphviz时出错(Mac、Anaconda)

40

PySide & Python3: TypeError on QAction

10

Python3 Runserver TypeError {newbie}

15
添加站长 进交流群

领取专属 10元无门槛券

AI混元助手 在线答疑

扫码加入开发者社群
关注 腾讯云开发者公众号

洞察 腾讯核心技术

剖析业界实践案例

扫码关注腾讯云开发者公众号
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档