Question

我有问题在我的绘图中实现“浮雕/阴影效果”。手指绘画功能目前在我的自定义UIView下工作正常，下面是我的drawRect方法代码：

使用所有方法编辑代码：

- (void)drawRect:(CGRect)rect
{
    CGPoint mid1 = midPoint(previousPoint1, previousPoint2); 
    CGPoint mid2 = midPoint(currentPoint, previousPoint1);

    CGContextRef context = UIGraphicsGetCurrentContext(); 
    [self.layer renderInContext:context];

    CGContextMoveToPoint(context, mid1.x, mid1.y);
    CGContextAddQuadCurveToPoint(context, previousPoint1.x, previousPoint1.y, mid2.x, mid2.y); 
    CGContextSetLineCap(context, kCGLineCapRound);
    CGContextSetLineWidth(context, self.lineWidth);
    CGContextSetStrokeColorWithColor(context, self.lineColor.CGColor);
    CGContextSaveGState(context);

    // for shadow  effects
    CGContextSetShadowWithColor(context, CGSizeMake(0, 2),3, self.lineColor.CGColor);
    CGContextStrokePath(context);
    [super drawRect:rect];
}

CGPoint midPoint(CGPoint p1, CGPoint p2)
{
    return CGPointMake((p1.x + p2.x) * 0.5, (p1.y + p2.y) * 0.5);
}


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

    UITouch *touch = [touches anyObject];

    previousPoint1 = [touch previousLocationInView:self];
    previousPoint2 = [touch previousLocationInView:self];
    currentPoint = [touch locationInView:self];

    [self touchesMoved:touches withEvent:event];
}

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

    UITouch *touch  = [touches anyObject];

    previousPoint2  = previousPoint1;
    previousPoint1  = [touch previousLocationInView:self];
    currentPoint    = [touch locationInView:self];


    // calculate mid point
    CGPoint mid1    = midPoint(previousPoint1, previousPoint2); 
    CGPoint mid2    = midPoint(currentPoint, previousPoint1);

    CGMutablePathRef path = CGPathCreateMutable();
    CGPathMoveToPoint(path, NULL, mid1.x, mid1.y);
    CGPathAddQuadCurveToPoint(path, NULL, previousPoint1.x, previousPoint1.y, mid2.x, mid2.y);
    CGRect bounds = CGPathGetBoundingBox(path);
    CGPathRelease(path);

    CGRect drawBox = bounds;

    //Pad our values so the bounding box respects our line width
    drawBox.origin.x        -= self.lineWidth * 2;
    drawBox.origin.y        -= self.lineWidth * 2;
    drawBox.size.width      += self.lineWidth * 4;
    drawBox.size.height     += self.lineWidth * 4;

    UIGraphicsBeginImageContext(drawBox.size);
    [self.layer renderInContext:UIGraphicsGetCurrentContext()];
    curImage = UIGraphicsGetImageFromCurrentImageContext();
    [curImage retain];
    UIGraphicsEndImageContext();



   [self setNeedsDisplayInRect:drawBox];

}

当我实现这个时，我得到点点点的绘画效果......

见下图（没有任何阴影或浮雕效果）。如果您对如何添加这些效果有任何想法，请给我一些建议。我怎么解决这个问题？

enter image description here

Answer 1

您似乎正在创建数百个，甚至数千个单独的路径，每个drawRect一个。你确实使用[self.layer renderInContext]将它们弄平了，但我认为这不是一个很好的方法。相反，我认为你想要做的是创建一个UIBezierPath来跟踪手指，将路径附加到该手指并将UIBezierPath绘制到屏幕上。如果创建两个图层（或视图），则可以将顶部（透明）设置为“绘制”。当用户抬起手指时，然后将整个UIBezierPath渲染到第二层（以及先前绘制的数据）并创建新的UIBezierPath以绘制下一个手指跟踪。这样，当您跟踪某人的手指时，您只会更新一个图层（顶部图层）。这有助于防止设备减慢绘制太多路径的速度。

虽然，我会说，你现在的方法确实产生了很酷的“3D”效果。

Answer 2

我不确定浮雕，但如果你想要的是将渐变阴影应用于逐步更新的绘图，那么一个不错的方法就是使用CALayers (link to a tutorial)。基本上，渐进式绘图会更新透明图像（不会尝试在此图像中绘制任何阴影），并且此图像将配置为通过其CALayer以阴影显示。

Answer 3

在边框上创建阴影，并且您正在绘制一小段线条，这会产生此效果。您需要创建一个路径，然后将其描边一次。这段代码可以帮到你:)

for (int i=0; i<[currentPath count]; i++) 
{
    CGPoint mid1 = [[self midPoint:[currentPath objectAtIndex:i+1]  :[currentPath objectAtIndex:i]] CGPointValue]; 
    CGPoint mid2 = [[self midPoint:[currentPath objectAtIndex:i+2] :[currentPath objectAtIndex:i+1]] CGPointValue];
    CGContextMoveToPoint(context, mid1.x, mid1.y);
    CGContextAddQuadCurveToPoint(context, [[currentPath objectAtIndex:i+1] CGPointValue].x, [[currentPath objectAtIndex:i+1] CGPointValue].y, mid2.x, mid2.y); 
    CGContextSetShadow(context, CGSizeMake(-2, -2), 3);

    CGContextSetLineCap(context, kCGLineCapRound);
    CGContextSetStrokeColorWithColor(context,[color CGColor]);              
    CGContextSetLineWidth(context, linewidth);              

    i+=2;
}
CGContextStrokePath(context);

尝试这种方式..这解决了可能解决你的问题..首先创建你的路径，并在完全创建后，抚摸它。发生这种情况是因为在你划过的每一条小线上，因此创建的阴影在其边界上形成一个点，所以你得到了这个效果。

如何使用Core Graphics创建浮雕或阴影效果（用于手指画）

3 个答案: