Треугольный UIView или UIImageView

Ответ 1

Каждый UIView имеет резервную копию CALayer (доступен aview.layer).

Каждый CALayer имеет свойство mask, которое является другим CALayer. Маска позволяет определить прозрачную форму для слоя, например трафарет.

Итак, вам нужны три UIImageView s, каждый из которых имеет другую .layer.mask, каждая из этих масок - это другая CAShapeLayer, чьи .path являются треугольными CGPath s.

// 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 layer with this shape
imageView.layer.mask = mask;

Повторите три раза.

Ответ 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: используйте его