ios开发(二) UIBezierPath贝塞尔曲线常用方法 Swift

前言

在做的项目里要用到一个扫描识别框,查找资料后发现可以用贝塞尔曲线画一个,在此记录下常用方法,以供后面使用

正文

关于UIBezierPath的一些简单知识储备

UIBezuerPath封装在UIKit中,是Core Graphics框架关于path的一个封装,使用此类可以定义简单的形状,比如我们常用到,矩形,圆形,椭圆,弧,或者不规则的多边形。

CAShapeLayer属于QuartzCore框架,继承自CALayerCAShapeLayer是在坐标系内绘制贝塞尔曲线的,通过绘制贝塞尔曲线,设置shape(形状)的path(路径),从而绘制各种各样的图形以及不规则图形。因此,使用CAShapeLayer需要与UIBezierPath一起使用。
UIBezierPath类允许你在自定义的 View 中绘制和渲染由直线和曲线组成的路径.。你可以在初始化的时候直接为你的UIBezierPath指定一个几何图形。
作者:施忆
链接://www.greatytc.com/p/139f4fbe7b6b
來源:简书

在iOS开发中,处理的一个又一个UIView,实际是在操作CALayer。那么为什么不直接对CALayer进行编程呢?那是因为CALayer继承自NSObject,主要是用于图层的处理以及动画,而UIView继承自UIResponder,可以处理交互事件。
由此,可以认为UIView就是对CALayer的一个简单封装,图像绘制、动画都是CALayer做的。有过开发经验的朋友都知道,苹果在UIView里面封装了一套动画接口,但是利用这些接口,只是可以做一些简单、不灵活的动画。如果想在底层做一些改变,想实现一些特别的动画,这是学会掌控Core Animation以外,别无他选。(摘自网络)

  • 通俗点就是UIBezierPath用来指定绘制图形路径,而CAShapeLayer就是根据路径来绘图的。
  • 我们这次要做的一个简单的扫描识别框就是用此方法来画的,效果如图


    selectArea.png

UIBezierPath的基本使用

  • let path = UIBezierPath() 创建 UIBezierPath对象
  • path.move(to: CGPoint(x: , y: ))设置起始点
  • path.addLine(to: CGPoint(x: , y: ))向目标点画线
  • let shapeLayer = CAShapeLayer()
  • shapeLayer.path = path.cgPath 存入UIBezierPath的路径准备画图
  • 配置工作
shapeLayer.lineWidth = 2  //设置路径线的宽度
shapeLayer.strokeColor = UIColor.blue.cgColor //路径颜色
self.view.layer.addSublayer(shapeLayer)
  • 完整代码
 let path = UIBezierPath()
 path.move(to: CGPoint(x: WIDTH/2-100, y:100+20))
 path.addLine(to: CGPoint(x: WIDTH/2-100, y:100))
 path.addLine(to: CGPoint(x: WIDTH/2-40, y:100))
       
 path.move(to: CGPoint(x: WIDTH/2+40, y: 100))
 path.addLine(to: CGPoint(x: WIDTH/2+100, y: 100))
 path.addLine(to: CGPoint(x: WIDTH/2+100, y: 100+20))
        
 path.move(to: CGPoint(x: WIDTH/2+100, y: 100+30))
 path.addLine(to: CGPoint(x: WIDTH/2+100, y: 100+50))
 path.addLine(to: CGPoint(x:  WIDTH/2+40, y: 100+50))
        
 path.move(to: CGPoint(x:  WIDTH/2-40, y: 100+50))
 path.addLine(to: CGPoint(x:  WIDTH/2-100, y: 100+50))
 path.addLine(to: CGPoint(x: WIDTH/2-100, y: 100+30))
        
 path.move(to: CGPoint(x: WIDTH/2,y: 115))
 path.addLine(to: CGPoint(x: WIDTH/2,y: 135))
 path.move(to: CGPoint(x: WIDTH/2-10,y: 125))
 path.addLine(to: CGPoint(x: WIDTH/2+10,y: 125))
        
 let shapeLayer = CAShapeLayer()
 shapeLayer.path = path.cgPath //存入UIBezierPath的路径
 shapeLayer.fillColor = nil //设置填充色
 shapeLayer.lineWidth = 2  //设置路径线的宽度
 shapeLayer.strokeColor = UIColor.blue.cgColor //路径颜色
 self.view.layer.addSublayer(shapeLayer)
  • 注意
  1. 不要忘了将上述代码加入到viewDidLoad
override func viewDidLoad() {
        super.viewDidLoad()
        // 加入你的画图代码
 }
  1. 和上一篇文章中一样用以下代码获取设备屏幕尺寸
let WIDTH = UIScreen.main.bounds.size.width
let HEIGHT = UIScreen.main.bounds.size.height

总结

UIBezierPath还可以用来画很多图形,如果不是要定义特定功能的识别框比如扫描二维码,都可以用此方法来画图,可以省事一点,它还可以定义许多简单的形状,比如我们常用到,矩形,圆形,椭圆,弧,或者不规则的多边形。
感兴趣的可以参考这篇教程UIBezierPath教程

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 目录: 主要绘图框架介绍 CALayer 绘图 贝塞尔曲线-UIBezierPath CALayer子类 补充:i...
    Ryan___阅读 1,729评论 1 9
  • 在iOS中随处都可以看到绚丽的动画效果,实现这些动画的过程并不复杂,今天将带大家一窥ios动画全貌。在这里你可以看...
    每天刷两次牙阅读 8,608评论 6 30
  • 一事一日一生,简简单单六个字,却要用一生的时间去践行。 这六个字首先是对“反思”的思考:第一种,是对一件事的反思;...
    滋心润霖阅读 137评论 0 1