三角UIView或UIImageView

Question

我有如下图所示的要求.

但是,我对如何实现这一点很困惑？我可以通过使用3 UIImageViews或者来实现它UIViews.如果两者都有,哪一个更好？最后,我必须结合三个图像并从三个图像中制作一个.我也应该能够触摸到图像.我不知道这个.谢谢.

Answer 1

每个人UIView都有支持CALayer(可通过aview.layer).

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

所以你需要三个UIImageViews,每一个都有不同的.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;

重复三次.

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步:使用它