三角形 UIView 或 UIImageView

Question

我有如下图所示的要求。

但是，我对如何实现这一点感到困惑？我可以通过使用 3 UIImageViews 或 UIViews 来实现它吗？如果两者兼而有之，哪一个更好？最后，我必须组合三张图像并从这三张图像中制作一张。我也应该能够触摸到图像。我对此一无所知。谢谢。

Answer 1

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

每个CALayer 都有一个mask 属性，这是另一个CALayer。蒙版允许定义图层的透视形状，例如模板。

所以你需要三个UIImageViews，每个都有一个不同的.layer.mask，每个掩码是一个不同的CAShapeLayer，其.path是三角形CGPaths。

// 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 来实现这一点

Step1：复制以下代码

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!)
            }

        }



    }

}

Step2：设置自定义类

第三步：使用它