Question

我目前正在使用此代码在我的image上创建一个掩码。

- (UIImage*) maskImage:(UIImage *) image withMask:(UIImage *) mask
{
    CGImageRef imageReference = image.CGImage;
    CGImageRef maskReference = mask.CGImage;

    CGImageRef imageMask = CGImageMaskCreate(CGImageGetWidth(maskReference),
                                             CGImageGetHeight(maskReference),
                                             CGImageGetBitsPerComponent(maskReference),
                                             CGImageGetBitsPerPixel(maskReference),
                                             CGImageGetBytesPerRow(maskReference),
                                             CGImageGetDataProvider(maskReference),
                                             NULL, // Decode is null
                                             YES // Should interpolate
                                             );

    CGImageRef maskedReference = CGImageCreateWithMask(imageReference, imageMask);
    CGImageRelease(imageMask);

    UIImage *maskedImage = [UIImage imageWithCGImage:maskedReference];
    CGImageRelease(maskedReference);

    return maskedImage;
}

我现在想在屏蔽输出周围添加一个2点边框（就像在源网址中一样）。我有什么想法可以做到这一点吗？

谢谢！

Answer 1

至少有两个选择：

有三个图像，将在内部显示的图像，将用于遮盖第一个图像的图像，然后是第三个作为边框的图像（后一个图像将具有透明中心）。然后，您可以使用第二个图像遮罩第一个图像，然后仅使用蒙版图像顶部的边框覆盖图像。

但是以编程方式生成不规则形状图像并不容易。使用图形编辑器工具（如PhotoShop或其他）可能更容易创建将用于边框的图像。

您可以经常为面具创建UIBezierPath，而不是使用图像进行遮罩，然后从该路径创建两个CAShapeLayer对象，您可以使用它们掩盖你的图像视图和你将用来添加边框的视图：

UIBezierPath *path = [UIBezierPath bezierPath];
[path addArcWithCenter:CGPointMake(self.view.bounds.size.width / 2.0, self.view.bounds.size.height / 2.0) radius:self.view.bounds.size.width * 0.4 startAngle:0 endAngle:M_PI * 2.0  clockwise:YES];

CAShapeLayer *mask = [CAShapeLayer layer];
mask.path = path.CGPath;
mask.fillColor = [[UIColor blackColor] CGColor];
self.imageView.layer.mask = mask;

CAShapeLayer *border = [CAShapeLayer layer];
border.path = path.CGPath;
border.strokeColor = [[UIColor blueColor] CGColor];
border.fillColor = [[UIColor clearColor] CGColor];
border.lineWidth = 10.0;
[self.imageView.layer addSublayer:border]

这是一个例子，其中路径是一个简单的圆，但你可以创建一个心形路径或其他什么。 Bezier路径需要一段时间才能习惯，但它们对于绘制平滑的曲线形状非常有用。

底线，如果边框有一些我可以用贝塞尔曲线生成的规则形状，我更喜欢第二种方法。如果我将在我的图像编辑工具中手动绘制边框，那么我将使用第一种方法。

Answer 2

请参考以下链接，我也想实现同样的目标。

Applying border to image shape

请在下面找到代码：

- (UIImage*)mergeImage:(UIImage*)first withImage:(UIImage*)second
{
    // get size of the second image
    CGImageRef secondImageRef = second.CGImage;
    CGFloat secondWidth = CGImageGetWidth(secondImageRef);
    CGFloat secondHeight = CGImageGetHeight(secondImageRef);

    float offsetwt,offsetht,offset;

    offset=20;
    if(UI_USER_INTERFACE_IDIOM() == UIUserInterfaceIdiomPhone)
    {
        offset=offset/2;
    }
    offsetht=(secondHeight   * (secondWidth+offset)) /secondWidth;
    offsetwt=secondWidth+offset;

    // build merged size
    CGSize mergedSize = CGSizeMake(offsetwt,offsetht);

    // capture image context ref
    UIGraphicsBeginImageContext(mergedSize);

    //Draw images onto the context
    [first drawInRect:CGRectMake(0, 0, offsetwt, offsetht)];
    [second drawInRect:CGRectMake(offset/2, offset/2, secondWidth, secondHeight) blendMode:kCGBlendModeNormal alpha:1.0];

    // assign context to new UIImage
    UIImage *newImage = UIGraphicsGetImageFromCurrentImageContext();

    // end context
    UIGraphicsEndImageContext();

    return  newImage;
}

第一个参数是用于遮罩的图像，第二个参数是遮罩图像。您可以根据您的要求设置偏移量。我希望这会对你有所帮助。

面具周围的UIImage边框

2 个答案: