笔记： UI - 画图

来源：互联网发布：视频制作配音软件编辑：程序博客网时间：2024/05/16 12:27

（1）. CG画图

/** CG画图法 **/

- (void)drawRect:(CGRect)rect{

//准备画笔

CGContextRef pen =UIGraphicsGetCurrentContext();

//落笔（落笔点）参数：笔，x坐标，y坐标

CGContextMoveToPoint(pen,40, 40);

//画横线（给定右坐标，画笔自动连线）

CGContextAddLineToPoint(pen,80, 40);

//画左下划

CGContextAddLineToPoint(pen,60, 70);

//左上提（三角形）回到原点

CGContextAddLineToPoint(pen,40, 40);

//设置描边颜色 stroke

CGContextSetStrokeColorWithColor(pen, [UIColorblueColor].CGColor);

//开始描边

// CGContextStrokePath(pen);

//设置填充颜色 fill

CGContextSetFillColorWithColor(pen, [UIColororangeColor].CGColor);

//填充颜色

// CGContextFillPath(pen);

//此处注意：因为描边和填充不能同时上色，如果要同时使用，用下面方法

CGContextDrawPath(pen,kCGPathFillStroke);

}

（2）UIBeZierPath （贝塞尔路径封装类）

可以按照面向对象的方式绘制图形，如：圆形，扇形，椭圆，矩形，多边形等等。

1. 自定义图形

/** UIBezierPath贝塞尔路径封装类自定义图形 */

//画笔

UIBezierPath *path = [UIBezierPathbezierPath];

//移动画笔到起点

[path moveToPoint:CGPointMake(120,120)];

//画线

[path addLineToPoint:CGPointMake(200,120)];

[path addLineToPoint:CGPointMake(160,180)];

[path addLineToPoint:CGPointMake(120,120)];

//设置边线宽度

path.lineWidth =3;

//设置边线连接处样式 (kCGLineJoinBevel尖角)

path.lineJoinStyle =kCGLineJoinRound;

//设置线头样式（起点和终点连接处）

path.lineCapStyle =kCGLineCapButt;

//设置描边颜色

[[UIColorblueColor] setStroke];

//开始描边

[path stroke];

//设置填充颜色

[[UIColororangeColor] setFill];

//开始填充

[path fill];

2. /** UIBezierPath贝塞尔路径封装类系统图形 */

/* 圆形或扇形 π = 180度

参数：center:圆心 radiu:半径 startAngle:起始弧度 M_PI_2 即 π/2

endAngle:终止弧度 clockwise:是否顺时针 */

UIBezierPath *circlepath = [UIBezierPathbezierPathWithArcCenter:CGPointMake(160,200) radius:80startAngle:0 endAngle:M_PI *2 clockwise:YES];

[customRoundPath closePath];//停止画图

/* 矩形 */

UIBezierPath * rectpath = [UIBezierPathbezierPathWithRect:CGRectMake(150,40, 100,50)];

[customRoundPath closePath];//停止画图

/* 椭圆 */

UIBezierPath *ovalpath = [UIBezierPathbezierPathWithOvalInRect:CGRectMake(160,45, 80,40)];

[customRoundPath closePath];//停止画图

/* 圆角矩形 */

UIBezierPath *roundRectPath = [UIBezierPathbezierPathWithRoundedRect:CGRectMake(100,300, 100,70) cornerRadius:10];

[customRoundPath closePath];//停止画图

/* 定制圆角矩形 */

/* byRoundingCorners：修改那个角 cornerRadii:圆角弧度 */

UIBezierPath *customRoundPath = [UIBezierPathbezierPathWithRoundedRect:CGRectMake(10,300, 80,50) byRoundingCorners:UIRectCornerBottomLeft|UIRectCornerTopRight cornerRadii:CGSizeMake(20,8)];

[customRoundPath closePath];//停止画图

/* 贝塞尔曲线 - 牵引拉曲*/

/* 先画线，再设置牵引力 */

UIBezierPath *curvePath = [UIBezierPathbezierPath]; //画笔

[curvePath moveToPoint:CGPointMake(10,20)]; //落笔点

//贝塞尔曲线参数1：线的重点 point1：牵引中心1

[curvePath addCurveToPoint:CGPointMake(80,200) controlPoint1:CGPointMake(70,40) controlPoint2:CGPointMake(0,160)];

[customRoundPath closePath];//停止画图

//设置描边颜色

[[UIColorblueColor] setStroke];

//开始描边

[path stroke];

//设置填充颜色

[[UIColororangeColor] setFill];

//开始填充

[path fill];

（3）自由画线

1. 在MyView.h 文件中声明画笔属性

@property(nonatomic)UIBezierPath *path;

2. 首先首先懒加载画笔path

-(UIBezierPath *)path{

if (_path ==nil) {

//获取画笔

_path = [UIBezierPathbezierPath];

}

return_path;

}

3.重写drawRect方法，设置画笔颜色，线宽（注意这一步很重要）

- (void)drawRect:(CGRect)rect{

//设置描边颜色

[[UIColorblueColor] setStroke];

//开始描边

[self.pathstroke];

//设置边线宽度

self.path.lineWidth =3;

}

4. 监听手指触屏事件，获取起点

- (void)touchesBegan:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event{

//获取手指 Touch

UITouch *touch = touches.anyObject;

//获取手指位置

CGPoint p = [touchlocationInView:self];

//把画笔移动到这个位置

[self.pathmoveToPoint:p];

}

5. 监听手指移动事件，开始连线

- (void)touchesMoved:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event{

//获取手指 Touch

UITouch *touch = touches.anyObject;

//获取手指位置

CGPoint p = [touchlocationInView:self];

//连线

[self.pathaddLineToPoint:p];

//刷新页面，调用setNeedsDisplay方法（该方法自动调用drawRect方法）

[selfsetNeedsDisplay];

}

（4）绘制文字

（5）绘制图片 TRImageView

0 0