uiview - 在 Swift 中创建一个对角自定义 UIView

Question

我正致力于快速设计自定义 UIimageview。我想使用类似于此的 beizerpath 创建一个 UIimageview

编码应该是快速的。任何帮助表示赞赏。谢谢

Answer 1

创建一个 CAShapeLayer 并为其提供一个 path 和一个 fillColor:

@IBDesignable
public class AngleView: UIView {

    @IBInspectable public var fillColor: UIColor = .blue { didSet { setNeedsLayout() } }

    var points: [CGPoint] = [
        .zero,
        CGPoint(x: 1, y: 0),
        CGPoint(x: 1, y: 1),
        CGPoint(x: 0, y: 0.5)
    ] { didSet { setNeedsLayout() } }

    private lazy var shapeLayer: CAShapeLayer = {
        let _shapeLayer = CAShapeLayer()
        self.layer.insertSublayer(_shapeLayer, at: 0)
        return _shapeLayer
    }()

    override public func layoutSubviews() {
        shapeLayer.fillColor = fillColor.cgColor

        guard points.count > 2 else {
            shapeLayer.path = nil
            return
        }

        let path = UIBezierPath()

        path.move(to: convert(relativePoint: points[0]))
        for point in points.dropFirst() {
            path.addLine(to: convert(relativePoint: point))
        }
        path.close()

        shapeLayer.path = path.cgPath
    }

    private func convert(relativePoint point: CGPoint) -> CGPoint {
        return CGPoint(x: point.x * bounds.width + bounds.origin.x, y: point.y * bounds.height + bounds.origin.y)
    }
}

现在，我做了这个designable (所以如果你把它放在一个单独的框架目标中，你可以在你的 Storyboard 中添加这个 View 并在那里看到它呈现)。如果您不使用 Storyboard，它仍然有效。这样做很方便:

我还使用了相对坐标(值范围从 0 到 1)，并且有一种方法可以将这些坐标转换为实际坐标，但如果需要，您可以对坐标进行硬编码。但是使用它作为从零到一的值，你有一个可以参与自动布局的角度 View ，而不需要担心改变特定的坐标值。

最后，一些看似微不足道的小事，但我在 layoutSubviews 中构建了 path: 这样，随着 View 大小的改变(无论是通过自动布局还是编程变化)， View 将被正确地重新渲染。同样，通过将 didSet 用于 fillColor 和 points，如果您更改其中任何一个，将为您重新呈现 View 。

您可以根据需要随意更改它，但希望这能说明仅具有自定义 path 的 CAShapeLayer 的基本思想。

---

如果您使用 insertSublayer，您可以将它与 AngleView 的其他 subview 组合，例如: