三角UIView或UIImageView

Question

我的要求如下图所示。

但是，我对如何实现这一点很困惑？我可以使用3 UIImageViews或UIViews来实现它。如果两者都有，哪一个更好？最后，我必须结合三个图像和从这三张图片中选出一张。我也应该能够触摸到图像。我不知道这个。感谢。

Answer 1

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

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

所以你需要三个UIImageView，每个.layer.mask都有不同的CAShapeLayer，这些面具中的每一个都是.path 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; {{1}} }第

{{1}}

重复三次。

Answer 2

您可以使用 UIBezierPath 和 CAShapeLayer 来实现此目标

步骤1：复制以下代码

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

        }



    }

}

步骤2：设置自定义类

第3步：使用