如何在圓形貝塞爾曲線路徑內繪制圖像

Question

我正在嘗試創建一個自定義視圖，以使用CD上的專輯插圖繪制音樂CD。

目前，我使用核心圖形在drawRect方法內繪制兩個圓形磁盤。 內圓盤的顏色設置為視圖的背景色，以使其看起來像內圓是空心圓。

我的問題是我無法在圓形貝塞爾曲線路徑內繪制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減去Path ， iOS UIImage路徑的剪輯 ，非常感謝。

這是他的代碼的采用。 保留您的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];

Answer 2

試試下面的代碼：

    UIImageView *userImageView= [[UIImageView alloc] initWithFrame:CGRectMake(85, 55.0, 90, 90)];
    userImageView.layer.cornerRadius = 90/2;
    userImageView.clipsToBounds = YES;
    userImageView.layer.borderWidth = 1.0f;
    userImageView.layer.borderColor = [UIColor blueColor];
    [self.view addSubview:userImageView]; //or add it to the view you want
    UIImage *userImage = [UIImage imageNamed:@"<image you want to set>"];
    userImageView= [[UIImageView alloc] initWithFrame:CGRectMake(90, 60.0, 80, 80)];
    userImageView.image = userImage;
    userImageView.layer.cornerRadius = 80/2;
    userImageView.clipsToBounds = YES;
    userImageView.layer.borderWidth = 1.0f;
    userImageView.layer.borderColor = [UIColor blueColor;
    [self.view addSubview:userImageView]; //or add it to the view you want