如何在 ios 中的 imageview 上进行六边形图像遮罩?

Posted

技术标签:

【中文标题】如何在 ios 中的 imageview 上进行六边形图像遮罩?【英文标题】:how to do hexagon type image masking on imageview in ios? 【发布时间】:2014-06-02 05:54:07 【问题描述】:

我想在 ios 中的图像视图上实现图像遮罩。 图像遮罩应该是带圆角的六边形。 一些第三方代码可用,但它们没有圆角。

请帮助我。因为我是 iOS 新手。

【问题讨论】:

圆角六边形掩码请参见***.com/a/24770675/1271826(它实际上已推广到任何正多边形)。 【参考方案1】:

根据您显示图像的方式,您可以通过几种不同的方式对其进行遮罩。

案例一:CALayer

您可以在 CALayer 上使用 mask 属性。此属性为CALayer* 类型,并将目标层适当地掩蔽到给定层的 Alpha 通道。请注意,此属性可以是CALayer 的子类,尤其是CAShapeLayer,它允许您为掩码指定直接路径(在这里您可以指定六边形)。另请注意,确保在蒙版图层上设置一些不透明的颜色,以使蒙版图层真正被蒙版。

注意:如果您需要帮助绘制六边形的路径,请告诉我,我最近在今天早些时候做了几何图形:D

案例 2:CoreGraphics

您可以像这样使用CGImageMaskCreateCGImageCreateWithMask

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

  CGImageRef cgmask = CGImageMaskCreate(CGImageGetWidth(mask.CGImage), CGImageGetHeight(mask.CGImage), CGImageGetBitsPerComponent(mask.CGImage), CGImageGetBitsPerPixel(mask.CGImage), CGImageGetBytesPerRow(mask.CGImage), CGImageGetDataProvider(mask.CGImage), NULL, false);
  CGImageRef cgmaskedImage = CGImageCreateWithMask(image.CGImage, cgmask);
  UIImage *retval = [UIImage imageWithCGImage:maskedImageRef];
  CGImageRelease(cgmask);
  CGImageRelease(cgmaskedImage);

  return retval;

蒙版图像应该是您想要蒙版的黑色。这样,您可以在 Photoshop 中创建一个六边形,然后使用此方法创建蒙版图像。很好的是,如果需要,它还会自动缩放蒙版图像。

我个人更喜欢使用CALayers,因为即使是 UIImageView 也有 CALayer 支持,而且我对 CALayers 相当熟悉。也就是说,我不确定哪个性能更高或执行此操作的正确方法。

编辑:添加六边形绘图代码。

在这里,我将创建一些代码来创建一个代表六边形的 CGPathRef。

  UIView *v = [[UIView alloc] initWithFrame:CGRectMake(100, 100, 100, 100)];
  v.backgroundColor = [UIColor purpleColor];

  CGRect rect = v.frame;

  CAShapeLayer *hexagonMask = [CAShapeLayer layer];
  UIBezierPath *hexagonPath = [UIBezierPath bezierPath];
  CGFloat sideWidth = 2 * ( 0.5 * rect.size.width / 2 );
  CGFloat lcolumn = ( rect.size.width - sideWidth ) / 2;
  CGFloat rcolumn = rect.size.width - lcolumn;
  CGFloat height = 0.866025 * rect.size.height;
  CGFloat y = (rect.size.height - height) / 2;
  CGFloat by = rect.size.height - y;
  CGFloat midy = rect.size.height / 2;
  CGFloat rightmost = rect.size.width;
  [hexagonPath moveToPoint:CGPointMake(lcolumn, y)];
  [hexagonPath addLineToPoint:CGPointMake(rcolumn, y)];
  [hexagonPath addLineToPoint:CGPointMake(rightmost, midy)];
  [hexagonPath addLineToPoint:CGPointMake(rcolumn, by)];
  [hexagonPath addLineToPoint:CGPointMake(lcolumn, by)];
  [hexagonPath addLineToPoint:CGPointMake(0, midy)];
  [hexagonPath addLineToPoint:CGPointMake(lcolumn, y)];

  hexagonMask.path = hexagonPath.CGPath;
  v.layer.mask = hexagonMask;

您可以将您的图像视图替换为v,它应该会自动屏蔽它。

编辑:带边框的六边形代码列表。请注意,此示例中的 lineWidth 仅显示为 2.5,因为它的一半将被剪裁。如果您想要一个真正的5 像素边框,则将lineWidth 指定为10

  UIView *v = [[UIView alloc] initWithFrame:CGRectMake(100, 100, 100, 100)];
  v.backgroundColor = [UIColor purpleColor];

  CGRect rect = v.frame;

  CAShapeLayer *hexagonMask = [CAShapeLayer layer];
  CAShapeLayer *hexagonBorder = [CAShapeLayer layer];
  hexagonBorder.frame = v.layer.bounds;
  UIBezierPath *hexagonPath = [UIBezierPath bezierPath];
  CGFloat sideWidth = 2 * ( 0.5 * rect.size.width / 2 );
  CGFloat lcolumn = ( rect.size.width - sideWidth ) / 2;
  CGFloat rcolumn = rect.size.width - lcolumn;
  CGFloat height = 0.866025 * rect.size.height;
  CGFloat y = (rect.size.height - height) / 2;
  CGFloat by = rect.size.height - y;
  CGFloat midy = rect.size.height / 2;
  CGFloat rightmost = rect.size.width;
  [hexagonPath moveToPoint:CGPointMake(lcolumn, y)];
  [hexagonPath addLineToPoint:CGPointMake(rcolumn, y)];
  [hexagonPath addLineToPoint:CGPointMake(rightmost, midy)];
  [hexagonPath addLineToPoint:CGPointMake(rcolumn, by)];
  [hexagonPath addLineToPoint:CGPointMake(lcolumn, by)];
  [hexagonPath addLineToPoint:CGPointMake(0, midy)];
  [hexagonPath addLineToPoint:CGPointMake(lcolumn, y)];

  hexagonMask.path = hexagonPath.CGPath;
  hexagonBorder.path = hexagonPath.CGPath;
  hexagonBorder.fillColor = [UIColor clearColor].CGColor;
  hexagonBorder.strokeColor = [UIColor blackColor].CGColor;
  hexagonBorder.lineWidth = 5;
  v.layer.mask = hexagonMask;
  [v.layer addSublayer:hexagonBorder];

【讨论】:

请提供您为绘制六边形而实现的代码。谢谢你:-)。 是的,它有效。谢谢。对于圆角,我添加了两行。 view.layer.cornerRadius = 5; view.layer.masksToBounds = YES; 如何设置那个六边形的边框? 如何给这个六边形设置边框? UIImageView 层上的@Darshan_Ethan 查看borderWidthborderColor 属性。

以上是关于如何在 ios 中的 imageview 上进行六边形图像遮罩?的主要内容,如果未能解决你的问题,请参考以下文章

如何在 ios 4 中以编程方式将图像数组添加到 Imageview?

如何在 iOS 上进行面部识别?

iOS 11中的imageView使用Swift

如何在 App 中将 ImageView 中的图像附加到电子邮件

iOS编程如何在用户点击ImageView时全屏显示图像

iOS开发小技巧--巧用ImageView中的mode(解决图片被拉伸的情况)