ios - 如何使用 GraphicContext 在 Objective C 中获得锥形线笔刷效果

Question

我正在做一个书法应用程序，我想修改下面的代码，以便当用户结束笔触时，线条会逐渐变细并变细，就像使用真正的书法笔一样(轻弹效果)。我知道 touchesEnded 可能是执行此操作的更好方法，但我只是想知道在 Objective C 的 Xcode 中使用 CGRect 或 UIKit 中的 GraphicsContext 以编程方式在笔画结束时轻弹的最佳方法是什么。

- (void)touchesMoved:(NSSet *)touches withEvent:(UIEvent *)event {
mouseSwiped = YES;

UITouch *touch = [touches anyObject];
currentPoint = [touch locationInView:self.view];



UIGraphicsBeginImageContext(CGSizeMake(320, 568));
[drawImage.image drawInRect:CGRectMake(0, 0, 320, 568)];
CGContextSetLineCap(UIGraphicsGetCurrentContext(), kCGLineCapRound);
CGContextSetLineWidth(UIGraphicsGetCurrentContext(), 5.0);
CGContextSetRGBStrokeColor(UIGraphicsGetCurrentContext(), 0, 0, 0, 1);
CGContextBeginPath(UIGraphicsGetCurrentContext());
CGContextMoveToPoint(UIGraphicsGetCurrentContext(), lastPoint.x, lastPoint.y);
CGContextAddLineToPoint(UIGraphicsGetCurrentContext(), currentPoint.x, currentPoint.y);
CGContextStrokePath(UIGraphicsGetCurrentContext());


[drawImage setFrame:CGRectMake(0, 0, 320, 568)];
drawImage.image = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();
lastPoint = currentPoint;

}

- (void)touchesEnded:(NSSet *)touches withEvent:(UIEvent *)event {
//what code do I put here to get the flick effect - what CGGetContext Parameter
//may be applicable or what programming technique may help with this.     

}

Answer 1

这可能过于简单化，但它应该会引导您朝着正确的方向前进。我打算只制作一个三角形，但您最终可以添加贝塞尔曲线以使效果更逼真。

- (void)touchesEnded:(NSSet *)touches withEvent:(UIEvent *)event {
//what code do I put here to get the flick effect - what CGGetContext Parameter
//may be applicable or what programming technique may help with this. 

    UIGraphicsBeginImageContext(CGSizeMake(320, 568));
    [drawImage.image drawInRect:CGRectMake(0, 0, 320, 568)];
    CGContextRef context = UIGraphicsGetCurrentContext();
    CGContextSetLineWidth(context, 5.0);
    CGContextSetRGBFillColor(context, 0, 0, 0, 1);
    CGContextBeginPath(context);
    CGContextBeginPath(context);
    CGContextMoveToPoint(context, lastPoint.x, lastPoint.y);
    CGContextAddLineToPoint(context, currentPoint.x, currentPoint.y);
    CGContextClosePath(context);
    CGContextStrokePath(context);

    //Normalized directionality
    float lineLength = sqrt((currentPoint.x - lastPoint.x)*(currentPoint.x - lastPoint.x) + (currentPoint.y - lastPoint.y)*(currentPoint.y - lastPoint.y));
    float dx = (currentPoint.x - lastPoint.x)/lineLength;
    float dy = (currentPoint.y - lastPoint.y)/lineLength;

    //Now make a triangle
    CGContextBeginPath(context);

    //2.5 is from 1/2 of your line width (5)
    CGContextMoveToPoint(context, currentPoint.x + 2.5*dy, currentPoint.y - 2.5*dx);

    //This 10 is completely arbitrary, the length your taper is going to be.
    //Ideally this will be proportional to your last line segment length, longer if their finger is moving faster...
    CGContextAddLineToPoint(context, currentPoint.x + 10*dx, currentPoint.y + 10*dy);

    //Now the last tip of the triangle
    CGContextMoveToPoint(context, currentPoint.x - 2.5*dy, currentPoint.y + 2.5*dx);
    CGContextClosePath(context);
    CGContextFillPath(context);

    [drawImage setFrame:CGRectMake(0, 0, 320, 568)];
    drawImage.image = UIGraphicsGetImageFromCurrentImageContext();
    UIGraphicsEndImageContext();
}

现在，为了使它更酷，您可以添加对人正在绘制的曲线的计算，并在它们弯曲的方向上创建带有贝塞尔曲线的“三角形”锥度。计算起来真的很有趣。