ios - 如何在 ios 中的 imageview 上进行六边形图像 mask ？

Question

我想在 iOS 的 ImageView 上实现图像 mask 。图像 mask 应该是带圆角的六边形。一些第三方代码可用，但它们没有圆角。

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

Answer 1

根据您显示图像的方式，您可以使用几种不同的方式来掩盖它。

案例一:CALayer

您可以在 CALayer 上使用 mask 属性。此属性属于 CALayer* 类型，会将目标层适本地屏蔽到给定层的 alpha channel 。请注意，此属性可以是 CALayer 的子类，特别是 CAShapeLayer，它允许您指定 mask 的直接路径(此处您可以指定六边形)。还要注意确保在蒙版层上设置了一些不透明的颜色，以使蒙版层真正被蒙版。

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

案例二:CoreGraphics

您可以像这样使用 CGImageMaskCreate 和 CGImageCreateWithMask:

- (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 中创建一个六边形，然后使用此方法创建一个蒙版图像。很棒的是，如果需要，它还会自动缩放 mask 图像。

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

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

在这里，我将创建一些代码来创建一个代表六边形的 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 替换为 ImageView ，它应该会自动屏蔽它。

编辑:带边框的六边形代码列表。请注意，此示例中的线宽只会显示为 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];