Swift UIImageViewを三角形にしたい

Question

実現したい事
お世話になります。UIImageViewを三角形で表示させたいのですが、
インターネットで調べてみてもほとんど見当たらずこちらで知恵を借りたく質問しましたm(_ _)m

現状・分からない事
関連でUIImageViewを三角形で表示するのに近い物として、
UIButtonを三角形にするという記事とUIImageViewを丸くするという記事を参考に
UIViewを三角形にすることとUIImageViewの変形までは実現することができたのですが、
二つのコードは違う書き方なのでUIImageViewを三角形に落とし込むところまでの方法が分からない状態です。

アドバイスやご指摘、お待ちしておりますm(_ _)m

シミュレーター実行画面
(犬の写真がUIImageViewを丸くしたもので下の三角形はUIViewを三角形にしたものです)

以下がUIViewを三角形にしたコードになります。

import UIKit

class CustomView: UIView {

    override init(frame: CGRect) {
        super.init(frame: frame)
    }

    required init?(coder aDecoder: NSCoder) {
        super.init(coder: aDecoder)
        drawTriangle()
    }

    private func drawTriangle() {
        let path = createTrianglePath()

        let mask = CAShapeLayer()
        mask.path = path.cgPath

        self.layer.masksToBounds = true
        self.layer.mask = mask

        let borderShape = CAShapeLayer()
        borderShape.path = path.cgPath
        borderShape.lineWidth = 4.0
        borderShape.strokeColor = UIColor.darkGray.cgColor
        borderShape.fillColor = UIColor.clear.cgColor
        self.layer.insertSublayer(borderShape, at: 0)
        
        backgroundColor = .cyan
    }

    private func createTrianglePath() -> UIBezierPath {
        let rect = self.frame
        let path = UIBezierPath()
        path.move(to: CGPoint(x:rect.width, y:0))
        path.addLine(to: CGPoint(x:rect.width, y:rect.height))
        path.addLine(to: CGPoint(x:0, y:rect.height))
        path.close()
        return path
    }

}

以下がUIImageViewを丸くしたコードになります。

import UIKit

class CircleImageView: UIImageView {

        override func awakeFromNib() {
            super.awakeFromNib()
            // swap UIImage because you can't asign yourself.
            let image = self.image
            self.image = image
        }

        override var image: UIImage? {
            get { return super.image }
            set {
                self.contentMode = .scaleAspectFit
                super.image = newValue?.roundImage()
            }
        }

        override func layoutSubviews() {
            super.layoutSubviews()
            self.layer.cornerRadius = self.frame.height / 2.0
        }
    }

    extension UIImage {
        func roundImage() -> UIImage {
           
            let minLength: CGFloat = min(self.size.width, self.size.height)
            let rectangleSize: CGSize = CGSize(width: minLength, height: minLength)
            UIGraphicsBeginImageContextWithOptions(rectangleSize, false, 0.0)

            UIBezierPath(roundedRect: CGRect(origin: .zero, size: rectangleSize), cornerRadius: minLength).addClip()
            self.draw(in: CGRect(origin: CGPoint(x: (minLength - self.size.width) / 2, y: (minLength - self.size.height) / 2), size: self.size))

            let newImage = UIGraphicsGetImageFromCurrentImageContext()!
            UIGraphicsEndImageContext()
            return newImage
        }

}

Answer 1

UIImageView を親クラスとしてカスタムクラスをつくるのであれば、このような感じにすれば任意の図形を三角形で切り抜くことが可能になります。

createTrianglePath()内でのパスを設定すれば、独自の形で切り抜くことが可能です。

切り抜き処理を layoutSubviews() で行うべきか否かは議論の余地があるとは思いますが...

class ClippedUIImageView: UIImageView {
    override func layoutSubviews() {
        super.layoutSubviews()
        let mask = CAShapeLayer()
        
        // mask に設定するのは、frame ではなくて bounds
        mask.frame = self.bounds
        mask.path = createTrianglePath().cgPath
        self.layer.mask = mask
        
        let borderShape = CAShapeLayer()
        
        // mask に設定するのは、frame ではなくて bounds
        borderShape.frame = self.bounds
        borderShape.path = createTrianglePath().cgPath
        borderShape.lineWidth = 4.0
        borderShape.strokeColor = UIColor.darkGray.cgColor
        borderShape.fillColor = UIColor.clear.cgColor
        
        self.layer.insertSublayer(borderShape, at: 0)
    }
    
    private func createTrianglePath() -> UIBezierPath {
        let path = UIBezierPath()
        
        let frame = self.frame
        
        path.move(to: CGPoint(x: frame.width, y:0))
        path.addLine(to: CGPoint(x: frame.width, y: frame.height))
        path.addLine(to: CGPoint(x: 0, y: frame.height))
        path.close()
        
        return path
    }
}

Interface Builder 経由でもコードベースでも、通常の UIImageViewと同じように使えます。

import UIKit

class ViewController: UIViewController {
    // Interface Builder 経由
    @IBOutlet weak var imageView: ClippedUIImageView!
    
    // コードベース
    let staticImageView = ClippedUIImageView()
    
    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view.
        
        imageView.image = UIImage(named: "dogjpg")
        
        imageView.contentMode = .scaleAspectFill
        
        staticImageView.frame = CGRect(x: 40, y: 40, width: 100, height: 100)
        staticImageView.image = UIImage(named: "dogjpg")
        view.addSubview(staticImageView)
    }
}

Interface Builder で設定するのであれば、一度UIImageView（あるいは、単なるUIView）を配置した後に、クラス名を変更する必要があるので、そこだけ気をつけていただけますでしょうか。

Answer 2

2つの記事が紹介されていますが、
UIButtonを三角形にするという記事ではUIButtonが三角形になっていませんし（四角形のまま）
UIImageViewを丸くするという記事ではUIImageViewが丸くなっていません（こちらも四角形のまま）

おそらく、やりたいことは「三角形に加工した画像を表示したい」ということではないでしょうか？
もしそうであればやることは明確です。
画像を三角形に加工してください。
その画像を四角形のUIImageViewに設定すれば、見かけ上は三角形に表示できます。