swift绘图简介

作者: brzhang | 来源:发表于2016-02-25 15:50 被阅读1477次

swift绘图简介
ISO学习之Swift 简单绘图板
Swift语法01
Swift<一>
《The Swift Programming Language》
Swift 入门学习
Swift 基本语法04-"switch"和
Swift 基本语法06-数组和字典
Swift 基本语法03-"if let"和
Swift 基本语法05-"String"

基本步骤就是：
1、获取当前绘图上下文
2、设置笔触颜色
3、设置笔触宽度
4、设置填充颜色
5、然后就开始绘制了（当然也是最复杂的地方了）

举个🌰


class CircleImage: UIView {

    override func drawRect(rect: CGRect) {
        // Drawing code
        super.drawRect(rect)

        let ctx = UIGraphicsGetCurrentContext()

        // 设置笔触颜色
        CGContextSetStrokeColorWithColor(ctx, UIColor.blackColor().CGColor)

        // 设置笔触宽度
        CGContextSetLineWidth(ctx, 2)

        // 设置填充色

        CGContextSetFillColorWithColor(ctx, UIColor.purpleColor().CGColor)

        CGContextSetLineJoin(ctx, .Round)

        CGContextSetLineCap(ctx, .Round)

        guard ctx != nil else {
            return
        }
//        drawLine(ctx!)
        drawCircle(ctx!)
    }

假设现在要绘制一个圆，下面我们来实现这个drawCirlce


func drawCircle(ctx: CGContextRef) {

        // 第一种方式 在点（100,100）出绘制一个半径为50的圆弧，角度从0到2pi，已顺时针方向，这个最容易理解，不解释。
        CGContextAddArc(ctx, 100, 100, 50, 0, CGFloat(M_PI), 1)
        CGContextFillPath(ctx)
        CGContextStrokePath(ctx) // 该代码无效了

        // 第二种方式 ，设置起始点在（100,100），然后在绘制4段弧，分别是上左，上右，下右，下左，凑在一起实际上就是一个圆。这个就一批人放弃了
        // 因此需要解释一下，我们只需要在UIKit坐标系中，（注意是UIKit坐标系）绘制出(100,100),(100,50),(150,20)这三个点，
        // 然后依次连接起来，显然就形成了一个举行的左上角形状了，
        // 然后想象一个半径为50的圆从矩形的中心慢慢移动到矩形的左上角，等到拟合停止，上左段圆弧就出来了。
        // 依次。。4段圆弧都出来就是一个圆了
        // 那么问题来了，如果半径改为25，会出现什么图形，自己脑补，不会脑补就修改跑一下代码好吗？
        CGContextMoveToPoint(ctx, 100, 100);
        CGContextAddArcToPoint(ctx, 100, 50, 150, 50, 50);
        CGContextAddArcToPoint(ctx, 200, 50, 200, 100, 50)
        CGContextAddArcToPoint(ctx, 200, 150, 150, 150, 50)
        CGContextAddArcToPoint(ctx, 100, 150, 100, 100, 50)
        CGContextStrokePath(ctx);
//        CGContextFillPath(ctx)

        // 第三种方式，放一个矩形区域在那里，你在里面塞一个最大的椭圆出来，当矩形宽高相等，显然，就是一个正圆了
        CGContextAddEllipseInRect(ctx, CGRectMake(200, 50 + 25, 50, 50))
        CGContextStrokePath(ctx);

        // 第四种方式，三阶贝塞尔曲线抱歉，我并没有画出一个圆来，数学能力有限，实际上 绘制出来的是一个椭圆而已
        CGContextMoveToPoint(ctx, 200, 200);
        CGContextAddCurveToPoint(ctx, 200, 100, 300, 100, 300, 200)
        CGContextAddCurveToPoint(ctx, 300, 300, 200, 300, 200, 200)
        CGContextStrokePath(ctx);

        // 第五种方式，二阶贝塞尔曲线，抱歉，我依然没有画出一个圆来，数学能力有限，实际上 绘制出来的是一个橄榄球
        CGContextMoveToPoint(ctx, 100, 300);
        CGContextAddQuadCurveToPoint(ctx, 200, 200, 300, 300)
        CGContextAddQuadCurveToPoint(ctx, 200, 400, 100, 300)
        CGContextStrokePath(ctx);

        // 大家喜欢吃🍦，我就用二阶贝塞尔曲线绘制一个🍦吧，虽然比较简单，但是好像而已蛮像的，
        CGContextMoveToPoint(ctx, 200, 400);
        CGContextAddQuadCurveToPoint(ctx, 250, 355, 300, 400)
        CGContextAddQuadCurveToPoint(ctx, 250, 755, 200, 400)
        CGContextStrokePath(ctx);
    }