uiimageview上的特殊形状图像

Question

我们可以用UIImageView在图像上设置下面的形状吗？

任何想法！

谢谢

<< img src =“ https://image.soinside.com/eyJ1cmwiOiAiaHR0cHM6Ly9pLnN0YWNrLmltZ3VyLmNvbS9pVHRWcy5wbmcifQ==” alt =“在此处输入图像描述”>

Answer 1

是，您可以在UIImage上设置形状。首先，在项目中添加蒙版图像（所需形状）。并编写这些代码。

[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 2

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设置为与蒙版图像相同的大小即可解决此问题，反之亦然。

这是运行时的外观：

边界如何？

伙计们，这很痛苦。我试图创建贝塞尔曲线，但老实说，我无法制作出精确形状以匹配面罩的技能。如果您有技巧，贝塞尔曲线可能会看起来非常不错，但我没有。 ：（

所以我有了一个主意，“如果我仅将蒙版图像用作边框怎么办？”有效！这样做的好处是，您将来可以使用任何遮罩形状，并且将为其创建边框，而无需弄清楚贝塞尔曲线的路径。

这是我的操作方式：

1. 在Assets.xcassets中，选择您的蒙版，然后将此Render As属性更改为“ Template Image”。这允许您通过更改UIImageView的“色调颜色”属性来更改蒙版图像的颜色。
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)
}

所以现在我们运行它时看起来像这样：

结束

真正酷的是，如果我们创建一个具有mask和border width属性的自定义UIImageView。然后，您可以只分配这些属性，而自定义类将负责其余的工作。让我知道你们是否想看到类似的内容，我将其创建并发布在此处。也许还为我的频道制作了YouTube视频教程。

Answer 3

遮罩UIImageView

您可以使用imageView的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;

将核心图形蒙版应用于UIImage

这仅适用于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;
}

具有混合功能的核心图形图像合成

Swift 5]。

let image = UIImage(named: "Lenna.png")!
let mask = UIImage(named: "mask-image.png")! // background is transparent
let size = image.size

let renderer = UIGraphicsImageRenderer(size: size)
let newImage = renderer.image { context in
    image.draw(in: CGRect(origin: .zero, size: size), blendMode: .normal, alpha: 1)
    mask.draw(in: CGRect(origin: .zero, size: size), blendMode: .destinationIn, alpha: 1)
}
游乐场：

Answer 4

抱歉，您的硬编码。尝试使用UIBezierPath设置所需的任何形状。

Answer 5

使用起来很容易