• IOS Animation-贝塞尔曲线与Layer简单篇(一)


    IOS Animation-贝塞尔曲线与Layer简单篇

    swift篇

    1.介绍

    贝塞尔曲线:

      贝塞尔曲线是计算机图形图像造型的基本工具,是图形造型运用得最多的基本线条之一。它通过控制曲线上的四个点(起始点、终止点以及两个相互分离的中间点)来创造、编辑图形。

      一般的矢量图形软件通过它来精确画出曲线,贝兹曲线由线段与节点组成,节点是可拖动的支点,线段像可伸缩的皮筋,我们在绘图工具上看到的钢笔工具就是来做这种矢量曲线的。

    Layer:

      CALayer(层)是屏幕上的一个矩形区域,在每一个UIView中都包含一个根CALayer,在UIView上的所有视觉效果都是在这个Layer上进行的。Layer有很多种,最常用也是最基本的是CALayer。

      Layer是处理‘绘制’的事情,把它想象成一个画布。View相当于ps中的图片,layer相当于图片view的图层。view是通过layer画出的,view是layer的代理。

    2.简单代码编写

    1)简单在view上加一层layer。

    1     func addSubLayer() {
    2         let layer = CAShapeLayer();//定义一个layer
    3         layer.frame = CGRectMake(100, 100, 150, 150);//坐标
    4         layer.backgroundColor = UIColor.blueColor().CGColor;//CG颜色
    5         self.view.layer.addSublayer(layer);//在view上添加layer
    6     }

    2)通过赛贝尔曲线,画一个矩形在layer上面

    1     func addBezierWithRect() {
    2         let layer = CAShapeLayer() //新建layer
    3         let path = UIBezierPath.init(rect: CGRectMake(50, 80, 200, 100)) //初始化bezier曲线--矩形
    4         layer.path = path.CGPath //在layer上赋予曲线的路径
    5         layer.fillColor = UIColor.clearColor().CGColor //layer的填充颜色
    6         layer.strokeColor = UIColor.blueColor().CGColor //layer的边框颜色     
    7         self.view.layer.addSublayer(layer) //添加layer
    8     }

    3)画一个圆角的矩形

     1     func addBezierWithRoundRect() {
     2         let layer = CAShapeLayer()
     3         let path = UIBezierPath.init(roundedRect: CGRectMake(100, 200, 150, 100), cornerRadius: 20) //定义圆角矩形
     4         layer.path = path.CGPath
     5         layer.fillColor = UIColor.clearColor().CGColor
     6         layer.strokeColor = UIColor.redColor().CGColor
     7         self.view.layer.addSublayer(layer)         
     8     }

    4)画一个圆形

    1     func addBezierWithCircular() {
    2         let layer = CAShapeLayer()
    3         let circularPath = UIBezierPath(arcCenter: CGPoint.init(x: 200,y: 300), radius: 50, startAngle: 0, endAngle: CGFloat(2*M_PI), clockwise: true)//定义一个圆形
    4         layer.path = circularPath.CGPath
    5         layer.fillColor = UIColor.clearColor().CGColor
    6         layer.strokeColor = UIColor.greenColor().CGColor
    7         
    8         self.view.layer.addSublayer(layer)
    9     }

    5)画一条曲线

     1     func addBezierWithCurve() {
     2         let startPoint = CGPoint(x: 20, y: 200)//曲线开始位置
     3         let endPoint = CGPoint(x: 200, y: 200)//曲线终点位置
     4         let controlPoint = CGPoint(x: 50, y: 300)//曲线中间位置
     5         
     6         let layer = CAShapeLayer()
     7         let quxianPath = UIBezierPath()
     8         quxianPath.moveToPoint(startPoint) //首先移动到初始点
     9         quxianPath.addQuadCurveToPoint(endPoint, controlPoint: controlPoint) //定义终点点和中间点
    10         layer.path = quxianPath.CGPath
    11         layer.fillColor = UIColor.clearColor().CGColor
    12         layer.strokeColor = UIColor.greenColor().CGColor
    13         self.view.layer.addSublayer(layer)
    14     }

    如果想结合动画来用,可以看文章:CAShapeLayer、UIBezierPath与Animation的结合

    可以关注本人的公众号,多年经验的原创文章共享给大家。

  • 相关阅读:
    将SL4 程序移植到WP7(附Teched2010“.NET研究”真机图) 狼人:
    WP7有约(二“.NET研究”):课后作业 狼人:
    Android平台SQLite快速入门“.NET研究”实践 狼人:
    移动Web界面构建最佳“.NET研究”实践 狼人:
    Androi“.NET研究”d如何在三年时间里征服移动世界的 狼人:
    详解如何让Android UI“.NET研究”设计性能更高效 狼人:
    Android 2.3预计下周发布 十大惊“.NET研究”喜不容错过 狼人:
    Android的移动存储解决方案“.NET研究”之SharedPreferences 狼人:
    C++开发者快速学习ObjectiveC语言核“.NET研究”心语法 狼人:
    图像像素OpenCV4Android一点关于图像的基础
  • 原文地址:https://www.cnblogs.com/alunchen/p/5297488.html
Copyright © 2020-2023  润新知