将椭圆形的UIImage的顶部裁剪

Question

我有以下屏幕设计：

我想呈现MKMapView的UIImage，不是适用省略号UIBezierPath和剪辑的顶部UIImage。我怎样才能做到这一点？提前致谢。

Answer 1

这是一个简单的实现，您可以遵循使用CAShapeLayer达到类似的效果。

• 创建足够的椭圆路径以适合图像视图的高度，但是可以调整宽度以控制曲线。

• 创建矩形路径以适合imageView的大小，宽度和高度应与imageView的大小匹配。

• 以这样的方式变换圆，使矩形路径恰好位于圆的中间。

现在，如果您查看上面的图像，则矩形具有与imageView相同的大小。如果以某种方式设法去除了不相交的形状部分，您将获得理想的效果。

这就是您要掩盖的图像部分，

使用CAShapeLayer可以很容易地做到这一点。

这是您可以使用的简单实现，

let image = UIImage(named: "image.jpg")
let imageSize = image!.size

let imageView = UIImageView(frame: CGRect(origin: CGPoint.zero, size: imageSize))
imageView.clipsToBounds = true
imageView.image = image


let curveRadius: CGFloat = imageSize.width * 0.005
let invertedRadius: CGFloat = 1.0 / curveRadius

// draw ellipse in rect with big width, but same height
let ellipticalPath = UIBezierPath(ovalInRect: CGRectMake(0, 0, imageSize.width + 2 * invertedRadius * imageSize.width, imageSize.height))

// transform it to center of imageView
ellipticalPath.applyTransform(CGAffineTransformMakeTranslation(-imageSize.width * invertedRadius, 0))

// create rectangle path exactly similar to imageView
let rectanglePath = UIBezierPath(rect: imageView.bounds)

// translate it by 0.5 ratio in order to create intersection between circle and rectangle
rectanglePath.applyTransform(CGAffineTransformMakeTranslation(0, -imageSize.height * CGFloat(0.5)))

// append rectangle to elliptical path
ellipticalPath.appendPath(rectanglePath)


// create mask
let maskLayer = CAShapeLayer()
maskLayer.frame = imageView.bounds
maskLayer.path = ellipticalPath.CGPath
imageView.layer.mask = maskLayer

这是它的样子，

您可以调整curveRadius的值以适合您的需要。

注意：由于CAShapeLayer上的一个名为fillRule的属性，其形状层相交是可能的，该属性的默认值为kCAFillRuleNonZero。在此处了解更多信息，https：//developer.apple.com/library/ios/documentation/GraphicsImaging/Reference/CAShapeLayer_class/#//apple_ref/occ/instp/CAShapeLayer/fillRule