Question

我正在做一个书法应用程序并希望修改下面的代码，因此当用户结束画笔笔划时，线条逐渐变细，并像真正的书法笔一样变薄（轻弹效果）。我知道touchesEnded可能是一个更好的方法来做到这一点，但我只是想知道在Xcode中使用CGRect或GraphicsContext在目标C的Xcode中以编程方式在笔画结束时进行这一轻弹的最佳方法。

- (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();
}

现在为了制作这个散热器，您可以添加人物绘制曲线的计算，并在弯曲的方向上创建具有贝塞尔曲线的“三角形”锥形。这实际上可能非常有趣。

如何使用图形上下文在Objective C中获得锥形线刷效果

1 个答案: