[iOS]drawRect 中帶有 UIBezierPath 的三角形不工作

Question

我正在嘗試學習使用 UIBezierPath 構建自定義形狀，並且正在嘗試構建一個簡單的三角形。 下面是我正在使用的代碼

class ViewController: UIViewController {

    let customView = CustomTraingleView(frame: CGRectZero)
    
    override func viewDidLoad() {
        super.viewDidLoad()
        view.addSubview(customView)
        customView.frame = CGRect(origin: CGPoint(x: 150, y: 200), size: CGSize(width: 100, height: 100))
    }
}

class CustomTraingleView: UIView
{
    override init(frame: CGRect) {
        super.init(frame: frame)
        backgroundColor = UIColor.red
    }
    
    required init?(coder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }
    
    override func draw(_ rect: CGRect) {
        let viewSize = self.bounds.size
        let path = UIBezierPath()
        path.lineWidth = 3
        path.move(to: CGPoint(x: frame.origin.x + viewSize.width/2, y: frame.origin.y + viewSize.height/2))
        path.addLine(to: CGPoint(x: frame.origin.x + (3 * viewSize.width)/4, y: frame.origin.y + (3 * viewSize.height)/4))
        path.addLine(to: CGPoint(x: frame.origin.x + viewSize.width/2, y: frame.origin.y + (3 * viewSize.height)/4))
        UIColor.black.setStroke()
        path.stroke()
        path.close()
    }
}

我沒有看到任何形狀被渲染。 我在添加的視圖中看到紅色 bgColor。

有人可以看看這個，讓我知道我在這里缺少什么

Answer 1

您已經繪制了相對於frame.origin的三角形，而不是bounds.origin 。

frame ，正如您在viewDidLoad中設置的那樣x: 150, y: 200 ，所以三角形將被繪制到右側 150 點，紅色正方形左上角下方 200 點。 紅色方塊只有 100x100 點，因此 position 超出了紅色方塊的范圍（如果您的設備很小，甚至可能超出屏幕范圍），這就是您看不到三角形的原因。

換句話說，在CustomTraingleView.draw中，您在CustomTriangleView的坐標系中工作，而不是視圖控制器視圖的坐標系。 frame.origin是 CustomTriangleView 的原點，以CustomTriangleView視圖坐標系的坐標表示 - 坐標是相對於超級視圖的原點。 但是你是相對於CustomTraingleView的起源在這里繪制的！

因此，您應該將所有這些frame更改為bounds ：

path.move(to: CGPoint(x: bounds.origin.x + viewSize.width/2, y: bounds.origin.y + viewSize.height/2))
path.addLine(to: CGPoint(x: bounds.origin.x + (3 * viewSize.width)/4, y: bounds.origin.y + (3 * viewSize.height)/4))
path.addLine(to: CGPoint(x: bounds.origin.x + viewSize.width/2, y: bounds.origin.y + (3 * viewSize.height)/4))

bounds.origin是視圖的原點，用視圖自身坐標系的坐標表示，正是我們這里所需要的。 默認情況下，這是 (0, 0)。

你也應該先關閉路徑，然后再撫摸它。 否則你只能得到三角形的兩條邊:)

path.close()
path.stroke()

Answer 2

試試這個，聲明你的 UIView：

let myView = TriangleView()

這是我的三角形 class 的樣子：

class TriangleView : UIView {

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

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

override func draw(_ rect: CGRect) {

    guard let context = UIGraphicsGetCurrentContext() else { return }

    context.beginPath()
    context.move(to: CGPoint(x: rect.minX, y: rect.maxY))
    context.addLine(to: CGPoint(x: rect.maxX, y: rect.maxY))
    context.addLine(to: CGPoint(x: (rect.maxX / 2.0), y: rect.minY))
    context.closePath()

    context.setFillColor(red: 1.0, green: 0.5, blue: 0.0, alpha: 1) // fill color
    context.fillPath()
 }
}

在 viewDidLoad 中設置您的視圖屬性並設置約束：

myView.backgroundColor = .clear
myView.translatesAutoresizingMaskIntoConstraints = false
    
 view.addSubview(myView)
    myView.centerXAnchor.constraint(equalTo: view.centerXAnchor).isActive = true
    myView.centerYAnchor.constraint(equalTo: view.centerYAnchor).isActive = true
    myView.heightAnchor.constraint(equalToConstant: 100).isActive = true
    myView.widthAnchor.constraint(equalToConstant: 100).isActive = true

這是結果