在UIView上画圆圈、画直线的方法

最新推荐文章于 2021-11-01 10:58:43 发布

原创最新推荐文章于 2021-11-01 10:58:43 发布 · 3.4k 阅读

CC 4.0 BY-SA版权

本文介绍了一种在iOS应用中利用贝塞尔曲线和CAShapeLayer在UIView上绘制圆圈和直线的轻量级方法。通过此方法，可以在滑动手势时动态改变图形的大小，实现圆圈或直线随手势变化的效果。同时，展示了如何绘制一个圆圈，并通过手势动态调整其半径。此外，还提供了绘制直线的具体步骤和示例代码。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在UIView上画圆圈，画直线的方法很多，这里主要介绍一下用贝塞尔曲线(UIBezierPath)加CAShapeLayer的方法，这种方式比较轻量级，并且在滑动手势的时候可以空过改变它的半径，达到圆圈或者直线随手势变化的效果，经测试，这种方式很轻量，运行很流畅。

画圆圈：

CGPoint CGRectGetCenter(CGRect rect){
    return CGPointMake(CGRectGetMidX(rect),CGRectGetMidY(rect));
}

- (void)initView
{
	CAShapeLayer *circleLayer;
	// 触摸的图层
	circleLayer = [CAShapeLayer layer];
	circleLayer.strokeColor = [UIColor whiteColor].CGColor;
	circleLayer.lineWidth = 1.5;
	circleLayer.fillColor = nil;
	circleLayer.opacity = 0.8;
	circleLayer.contentsScale = [UIScreen mainScreen].scale;
	UIBezierPath *path = [UIBezierPath bezierPathWithArcCenter:CGRectGetCenter(_touchView.frame)
	                                                                radius:touchLastRadius
	                                                            startAngle:-0.5 * M_PI
	                                                              endAngle:1.5 * M_PI
	                                                             clockwise:YES];
          
	circleLayer.path = path.CGPath;
	[_touchView.layer addSublayer:circleLayer]; // 在touch上就可以展示这个圆圈了
}

// 另外可以随着手势来动态改变这个圆圈
-(void)MeTouchesMoved:(NSSet *)touches withEvent:(UIEvent *)event
{
    NSArray * touchesArr=[[event allTouches] allObjects];
    DEBUGG(@"手指个数%lu", (unsigned long)[touchesArr count]);
    if([touchesArr count] >= 2)
    {
        CGPoint p1 = [[touchesArr objectAtIndex:0] locationInView:self.imageView];
        CGPoint p2 = [[touchesArr objectAtIndex:1] locationInView:self.imageView];
        CGFloat radius = sqrt((p1.x-p2.x)*(p1.x-p2.x) + (p1.y-p2.y)*(p1.y-p2.y));
        CGFloat showRadius = radius/touchBeginRadius*touchLastRadius;  // 移动过程中圆圈半径的计算公式
        if(showRadius < BlurMinRadius || showRadius > ScreenWidth/2)  // 半径太小或者太大没有意义，就不让他继续缩小或者放大了
        {
            return;
        }
        touchLastRadius = showRadius; // 记录最新的展示半径

        UIBezierPath *path = [UIBezierPath bezierPathWithArcCenter:CGRectGetCenter(_touchView.frame)
                                                            radius:touchLastRadius
                                                        startAngle:-0.5 * M_PI
                                                          endAngle:1.5 * M_PI
                                                         clockwise:YES];
        touchBeginRadius = radius; // 记录这次的手指半径
        circleLayer.path = path.CGPath;
	}
}

示图：（代码里面只画了一个圆）

画直线：

- (void)initView
{
    CAShapeLayer *middleLine;
    CAShapeLayer *topLine;
    CAShapeLayer *bottomLine;
    middleLine = [CAShapeLayer layer];
    [middleLine setFillColor:[[UIColor clearColor] CGColor]];
    [middleLine setStrokeColor:[[UIColor whiteColor] CGColor]];
    middleLine.lineWidth = 2.0f ;
    
    topLine = [CAShapeLayer layer];
    [topLine setFillColor:[[UIColor clearColor] CGColor]];
    [topLine setStrokeColor:[[UIColor whiteColor] CGColor]];
    topLine.lineWidth = 1.0f ;
    
    bottomLine = [CAShapeLayer layer];
    [bottomLine setFillColor:[[UIColor clearColor] CGColor]];
    [bottomLine setStrokeColor:[[UIColor whiteColor] CGColor]];
    bottomLine.lineWidth = 1.0f ;
	
    // 画直线
	UIBezierPath *path = [[UIBezierPath alloc]init];

	[path moveToPoint:CGPointMake(0, ScreenWidth/2)];
	[path addLineToPoint:CGPointMake(ScreenWidth,ScreenWidth/2)];
	middleLine.path = path.CGPath;
	[_touchView.layer addSublayer:middleLine];

	[path moveToPoint:CGPointMake(0, ScreenWidth/2-100)];
	[path addLineToPoint:CGPointMake(ScreenWidth,ScreenWidth/2-100)];
	topLine.path = path.CGPath;
	[_touchView.layer addSublayer:topLine];

	[path moveToPoint:CGPointMake(0, ScreenWidth/2+100)];
	[path addLineToPoint:CGPointMake(ScreenWidth,ScreenWidth/2+100)];
	bottomLine.path = path.CGPath;
	[_touchView.layer addSublayer:bottomLine];
}

示图：