iOS开发 - Quartz2D绘制小黄人

Quartz2D绘制小黄人

- (void)drawRect:(CGRect)rect
{
    // 1.上下文
    CGContextRef ctx = UIGraphicsGetCurrentContext();

    // 2.身体
    drawBody(ctx, rect);

    // 3.嘴(微笑)
    drawMouth(ctx, rect);

    // 4.画眼睛
    drawEyes(ctx, rect);

}

/**
 *  眼睛
 */
void drawEyes(CGContextRef ctx, CGRect rect)
{
    // 1.黑色绑带
    CGFloat startX = rect.size.width * 0.5 - Radius;
    CGFloat startY = TopY;
    CGContextMoveToPoint(ctx, startX, startY);
    CGFloat endX = startX + 2 * Radius;
    CGFloat endY = startY;
    CGContextAddLineToPoint(ctx, endX, endY);
    CGContextSetLineWidth(ctx, 15);
    [[UIColor blackColor] set];
    // 绘制线条
    CGContextStrokePath(ctx);

    // 2.最外圈的镜框
    [ZLColor(61, 62, 66) set];
    CGFloat kuangRadius = Radius * 0.4;
    CGFloat kuangY = startY;
    CGFloat kuangX = rect.size.width * 0.5 - kuangRadius;
    CGContextAddArc(ctx, kuangX, kuangY, kuangRadius, 0, M_PI * 2, 0);
    CGContextFillPath(ctx);

    [ZLColor(61, 62, 66) set];
    CGFloat kuangRadius1 = Radius * 0.4;
    CGFloat kuangY1 = startY;
    CGFloat kuangX1 = rect.size.width * 0.5 + kuangRadius;
    CGContextAddArc(ctx, kuangX1, kuangY1, kuangRadius1, 0, M_PI * 2, 0);
    CGContextFillPath(ctx);

    // 3.里面的白色框
    [[UIColor whiteColor] set];
    CGFloat whiteRadius = kuangRadius * 0.7;
    CGFloat whiteX = kuangX;
    CGFloat whiteY = kuangY;
    CGContextAddArc(ctx, whiteX, whiteY, whiteRadius, 0, M_PI * 2, 0);
    CGContextFillPath(ctx);

    [[UIColor whiteColor] set];
    CGFloat whiteRadius1 = kuangRadius * 0.7;
    CGFloat whiteX1 = kuangX+2*kuangRadius;
    CGFloat whiteY1 = kuangY;
    CGContextAddArc(ctx, whiteX1, whiteY1, whiteRadius1, 0, M_PI * 2, 0);
    CGContextFillPath(ctx);

    //4.棕色眼球
    [ZLColor(76, 23, 13) set];
    CGFloat brownRadius = kuangRadius * 0.4;
    CGFloat brownX = kuangX+2*kuangRadius-6;
    CGFloat brownY = kuangY;
    CGContextAddArc(ctx, brownX, brownY, brownRadius, 0, M_PI*2 , 0);
    CGContextFillPath(ctx);

    [ZLColor(76, 23, 13) set];
    CGFloat brownRadius1 = kuangRadius * 0.4;
    CGFloat brownX1 = kuangX+6;
    CGFloat brownY1 = kuangY;
    CGContextAddArc(ctx, brownX1, brownY1, brownRadius1, 0, M_PI*2, 0);
    CGContextFillPath(ctx);

    //5.黑色瞳孔
    [[UIColor blackColor] set];
    CGFloat blackRadius = kuangRadius * 0.2;
    CGFloat blackX = kuangX+2*kuangRadius-6;
    CGFloat blackY = kuangY;
    CGContextAddArc(ctx, blackX, blackY, blackRadius, 0, M_PI*2 , 0);
    CGContextFillPath(ctx);

    [[UIColor blackColor] set];
    CGFloat blackRadius1 = kuangRadius * 0.2;
    CGFloat blackX1 = kuangX+6;
    CGFloat blackY1 = kuangY;
    CGContextAddArc(ctx, blackX1, blackY1, blackRadius1, 0, M_PI*2, 0);
    CGContextFillPath(ctx);

    //6.白色反光
    [[UIColor whiteColor] set];
    CGFloat lightRadius = kuangRadius * 0.1;
    CGFloat lightX = kuangX+2*kuangRadius;
    CGFloat lightY = kuangY;
    CGContextAddArc(ctx, lightX, lightY, lightRadius, 0, M_PI*2 , 0);
    CGContextFillPath(ctx);


    [[UIColor whiteColor] set];
    CGFloat lightRadius1 = kuangRadius * 0.1;
    CGFloat lightX1 = kuangX+2*kuangRadius-45;
    CGFloat lightY1 = kuangY;
    CGContextAddArc(ctx, lightX1, lightY1, lightRadius1, 0, M_PI*2 , 0);
    CGContextFillPath(ctx);




}

/**
 *  画嘴
 */
void drawMouth(CGContextRef ctx, CGRect rect)
{
    // 中间的控制点
    CGFloat controlX = rect.size.width * 0.5;
    CGFloat controlY = rect.size.height * 0.4;

    // 当前点
    CGFloat marginX = 20;
    CGFloat marginY = 10;
    CGFloat currentX = controlX - marginX;
    CGFloat currentY = controlY - marginY;
    CGContextMoveToPoint(ctx, currentX, currentY);

    // 结束点
    CGFloat endX = controlX + marginX;
    CGFloat endY = currentY;

    // 贝塞尔曲线
    CGContextAddQuadCurveToPoint(ctx, controlX, controlY, endX, endY);

    // 设置颜色
    [[UIColor blackColor] set];

    // 渲染
    CGContextStrokePath(ctx);
}

/**
 *  画身体
 */
void drawBody(CGContextRef ctx, CGRect rect)
{
    // 上半圆
    CGFloat topX = rect.size.width * 0.5;
    CGFloat topY = TopY;
    CGFloat topRadius = Radius;
    CGContextAddArc(ctx, topX, topY, topRadius, 0, M_PI, 1);

    // 向下延伸
    CGFloat middleX = topX - topRadius;
    CGFloat middleH = 100; // 中间身体的高度
    CGFloat middleY = topY + middleH;
    CGContextAddLineToPoint(ctx, middleX, middleY);

    // 下半圆
    CGFloat bottomX = topX;
    CGFloat bottomY = middleY;
    CGFloat bottomRadius = topRadius;
    CGContextAddArc(ctx, bottomX, bottomY, bottomRadius, M_PI, 0, 1);

    // 合并路径
    CGContextClosePath(ctx);

    // 设置颜色
    [ZLColor(252, 218, 0) set];

    // 利用填充方式画出之前的路径
    CGContextFillPath(ctx);
}

效果图