利用Quartz2D画个小黄人

一、在XCODE项目中导入CoreGraphics.framework框架 

二、创建一个UIVIEW

HumanView.h文件

#import <UIKit/UIKit.h>

@interface HumanView : UIView

@end
三、在Main.storyboard  拖一个UIView覆盖在ViewController  设置UIView的custom class为 HumanView 

这里千万别设置成 ViewController 的class custom class了

四、开始画图

  HumanView.m

//
//  HumanView.m
//  小黄人
//
//  Created by MoPellet on 15/4/22.
//  Copyright (c) 2015年 MoPellt. All rights reserved.
//

#import "HumanView.h"
#define Radius 70
#define TopY 150
#define topCenterX  rect.size.width * 0.5
#define  Color(r,g,b)   [UIColor colorWithRed:(r)/255.0 green:(g)/255.0 blue:(b)/255.0 alpha:1.0]
@implementation HumanView

- (void)drawRect:(CGRect)rect {
    // Drawing code
    //1、上下文
    CGContextRef ctx = UIGraphicsGetCurrentContext();
    //2、身体
    drawBody(ctx,rect);
    
    //3,微笑/哭
    drawMouse(ctx,rect);
    
    //
    drawEyes(ctx,rect);
    //画头发
    
    // 4.头发
    drawHair(ctx,rect);
   
}

/**
 *  头发
 */
void drawHair(CGContextRef ctx, CGRect rect)
{
    [[UIColor blackColor] set];
    CGContextSetLineWidth(ctx, 1);
    CGContextMoveToPoint(ctx, topCenterX, TopY - Radius + 5);
    CGContextAddLineToPoint(ctx, topCenterX, topCenterX - Radius - 30);
    
    
    CGContextMoveToPoint(ctx, topCenterX - 10, TopY - Radius + 5);
    CGContextAddLineToPoint(ctx, topCenterX - 20, topCenterX - Radius - 30);
    
    
    CGContextMoveToPoint(ctx, topCenterX + 10, TopY - Radius + 5);
    CGContextAddLineToPoint(ctx, topCenterX + 20, topCenterX - Radius - 30);
    
    
    
    CGContextMoveToPoint(ctx, topCenterX - 20, TopY - Radius + 7);
    CGContextAddLineToPoint(ctx, topCenterX - 30, topCenterX - Radius - 30);
    
    CGContextMoveToPoint(ctx, topCenterX + 20, TopY - Radius + 7);
    CGContextAddLineToPoint(ctx, topCenterX + 30, topCenterX - Radius - 30);
    
    CGContextStrokePath(ctx);

}

/**
 *  眼睛
 */
void drawEyes(CGContextRef ctx, CGRect rect)
{
    //1、黑色绷带
    CGFloat startX= rect.size.width*0.5 - Radius-3;
    CGFloat startY = TopY;
    CGContextMoveToPoint(ctx, startX, startY);
    CGFloat endx  = startX +2*Radius+6;
    CGFloat endY = startY;
    CGContextAddLineToPoint(ctx, endx, endY);
    
    CGContextSetLineWidth(ctx, 15);
    [[UIColor blackColor] set];
    //绘制线条
    CGContextStrokePath(ctx);
    
    //2 最左外圈的镜框
    [Color(62, 61, 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);
    // 里面的白色框
    [[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 blackColor] set];
    CGFloat blackLeftEyeRadius =kuangRadius *0.3;
    CGFloat blackLeftEyeX = rect.size.width*0.5 - blackLeftEyeRadius*2;
    CGFloat blackLeftEyeY =kuangY;
    CGContextAddArc(ctx, blackLeftEyeX, blackLeftEyeY, blackLeftEyeRadius, 0, M_PI*2, 0);
    CGContextFillPath(ctx);
    
    //左眼珠里面的白点
    [[UIColor whiteColor] set];
    CGFloat blackLeftWhiteEyeRadius =blackLeftEyeRadius*0.2;
    CGFloat blackLeftWhiteX = blackLeftEyeX - blackLeftWhiteEyeRadius*2;
    CGFloat blackLeftWhitY =blackLeftEyeY -blackLeftWhiteEyeRadius*2;
    CGContextAddArc(ctx, blackLeftWhiteX, blackLeftWhitY, blackLeftWhiteEyeRadius, 0, M_PI*2, 0);
    CGContextFillPath(ctx);
    
    //2 最右外圈的镜框
    [Color(62, 61, 66) set];
    CGFloat rightKuangRadius = Radius*0.4;
    CGFloat rightKuangY = startY;
    CGFloat rightKuangX = rect.size.width*0.5 + kuangRadius;
    CGContextAddArc(ctx, rightKuangX, rightKuangY, rightKuangRadius, 0, M_PI*2, 0);
    CGContextFillPath(ctx);
    
    // 右边里面的白色框
    [[UIColor whiteColor] set];
    CGFloat rightWhiteRadius = kuangRadius *0.7;
    CGFloat rightWhiteX = rightKuangX;
    CGFloat rightWhiteY = rightKuangY;
    CGContextAddArc(ctx, rightWhiteX, rightWhiteY, rightWhiteRadius, 0, M_PI*2, 0);
    CGContextFillPath(ctx);
    
    //右眼珠
    [[UIColor blackColor] set];
    CGFloat blackRightEyeRadius =blackLeftEyeRadius;
    CGFloat blackRightEyeX = rect.size.width*0.5 +blackRightEyeRadius*2;
    CGFloat blackRightEyeY =kuangY;
    CGContextAddArc(ctx, blackRightEyeX, blackRightEyeY, blackRightEyeRadius, 0, M_PI*2, 0);
    CGContextFillPath(ctx);
    
    //右眼珠里面的白点
    [[UIColor whiteColor] set];
    CGFloat blackRightWhiteEyeRadius =blackLeftWhiteEyeRadius;
    CGFloat blackRightWhiteX = blackRightEyeX - blackRightWhiteEyeRadius*2;
    CGFloat blackRightWhitY =blackRightEyeY - blackRightWhiteEyeRadius*2;
    CGContextAddArc(ctx, blackRightWhiteX, blackRightWhitY, blackRightWhiteEyeRadius, 0, M_PI*2, 0);
    CGContextFillPath(ctx);
    
 
    
}


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

 //当前点
    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;
    CGContextAddArc(ctx, topX, TopY, Radius, 0, M_PI, 1);
    
    //、向下延伸
    CGFloat middlex= topX-Radius;
    CGFloat middleH = 100;//中间身体的高度
    CGFloat middleY = TopY+middleH;
    CGContextAddLineToPoint(ctx, middlex, middleY);
    
    //下半圆
    CGFloat bottomX=topX;
    CGFloat bottomY = middleY;
    CGFloat bottomRadius=Radius;
    CGContextAddArc(ctx, bottomX, bottomY, bottomRadius, M_PI, 0, 1);
    
    //合并路径
    CGContextClosePath(ctx);
    
    // [UIColor colorWithRed:252/255.0 green:218/255.0 blue:0.0 alpha:1.0] ;
    [Color(252, 218, 0) set];
    CGContextFillPath(ctx);
    
}


@end

五、看下效果图 



利用Quartz2D可以画很多自定义的VIEW。可以画文字图片 还可以设置背景图片 


背景图片代码  下面是打水印  平铺 

   UIImage *img = [UIImage imageNamed:@"temp"];
   // [img drawAtPoint:CGPointMake(50, 50)];
    //[img drawInRect:CGRectMake(0, 0, 150, 150)];
    [img drawAsPatternInRect:CGRectMake(0, 0, 200, 200)];

    NSString *str = @"版权所有" ;
    [str drawInRect:CGRectMake(0, 180, 100, 30) withAttributes:nil];







  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值