三angularUIView或UIImageView

我有像下面的图像的要求。

但是，我很困惑如何实现这一目标？ 我可以通过使用3 UIImageViews或UIViews来实现它。 如果两者都是，哪一个更好？ 最后，我必须结合三个图像，并从这三个图像做出一个。 我也应该能够接触到图像。 我不知道这件事。 谢谢。

Answer 1

每个UIView都有一个支持CALayer （可以通过aview.layer访问）。

每个CALayer都有一个mask属性，这是另一个CALayer 。 掩模允许为层定义透明的形状，如模板。

所以你需要三个UIImageView ，它们每个都有一个不同的.layer.mask ，每个这些mask都是一个不同的CAShapeLayer它的.path是三angular形的CGPath 。

 // Build a triangular path UIBezierPath *path = [UIBezierPath new]; [path moveToPoint:(CGPoint){0, 0}]; [path addLineToPoint:(CGPoint){40, 40}]; [path addLineToPoint:(CGPoint){100, 0}]; [path addLineToPoint:(CGPoint){0, 0}]; // Create a CAShapeLayer with this triangular path // Same size as the original imageView CAShapeLayer *mask = [CAShapeLayer new]; mask.frame = imageView.bounds; mask.path = path.CGPath; // Mask the imageView's layer with this shape imageView.layer.mask = mask; 

重复三次。

Answer 2

你可以使用UIBezierPath和CAShapeLayer来实现这一点

第一步：复制下面的代码

TrImageView.swift

 import UIKit protocol TriImageViewDelegate: class { func didTapImage(image: UIImage) } class TriImageView:UIView { //assumption: view width = 2 x view height var images = [UIImage]() var delegate:TriImageViewDelegate? override func awakeFromNib() { super.awakeFromNib() //add imageviews for i in 1...3 { let imageView = UIImageView() imageView.tag = i imageView.userInteractionEnabled = true self.addSubview(imageView) } //add gesture recognizer self.addGestureRecognizer(UITapGestureRecognizer(target: self, action: #selector(TriImageView.handleTap(_:)))) } //override drawRect override func drawRect(rect: CGRect) { super.drawRect(rect) let width = rect.size.width let height = rect.size.height let frame = CGRect(x: 0, y: 0, width: width, height: height) let pointA = CGPoint(x: 0, y: 0) let pointB = CGPoint(x: width * 0.79, y: 0) let pointC = CGPoint(x: width, y: 0) let pointD = CGPoint(x: width * 0.534,y: height * 0.29) let pointE = CGPoint(x: 0, y: height * 0.88) let pointF = CGPoint(x: 0, y: height) let pointG = CGPoint(x: width * 0.874, y: height) let pointH = CGPoint(x: width, y: height) let path1 = [pointA,pointB,pointD,pointE] let path2 = [pointE,pointD,pointG,pointF] let path3 = [pointB,pointC,pointH,pointG,pointD] let paths = [path1,path2,path3] for i in 1...3 { let imageView = (self.viewWithTag(i) as! UIImageView) imageView.image = images[i - 1] imageView.frame = frame addMask(imageView, points: paths[i - 1]) } } //Add mask to the imageview func addMask(view:UIView, points:[CGPoint]){ let maskPath = UIBezierPath() maskPath.moveToPoint(points[0]) for i in 1..<points.count { maskPath.addLineToPoint(points[i]) } maskPath.closePath() let maskLayer = CAShapeLayer() maskLayer.path = maskPath.CGPath view.layer.mask = maskLayer } //handle tap func handleTap(recognizer:UITapGestureRecognizer){ let point = recognizer.locationInView(recognizer.view) for i in 1...3 { let imageView = (self.viewWithTag(i) as! UIImageView) let layer = (imageView.layer.mask as! CAShapeLayer) let path = layer.path let contains = CGPathContainsPoint(path, nil, point, false) if contains == true { delegate?.didTapImage(imageView.image!) } } } } 

第二步：设置自定义类

第三步：使用它