ios – 如何准确地在图像模式上绘制线条

我有一个UI ImageView.在里面,我正在画一条机智用户触摸事件.问题是可以在UIImageview中的任何地方绘制一条线,但我喜欢仅使用图像模式绘制线条.

例如,看看这张图片.我只需要在图像模式上画线.

这是我的代码

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

    UITouch *touch = [[event alltouches] anyObject];
    touchPoint = [touch locationInView:self.imgColor];
    UIBezierPath *path = [UIBezierPath bezierPath];
    [path movetoPoint:CGPointMake(touchPoint.x,touchPoint.y)];
    [path addLinetoPoint:CGPointMake(startingPoint.x,startingPoint.y)];
    startingPoint=touchPoint;
    CAShapeLayer *shapeLayer = [CAShapeLayer layer];
    shapeLayer.path = [path CGPath];
    shapeLayer.strokeColor = [[UIColor blueColor] CGColor];
    shapeLayer.linewidth = 3.0;
    shapeLayer.fillColor = [[UIColor redColor] CGColor];
    [self.imgColor.layer addSublayer:shapeLayer];
    [arrLayer addobject:shapeLayer];
    NSLog(@"Touch moving point =x : %f Touch moving point =y : %f",touchPoint.x,touchPoint.y);



}

我希望有人解决我的问题.

解决方法

你可以试试这种方式.

假设你有一个名为maskPath的bezierPath,在我的例子中是textPath,它用于掩盖imageView.

我正在使用一个简单的maskView,它在imageView上绘制字母Q.

添加maskPath :(向imageView添加一个简单的Q形掩码)

-(void)applyMask{

//// Text Drawing
textPath = [UIBezierPath bezierPath];
[textPath movetoPoint: CGPointMake(181,179.8)];
[textPath addLinetoPoint: CGPointMake(166,197.2)];
[textPath addLinetoPoint: CGPointMake(189.7,216.1)];
[textPath addCurvetoPoint: CGPointMake(160,222.1) controlPoint1: CGPointMake(180.1,220.1) controlPoint2: CGPointMake(170.2,222.1)];
[textPath addCurvetoPoint: CGPointMake(126.4,214.45) controlPoint1: CGPointMake(147,222.1) controlPoint2: CGPointMake(135.8,219.55)];
[textPath addCurvetoPoint: CGPointMake(103.3,194.2) controlPoint1: CGPointMake(117,209.35) controlPoint2: CGPointMake(109.3,202.6)];
[textPath addCurvetoPoint: CGPointMake(90.1,165.85) controlPoint1: CGPointMake(97.3,185.8) controlPoint2: CGPointMake(92.9,176.35)];
[textPath addCurvetoPoint: CGPointMake(85.9,133.9) controlPoint1: CGPointMake(87.3,155.35) controlPoint2: CGPointMake(85.9,144.7)];
[textPath addCurvetoPoint: CGPointMake(90.1,101.95) controlPoint1: CGPointMake(85.9,123.1) controlPoint2: CGPointMake(87.3,112.45)];
[textPath addCurvetoPoint: CGPointMake(103.3,73.6) controlPoint1: CGPointMake(92.9,91.45) controlPoint2: CGPointMake(97.3,82)];
[textPath addCurvetoPoint: CGPointMake(126.4,53.35) controlPoint1: CGPointMake(109.3,65.2) controlPoint2: CGPointMake(117,58.45)];
[textPath addCurvetoPoint: CGPointMake(160,45.7) controlPoint1: CGPointMake(135.8,48.25) controlPoint2: CGPointMake(147,45.7)];
[textPath addCurvetoPoint: CGPointMake(193.6,53.35) controlPoint1: CGPointMake(173,45.7) controlPoint2: CGPointMake(184.2,48.25)];
[textPath addCurvetoPoint: CGPointMake(216.7,73.6) controlPoint1: CGPointMake(203,58.45) controlPoint2: CGPointMake(210.7,65.2)];
[textPath addCurvetoPoint: CGPointMake(229.9,101.95) controlPoint1: CGPointMake(222.7,82) controlPoint2: CGPointMake(227.1,91.45)];
[textPath addCurvetoPoint: CGPointMake(234.1,133.9) controlPoint1: CGPointMake(232.7,112.45) controlPoint2: CGPointMake(234.1,123.1)];
[textPath addCurvetoPoint: CGPointMake(228.1,171.85) controlPoint1: CGPointMake(234.1,147.1) controlPoint2: CGPointMake(232.1,159.75)];
[textPath addCurvetoPoint: CGPointMake(209.5,202.6) controlPoint1: CGPointMake(224.1,183.95) controlPoint2: CGPointMake(217.9,194.2)];
[textPath addLinetoPoint: CGPointMake(181,179.8)];
[textPath closePath];
[textPath movetoPoint: CGPointMake(244,259.3)];
[textPath addLinetoPoint: CGPointMake(258.4,241.3)];
[textPath addLinetoPoint: CGPointMake(230.2,219.1)];
[textPath addCurvetoPoint: CGPointMake(254.5,180.7) controlPoint1: CGPointMake(241,208.3) controlPoint2: CGPointMake(249.1,195.5)];
[textPath addCurvetoPoint: CGPointMake(262.6,133.9) controlPoint1: CGPointMake(259.9,165.9) controlPoint2: CGPointMake(262.6,150.3)];
[textPath addCurvetoPoint: CGPointMake(256.15,91.75) controlPoint1: CGPointMake(262.6,119.3) controlPoint2: CGPointMake(260.45,105.25)];
[textPath addCurvetoPoint: CGPointMake(236.8,55.9) controlPoint1: CGPointMake(251.85,78.25) controlPoint2: CGPointMake(245.4,66.3)];
[textPath addCurvetoPoint: CGPointMake(204.7,31) controlPoint1: CGPointMake(228.2,45.5) controlPoint2: CGPointMake(217.5,37.2)];
[textPath addCurvetoPoint: CGPointMake(160,21.7) controlPoint1: CGPointMake(191.9,24.8) controlPoint2: CGPointMake(177,21.7)];
[textPath addCurvetoPoint: CGPointMake(115.3,31) controlPoint1: CGPointMake(143,21.7) controlPoint2: CGPointMake(128.1,24.8)];
[textPath addCurvetoPoint: CGPointMake(83.2,55.9) controlPoint1: CGPointMake(102.5,37.2) controlPoint2: CGPointMake(91.8,45.5)];
[textPath addCurvetoPoint: CGPointMake(63.85,91.75) controlPoint1: CGPointMake(74.6,66.3) controlPoint2: CGPointMake(68.15,78.25)];
[textPath addCurvetoPoint: CGPointMake(57.4,133.9) controlPoint1: CGPointMake(59.55,105.25) controlPoint2: CGPointMake(57.4,119.3)];
[textPath addCurvetoPoint: CGPointMake(63.85,176.05) controlPoint1: CGPointMake(57.4,148.5) controlPoint2: CGPointMake(59.55,162.55)];
[textPath addCurvetoPoint: CGPointMake(83.2,211.9) controlPoint1: CGPointMake(68.15,189.55) controlPoint2: CGPointMake(74.6,201.5)];
[textPath addCurvetoPoint: CGPointMake(115.3,236.65) controlPoint1: CGPointMake(91.8,222.3) controlPoint2: CGPointMake(102.5,230.55)];
[textPath addCurvetoPoint: CGPointMake(160,245.8) controlPoint1: CGPointMake(128.1,242.75) controlPoint2: CGPointMake(143,245.8)];
[textPath addCurvetoPoint: CGPointMake(211.3,233.2) controlPoint1: CGPointMake(179.8,245.8) controlPoint2: CGPointMake(196.9,241.6)];
[textPath addLinetoPoint: CGPointMake(244,259.3)];
[textPath closePath];
[UIColor.blackColor setFill];
[textPath fill];

maskLayer = [CAShapeLayer layer];
maskLayer.path = [textPath CGPath];
maskLayer.strokeColor = [[UIColor blackColor] CGColor];
maskLayer.linewidth = 3.0;
maskLayer.fillColor = [[UIColor redColor] CGColor];
[self.imgView.layer addSublayer:maskLayer];

}

你已经有了这个方法

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

        UITouch *touch = [[event alltouches] anyObject];
        CGPoint touchPoint = [touch locationInView:self.imgView];

        if ([textPath containsPoint:touchPoint]) {
            path=nil; //this is not need,unless u want to start a new path everytime this condition executes.
            path = [UIBezierPath bezierPath];
            [path movetoPoint:CGPointMake(touchPoint.x,touchPoint.y)];
            [path addLinetoPoint: CGPointMake(_startingPoint.x,_startingPoint.y)];
            _startingPoint=touchPoint;

        drawLayer = [CAShapeLayer layer];
        drawLayer.path = [path CGPath];
        drawLayer.strokeColor = [[UIColor blackColor] CGColor];
        drawLayer.linewidth = 3.0;
        drawLayer.fillColor = [[UIColor redColor] CGColor];
        [self.imgView.layer addSublayer:drawLayer];
        NSLog(@"Touch moving point =x : %f Touch moving point =y : %f",touchPoint.y);

        }
}

您现在可以验证,如果触摸点位于textPath中,则它是bezierPath.
如果touchPoint在textPath中,则允许绘制,否则不绘制.

结果将是这样的:

如您所见,此代码将允许您仅在屏蔽路径中绘制.
如果你想在textPath之外绘制,那么你可以简单地做:

if (![textPath containsPoint:touchPoint]) {
 path=nil; //this is not need,unless u want to start a new path everytime this condition executes.
 path = [UIBezierPath bezierPath];
[path movetoPoint:CGPointMake(touchPoint.x,touchPoint.y)];
[path addLinetoPoint:CGPointMake(_startingPoint.x,_startingPoint.y)];
_startingPoint=touchPoint;

    drawLayer = [CAShapeLayer layer];
    drawLayer.path = [path CGPath];
    drawLayer.strokeColor = [[UIColor blackColor] CGColor];
    drawLayer.linewidth = 3.0;
    drawLayer.fillColor = [[UIColor redColor] CGColor];
    [self.imgView.layer addSublayer:drawLayer];
    NSLog(@"Touch moving point =x : %f Touch moving point =y : %f",touchPoint.y);


}

注意:您需要在绘制线条时注意触摸移动的方法.作为贝塞尔路径方法,addLinetoPoint将向touchPoint添加线,此线可能会穿过maskedpath.您需要确保关闭previosu bezier路径并开始一个新路径以避免在蒙版区域的外部绘制线条.

相关文章

UITabBarController 是 iOS 中用于管理和显示选项卡界面的一...
UITableView的重用机制避免了频繁创建和销毁单元格的开销,使...
Objective-C中,类的实例变量(instance variables)和属性(...
从内存管理的角度来看,block可以作为方法的传入参数是因为b...
WKWebView 是 iOS 开发中用于显示网页内容的组件,它是在 iO...
OC中常用的多线程编程技术: 1. NSThread NSThread是Objecti...