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

您可以使用maskimageView的CALayer的属性:

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];
}