iOS绘制视图

1. iOS上主要的绘图技术有：UIKit、Quartz 2D、Core Animation和OpenGL ES。
2. UIView绘制方法主要是drawRect:方法，还有setNeedsDisplay和setNeedsDisplayInRect:方法。
3. 触发视图重绘的动作有以下几种：
   (1)当遮挡视图的其他视图被移动或删除操作时。
   (2)将视图的hidden属性声明设置为false，使其从隐藏状态变为可见。
   (3)将视图滚出屏幕，然后再重新回到屏幕上。
   (4)显示调用视图的setNeedsDisplay或者setNeedsDisplayInRect:方法。

UIKit填充、描边、绘制图形、绘制文本：

override func draw(_ rect: CGRect) {        // 填充矩形        UIColor.brown.setFill()        UIRectFill(rect)        // 描边        UIColor.white.setStroke()        let frame = CGRect.init(x: 20, y: 30, width: 100, height: 300)        UIRectFrame(frame)        // 绘制图像        let imagePath = Bundle.main.path(forResource: "zcm", ofType: "png")        let myImageObj: UIImage = UIImage.init(contentsOfFile: imagePath!)!        myImageObj.draw(in: CGRect.init(x: 150, y: 30, width: 100, height: 100))        myImageObj.draw(in: CGRect.init(x: 250, y: 30, width: 100, height: 100))        myImageObj.draw(in: CGRect.init(x: 350, y: 30, width: 100, height: 100))        // 绘制文本        let title: NSString = "招财猫"        let font: UIFont = UIFont.systemFont(ofSize: 34)        let attr = [NSFontAttributeName: font]        title.draw(at: CGPoint.init(x: 150, y: 150), withAttributes: attr)    }

显示结果如下：

Quartz路径：

override func draw(_ rect: CGRect) {        // 获得访问图形上下文对象        let context = UIGraphicsGetCurrentContext()        // --- 填充三角形        // 1. 移动某个点        context?.move(to: CGPoint.init(x: 75, y: 200))        // 2. 添加路径        context?.addLine(to: CGPoint.init(x: 10, y: 150))        context?.addLine(to: CGPoint.init(x: 160, y: 150))        // 3. 关闭路径        context?.closePath()        // 设置黑色描边参数        UIColor.black.setStroke()        // 设置红色填充参数        UIColor.green.setFill()        context?.saveGState()        UIColor.red.setFill()        // 将之前保留的内容恢复出来        context?.restoreGState()        // 绘制路径        context?.drawPath(using: CGPathDrawingMode.fillStroke)        // --- 经典花瓶侧面（贝塞尔曲线）        /**        context?.addCurve(to: ,// 结束点坐标,             control1: , // 第一控制点坐标            control2: ) // 第二控制的坐标        */        context?.move(to: CGPoint.init(x: 333, y: 0))        context?.addCurve(to: CGPoint.init(x: 330, y: 26), control1: CGPoint.init(x: 333, y: 0), control2: CGPoint.init(x: 332, y: 26))        context?.addCurve(to: CGPoint.init(x: 299, y: 17), control1: CGPoint.init(x: 330, y: 26), control2: CGPoint.init(x: 299, y: 20))        context?.addLine(to: CGPoint.init(x: 296, y: 17))        context?.addCurve(to: CGPoint.init(x: 291, y: 19), control1: CGPoint.init(x: 296, y: 17), control2: CGPoint.init(x: 296, y: 19))        context?.addLine(to: CGPoint.init(x: 250, y: 19))        context?.addCurve(to: CGPoint.init(x: 238, y: 19), control1: CGPoint.init(x: 250, y: 19), control2: CGPoint.init(x: 241, y: 24))        context?.addCurve(to: CGPoint.init(x: 227, y: 24), control1: CGPoint.init(x: 236, y: 20), control2: CGPoint.init(x: 234, y: 24))        context?.addCurve(to: CGPoint.init(x: 216, y: 19), control1: CGPoint.init(x: 220, y: 24), control2: CGPoint.init(x: 217, y: 19))        context?.addCurve(to: CGPoint.init(x: 207, y: 20), control1: CGPoint.init(x: 214, y: 20), control2: CGPoint.init(x: 211, y: 22))        context?.addCurve(to: CGPoint.init(x: 182, y: 21), control1: CGPoint.init(x: 207, y: 20), control2: CGPoint.init(x: 187, y: 20))        context?.addLine(to: CGPoint.init(x: 100, y: 45))        context?.addLine(to: CGPoint.init(x: 97, y: 46))        context?.addCurve(to: CGPoint.init(x: 64, y: 72), control1: CGPoint.init(x: 97, y: 46), control2: CGPoint.init(x: 86, y: 71))        context?.addCurve(to: CGPoint.init(x: 23, y: 48), control1: CGPoint.init(x: 42, y: 74), control2: CGPoint.init(x: 26, y: 56))        context?.addLine(to: CGPoint.init(x: 9, y: 47))        context?.addCurve(to: CGPoint.init(x: 0, y: 0), control1: CGPoint.init(x: 9, y: 47), control2: CGPoint.init(x: 0, y: 31))        context?.strokePath()    }

显示结果：

Quartz坐标系相关：

override func draw(_ rect: CGRect) {        /*        // Quartz 2D坐标系，原点在左下角，x轴方向向右为正方向，y轴方向向上为正方向        //        // UIKit坐标系，原点在左上角，x轴方向向右为正方向，y轴方向向下为正方向        //        */        let path = Bundle.main.path(forResource: "zcm", ofType: "png")        let img: UIImage = UIImage.init(contentsOfFile: path!)!        let image: CGImage = img.cgImage!        let context = UIGraphicsGetCurrentContext()        context?.saveGState()        let touchRect = CGRect.init(x: 0, y: 0, width: img.size.width/2, height: img.size.height/2)        context?.draw(image, in: touchRect)        context?.restoreGState()        // 正常图片显示        context?.saveGState()        context?.translateBy(x: 0, y: img.size.height)        context?.scaleBy(x: 1, y: -1)        context?.draw(image, in: touchRect)        context?.restoreGState()    }

显示结果：