[CGPath/ CGBezierPath] 用Swift在UI上画出自己的图案

 

        //1
        UIGraphicsBeginImageContext(self.view.frame.size) 
        //2
        let path = UIBezierPath(ovalInRect: CGRect(x: 0, y: 0, width: 20, height: 20))
        path.appendPath(UIBezierPath(rect: CGRect(origin: CGPoint(x: 0, y: 0), size: CGSize(width: 100, height: 200))))
　　　　 
        path.moveToPoint(CGPoint(x: 10, y: 300))
        path.addLineToPoint(CGPoint(x: 200, y: 300))
　　　　 path.addArcWithCenter(CGPoint(x: 100, y: 100), radius: 20.0, startAngle: 0.0, endAngle: CGFloat(M_PI), clockwise: true) 

　　　　 //3
　　　　 path.applyTransform(CGAffineTransformMakeTranslation(60, 60))

        //4
        path.lineWidth = 2
        UIColor.blackColor().setStroke()
        path.stroke()
        
        //5
        let drawnImage = UIGraphicsGetImageFromCurrentImageContext()
        UIGraphicsEndImageContext()

        self.view.addSubview(UIImageView(image: drawnImage))
        

 

分步解释： 

1:　　要先初始化 环境 也就是先弄一块画布

2:　　画画：

　　　　　　(1)UIBezierPath() 使用其构造方法返回一个UIBezierPath实例

　　　　　　官方文档 

convenience init() // 实例化无图案

convenience init(rect rect: CGRect)

convenience init(ovalInRect rect: CGRect)　 // 矩形里画圆

convenience init(roundedRect rect: CGRect, cornerRadius cornerRadius: CGFloat)　//圆角矩形

 

convenience init(roundedRect rect: CGRect, byRoundingCorners corners: UIRectCorner, cornerRadii cornerRadii: CGSize) 

convenience init(CGPath CGPath: CGPath)   
    

 

　　　　　　(2) 使用 func appendPath(_ bezierPath: UIBezierPath) 添加 UIBezierPath 到已有实例上

　　　　　　(3) 画自定义形状

　　　　使用 moveToPoint(_ point: CGPoint)方法 相当于把画笔的放到某个点上

　　　　使用 addLineToPoint(_ point: CGPoint) 方法 画一条线 从之前的点也就是( moveToPoint() 设置的点)画到此函数参数传入的这个点 也就是给两点画一条线

           addArcWithCenter(center: CGPoint, radius: CGFloat, startAngle: CGFloat, endAngle: CGFloat, clockwise: Bool)

　　　　第一个参数为原点 第二角度是半径 第三个角度是起始角度 第四参数是终止角度 第五参数是顺时针否

 

3:       转换坐标系 

　　　　默认的坐标系为addView() 方法的所有者的坐标系 比如 某个imageView.addSubView()  的时候 这个坐标系的原点就是imageView的(0,0) 点

　　　　如果不加上这一步的 所有图案的原点都是(0,0) 也就是屏幕最左上角的位置 显示 

　　　　将默认的坐标转变 x y 为相对于之前的坐标的偏移量

　　　　相当于整张画布的位置都移了下

　　　　这样比较方便 画图的时候不用分个计算单个图形的之于上一个坐标系的位置

 

4: 　　设置画笔属性

　　　　(1) 使用 lineWidth 属性来设置 线条宽度

　　　　(2) 使用 UIColor.setStroke() 来设置画笔的颜色 // 这里看起来怪怪的 但是没错 就是通过UIColor类来实现的

　　　　(3) path.stroke() 来执行绘画

5:　　呈现到界面上

　　　　UIGraphicsGetImageFromCurrentImageContext() 从当前的环境获得图片

　　　　相当于之前在画布上画好了画 现在要显示到屏幕上 所以要调用个方法来获取图片

　　　　然后再通知系统一下 画布 用完了 可以扔掉了 也就是用 

　　　　UIGraphicsEndImageContext() 方法

　　　　再后来就是用ImageView显示这个图片 当然随便什么东西用到image都可以显示