ios - 如何在圆形贝塞尔路径内绘制图像

Question

我正在尝试创建一个自定义 View 来绘制带有 CD 专辑插图的音乐 CD。

目前我使用core graphics在drawRect方法中绘制两个圆盘。内圆盘的颜色设置为 View 的背景颜色，使其看起来像内圆是一个空心圆。

我的问题是我无法在圆形贝塞尔曲线路径内绘制 UIImage 以获得我需要的结果。

这是我的 drawRect 代码:

// Draw a CD like view using three drawing operations:
// 1st draw the main disk
// 2nd draw the image if it is set
// 3rd draw the inner disk over the image so that it looks like it is a hollow disk with the image painted on the disk.
// Note:) This view expects its aspect ratio to be set as 1:1
- (void)drawRect:(CGRect)rect
{
    // Draw the main Circular CD disk
    UIBezierPath* outerRing = [UIBezierPath bezierPathWithOvalInRect:self.bounds];

    [self.mainColor setFill];
    [outerRing fill];

    [self.outerRingColor setStroke];
    [outerRing stroke];

    // Draw the album image if it is set
    if(self.artwork){
        [self.artwork drawInRect:self.bounds blendMode:kCGBlendModeNormal alpha:1.0];
    }

    // now draw another smaller disk inside
    // this will be a percentage smaller than the whole disk's bounds and will be centered inside it
    CGFloat sidePaddingCoord = ((1.0f - INNER_DISK_SIZE_PERCENTAGE) / 2) * self.bounds.size.height;
    CGFloat side = INNER_DISK_SIZE_PERCENTAGE * self.bounds.size.width;

    UIBezierPath* innerRing = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(sidePaddingCoord, sidePaddingCoord, side, side)];

    [self.innerRingColor setFill];
    [innerRing fill];

    [innerRing stroke];
}

这会将图像填充为正方形。我希望在 outerRing 贝塞尔曲线路径 内剪裁图像，使其看起来像一张音乐 CD。

我确信除了使用图像的 drawInRect 方法之外，还有一种方法可以使用核心图形来实现其他目的。有什么方法可以在圆形贝塞尔路径内“剪辑”图像或仅在贝塞尔路径内绘制？

Answer 1

我读过 rob mayoff 的非常棒的帖子，UIBezierPath Subtract Path , iOS UIImage clip to paths ，非常感谢。

这里是采用了他的代码。保留你的 outerRing 和 innerRing 的创建代码，将它们添加到名为 paths 的数组中。

[self.paths addObject:outerRing];
[self.paths addObject:innerRing];

然后使用这个帮助方法。

- (UIImage *)maskedImage
{
    CGRect rect = CGRectZero;
    rect.size = self.originalImage.size;
    UIGraphicsBeginImageContextWithOptions(rect.size, YES, 0.0);

    UIBezierPath *clipPath = [UIBezierPath bezierPathWithRect:CGRectInfinite];
    [clipPath appendPath:self.paths[1]];
    clipPath.usesEvenOddFillRule = YES;

    CGContextSaveGState(UIGraphicsGetCurrentContext()); {
        [clipPath addClip];
        [[UIColor orangeColor] setFill];
        [self.paths[0] fill];
    } CGContextRestoreGState(UIGraphicsGetCurrentContext());

    UIImage *mask = UIGraphicsGetImageFromCurrentImageContext();
    UIGraphicsEndImageContext();

    UIGraphicsBeginImageContextWithOptions(rect.size, NO, 0.0); {
        CGContextClipToMask(UIGraphicsGetCurrentContext(), rect, mask.CGImage);
        [self.originalImage drawAtPoint:CGPointZero];
    }
    UIImage *maskedImage = UIGraphicsGetImageFromCurrentImageContext();
    UIGraphicsEndImageContext();

    return maskedImage;
}

在drawRect中，

UIImage *maskedImage = [self maskedImage];
[maskedImage drawInRect:self.bounds blendMode:kCGBlendModeNormal alpha:1.0];