zoukankan      html  css  js  c++  java
  • Swift

     

    使用UIBezierPath可以创建基于矢量的路径。使用此类可以定义简单的形状,如椭圆、矩形或者有多个直线和曲线段组成的形状等。
    主要用到的该类的属性包括

    moveToPoint:  //设置起始点
    addLineToPoint:  //从上一点连接一条线到本次指定的点
    closePath()  //闭合路径,把起始点和终点连接起来
    appendPath:  //多条路径合并
    removeAllPoints()  //删除所有点和线
    
    lineWidth  //路径宽度
    lineCapStyle  //端点样式(枚举)
    lineJoinStyle //连接点样式(枚举)
    
    //下面这几个属性要用在UIView中重写drawRect:方法中使用才有效,否则不会出现效果
    UIColor.redColor().setStroke() //设置路径颜色(不常用)
    stroke()渲染路径
    UIColor.redColor().setFill() //设置填充颜色(不常用)
    fill()渲染填充部分
    
    注:再次声明mainPath.stroke() 不是去连线的,而是在渲染路径

    画直线

    let mainPath = UIBezierPath()
    mainPath.moveToPoint(CGPointMake(40, 0)) //开始绘制,表示这个点是起点
    mainPath.addLineToPoint(CGPointMake(40, 100))
    mainPath.removeAllPoints() //删除所有点和线

    画圆弧(兼职画圆)

    /*
      参数解释:
      1.center: CGPoint  中心点坐标
      2.radius: CGFloat  半径
      3.startAngle: CGFloat 起始点所在弧度
      4.endAngle: CGFloat   结束点所在弧度
      5.clockwise: Bool     是否顺时针绘制
      7.画圆时,没有坐标这个概念,根据弧度来定位起始点和结束点位置。M_PI即是圆周率。画半圆即(0,M_PI),代表0到180度。全圆则是(0,M_PI*2),代表0到360度
    */
    let mainPath1 = UIBezierPath(arcCenter: CGPoint(x: 50, y: 50), radius: 50, startAngle: CGFloat(M_PI) * 0, endAngle: CGFloat(M_PI) * 2, clockwise: true)

    除了直接初始化一个圆弧,也可以增加一段圆弧路径(mainPath1.addCurveToPoint:)

    初始化时画圆

    let mainPath2 = UIBezierPath(ovalInRect: CGRect(origin: CGPoint(x: 50, y: 50), size: CGSize( 30, height: 30)))

    画赛贝尔曲线
    贝塞尔线是用于主要用于绘制路径及帧动画,我们简单的看下用法,不做深究
    详细资料:http://www.cnblogs.com/jay-dong/archive/2012/09/26/2704188.html

    //二阶贝塞尔曲线
    let mainPath3 = UIBezierPath()
    mainPath3.moveToPoint(CGPointMake(0, 0))
    mainPath3.addQuadCurveToPoint(CGPoint(x: 40, y: 0), controlPoint: CGPoint(x: 20, y:50))
    
    //三阶贝塞尔曲线
    let mainPath4 = UIBezierPath()
    mainPath4.moveToPoint(CGPointMake(0, 0))
    mainPath4.addCurveToPoint(CGPoint(x: 120, y: 0), controlPoint1: CGPoint(x: 40, y: 80), controlPoint2: CGPoint(x: 80, y: -80))

    三角形

    let mainPath5 = UIBezierPath()
    mainPath5.moveToPoint(CGPointMake(40, 0))
    mainPath5.addLineToPoint(CGPointMake(0, 40))
    mainPath5.addLineToPoint(CGPointMake(80, 40))
    mainPath5.closePath() //闭合路径,连线结束后会把起点和终点连起来

    矩形

    //实例化时建立矩形
    let mainPath6 = UIBezierPath(rect: CGRect(x: 0, y: 0,  40, height: 60))
    
    //实例化带圆角矩形
    let mainPath7 = UIBezierPath(roundedRect: CGRect(x: 0, y: 0,  40, height: 40), cornerRadius: 10)
    
    //实例化单角圆弧矩形
    let mainPath8 = UIBezierPath(roundedRect: CGRect(x: 0, y: 0,  40, height: 40), byRoundingCorners: UIRectCorner.TopLeft, cornerRadii: CGSize( 10, height: 10))
    
    //用路径方法画正方形
    let mainPath9 = UIBezierPath()
    mainPath9.moveToPoint(CGPointMake(0, 0))
    mainPath9.addLineToPoint(CGPointMake(80, 0))
    mainPath9.addLineToPoint(CGPointMake(80, 80))
    mainPath9.addLineToPoint(CGPointMake(0, 80))
    mainPath9.closePath() //和三角形一样需要闭合起点和终点
    UIColor.redColor().setFill() //设置填充色
    mainPath9.fill()

    //多条路径合并

    let mainPath10 = UIBezierPath()
    mainPath10.moveToPoint(CGPointMake(0, 0))
    mainPath10.addLineToPoint(CGPointMake(0, 80))
    
    let mainPath11 = UIBezierPath()
    mainPath11.moveToPoint(CGPointMake(0, 80))
    mainPath11.addLineToPoint(CGPointMake(40, 40))
    
    mainPath10.appendPath(mainPath11)//多条路径合并

    //CAShapeLayer,可以看做一个动画容器。把UIBezierPath绘制的路径放进去,点就会沿着这路径前进,加上颜色、动画等渲染后显示在界面上

    let shapeLayer = CAShapeLayer()
    shapeLayer.path = mainPath11.CGPath //存入UIBezierPath的路径
    shapeLayer.fillColor = UIColor.clearColor().CGColor //设置填充色
    shapeLayer.lineWidth = 2  //设置路径线的宽度
    shapeLayer.strokeColor = UIColor.grayColor().CGColor //路径颜色
    //如果想变为虚线设置这个属性,[实线宽度,虚线宽度],若两宽度相等可以简写为[宽度]
    shapeLayer.lineDashPattern = [2]
    //一般可以填"path"  "strokeStart" "strokeEnd"  具体还需研究
    let baseAnimation = CABasicAnimation(keyPath: "strokeEnd")
    baseAnimation.duration = 2   //持续时间
    baseAnimation.fromValue = 0  //开始值
    baseAnimation.toValue = 2    //结束值
    baseAnimation.repeatDuration = 5  //重复次数
    shapeLayer.addAnimation(baseAnimation, forKey: nil) //给ShapeLayer添
    //显示在界面上
    self.view.layer.addSublayer(shapeLayer)

     

        func creatUI(){        

            let border: CAShapeLayer = CAShapeLayer()

            //线的颜色

            border.strokeColor = UIColor.redColor().CGColor

            //设置填充色

            border.fillColor = UIColor.darkGrayColor().CGColor

            //虚线大小

            border.lineDashPattern = [3,3]

            //添加到layer

            self.lineView.layer.addSublayer(border)

            self.lineView.backgroundColor = UIColor.yellowColor()

            self.view.addSubview(self.lineView)

            self.lineView.frame = CGRectMake(100, 100, 100, 100)

            /*加圆角虚线

             roundedRect 这个虚线的frame

             cornerRadius 切圆的大小  如果为0 则是一条虚线

             */

            //添加路径1

    //        border.path = UIBezierPath(roundedRect: CGRectMake(100, 100, 100,100), cornerRadius: 10).CGPath

            /*给四个角的某一个角加圆角

             roundedRect 这个虚线的frame

             byRoundingCorners 那个角要变圆角

             cornerRadius 切圆的大小  如果为0 则是一条虚线

             */

            //添加路径2

    //        border.path = UIBezierPath(roundedRect: CGRectMake(0, 0, 100, 100), byRoundingCorners:(UIRectCorner.TopLeft), cornerRadii: CGSizeMake(30, 40)).CGPath

            //画一条虚线

            // 创建path

            let path = UIBezierPath()

            // 添加路径[1条点(100,100)到点(200,100)的线段]path

            path.moveToPoint(CGPointMake(100, 100))

            path.addLineToPoint(CGPointMake(200, 100))

            //添加路径3

            border.path = path.CGPath

            //mark-请顺序打开和注释添加路径123  以显示不同的效果

        }

     

    PS:苹果官网API - UIBezierPath

  • 相关阅读:
    Java for LeetCode 229 Majority Element II
    Java for LeetCode 228 Summary Ranges
    Java for LeetCode 227 Basic Calculator II
    Java for LintCode 颜色分类
    Java for LintCode 链表插入排序
    Java for LintCode 颠倒整数
    Java for LintCode 验证二叉查找树
    Java for LeetCode 226 Invert Binary Tree
    Java for LeetCode 225 Implement Stack using Queues
    Java for LeetCode 224 Basic Calculator
  • 原文地址:https://www.cnblogs.com/gongyuhonglou/p/10311542.html
Copyright © 2011-2022 走看看