uiimageview上的特殊形状图像

Question

我们可以使用UIImageView在图像上设置以下形状。

任何想法！

由于

Answer 1

Swift 3版本 - 带边框

像其他人建议的那样，我会使用图片的mask属性。

Apple关于mask属性的信息：

  

图层的Alpha通道决定了图层内容和背景的显示量。完全或部分不透明的像素允许底层内容显示但完全透明的像素阻止该内容。   此属性的默认值为nil nil。

     

配置遮罩时，请记住设置遮罩层的大小和位置，以确保遮罩层与遮罩层正确对齐。

最后一句很重要！

1。创建你的面具

我使用Sketch创建了一个带有透明背景的黑色图像（PNG）。

将其添加到Assets.xcassets文件夹中。我的图片名为profileMask。

2。将UIImageView添加到Storyboard

为图像视图创建一个插座。我打电话给我profileImageView。

3。代码viewDidLoad

override func viewDidLoad() {
    super.viewDidLoad()

    let maskImageView = UIImageView()
    maskImageView.contentMode = .scaleAspectFit
    maskImageView.image = #imageLiteral(resourceName: "profileMask")
    maskImageView.frame = profileImageView.bounds
    profileImageView.mask = maskImageView
}

注意：

• 我添加了contentMode，因为没有它我的蒙版会拉伸以匹配UIImageView的边界（宽度）。您可以通过使UIImageView与掩模图像大小相同来解决此问题，反之亦然。

以下是运行时的样子：

边境怎么样？

伙计们，这真是一件痛苦事。我试图创建一个Bezier路径，但说实话，我的技巧是制作一个与面具相匹配的精确形状对我来说是不可能的。如果你有能力做到这一点，Bezier Path可能看起来非常好，但我不这样做。 ：（

所以我有了这个想法，“如果我只使用蒙版图像作为边框怎么办？”有效！这样做的好处是你可以在将来使用任何面具形状，它将为它创建一个边框，而不必弄清楚bezier路径。

我是这样做的：

1. 在Assets.xcassets中，选择您的蒙版并将此渲染为属性更改为“模板图像”。这允许您通过更改UIImageView的Tint Color属性来更改蒙版图像的颜色
2. 然后在代码中我将profileImageView设置为蒙版，并将色调颜色更改为我想要的边框。
3. 然后我为Jason的个人资料图片创建了另一个图像视图并将蒙版应用于它。我将它设为与profileImageView减去2个点相同的大小（以显示将成为边框的基础蒙版图像）。
4. 最后一步是将屏蔽图像添加为profileImageView。
的子视图

以下是viewDidLoad中的代码：

override func viewDidLoad() {
    super.viewDidLoad()

    // Add border first (mask image)
    profileImageView.contentMode = .scaleAspectFit
    profileImageView.tintColor = .lightGray // Border Color
    profileImageView.image = #imageLiteral(resourceName: "profileMask")

    // Profile Image
    let profileImage = UIImageView()
    profileImage.image = #imageLiteral(resourceName: "Profile")
    profileImage.contentMode = .scaleAspectFill
    // Make a little bit smaller to show "border" image behind it
    profileImage.frame = profileImageView.bounds.insetBy(dx: 2, dy: 2)

    // Mask Image
    let maskImageView = UIImageView()
    maskImageView.image = #imageLiteral(resourceName: "profileMask")
    maskImageView.contentMode = .scaleAspectFit
    maskImageView.frame = profileImage.bounds

    // Apply mask to profile iamge
    profileImage.mask = maskImageView

    // Add profile image as a subview on top of the "border" image
    profileImageView.addSubview(profileImage)
}

现在，当我们运行它时，它看起来像这样：



合

如果我们使用蒙版和边框宽度属性创建自定义UIImageView，那真可能真的很酷。然后你可以只分配这些属性，自定义类将处理其余的。让我知道，如果你们想看到这样的东西，我会创建它并在这里发布。也许还可以为我的频道制作YouTube视频教程。

Answer 2

您可以使用imageView＆nbsp; CALayer的mask属性：

CALayer *mask = [CALayer layer];
mask.contents = (id)[[UIImage imageNamed:@"mask.png"] CGImage];
mask.frame = CGRectMake(0, 0, imageView.image.size.width, imageView.image.size.height);
imageView.layer.mask = mask;
imageView.layer.masksToBounds = YES;

这仅适用于ImageView，因此如果您想直接更改UIImage，您应该使用Core Graphics掩码：

- (UIImage*) maskImage:(UIImage *)image withMask:(UIImage *)maskImage {

    CGImageRef maskRef = maskImage.CGImage;

    CGImageRef mask = CGImageMaskCreate(CGImageGetWidth(maskRef),
                                        CGImageGetHeight(maskRef),
                                        CGImageGetBitsPerComponent(maskRef),
                                        CGImageGetBitsPerPixel(maskRef),
                                        CGImageGetBytesPerRow(maskRef),
                                        CGImageGetDataProvider(maskRef), NULL, false);

    CGImageRef maskedImageRef = CGImageCreateWithMask([image CGImage], mask);
    UIImage *maskedImage = [UIImage imageWithCGImage:maskedImageRef];

    CGImageRelease(mask);
    CGImageRelease(maskedImageRef);

    // returns new image with mask applied
    return maskedImage;
}

Answer 3

是的，您可以在UIImage上设置形状。首先，在项目中添加Mask图像（您想要的形状）。并写下这些代码。

[yourImageView setImage:[self createMaskImage:yourImage withMask:MaskImage]];

- (UIImage*) createMaskImage:(UIImage *)image withMask:(UIImage *)maskImage {
    CGImageRef maskRef = maskImage.CGImage;

    CGImageRef mask = CGImageMaskCreate(CGImageGetWidth(maskRef),
                                        CGImageGetHeight(maskRef),
                                        CGImageGetBitsPerComponent(maskRef),
                                        CGImageGetBitsPerPixel(maskRef),
                                        CGImageGetBytesPerRow(maskRef),
                                        CGImageGetDataProvider(maskRef), NULL, false);

    CGImageRef masked = CGImageCreateWithMask([image CGImage], mask);
    return [UIImage imageWithCGImage:masked];
}

Answer 4

抱歉硬编码。尝试使用UIBezierPath设置您想要的任何形状。

CAShapeLayer* maskLayer = [CAShapeLayer layer];
UIBezierPath* path = [UIBezierPath bezierPath];
[path moveToPoint:CGPointMake(75, 200)];
[path addCurveToPoint:CGPointMake(0, 100) controlPoint1:CGPointMake(0, 150) controlPoint2:CGPointMake(0, 150)];
[path addArcWithCenter:CGPointMake(75, 100) radius:75 startAngle:M_PI endAngle:0 clockwise:YES];
[path addCurveToPoint:CGPointMake(75, 200) controlPoint1:CGPointMake(150, 150) controlPoint2:CGPointMake(150, 150)];
[path closePath];
maskLayer.backgroundColor = [[UIColor clearColor] CGColor];
maskLayer.path = [path CGPath];

yourImageView.layer.mask = maskLayer;

Answer 5

使用

很容易

UIImageView *image=[[UIImageView alloc]initWithImage:[UIImage imageNamed:@"balloon_selected_left.png"] ];
    self.maskImage.layer.mask=image.layer;