使用DrawRect有效地繪制多個矩形

我正在嘗試使用 DrawRect 繪制矩形圖案，如下所示：

目前，我這樣做是這樣的：

class PatternView: UIView {
    
    override func draw(_ rect: CGRect) {

        let context = UIGraphicsGetCurrentContext()
        
        let numberOfBoxesPerRow = 7
        let boxSide: CGFloat = rect.width / CGFloat(numberOfBoxesPerRow)
        var yOrigin: CGFloat = 0
        var xOrigin: CGFloat = 0
        var isBlack = true
        
        for y in 0...numberOfBoxesPerRow - 1 {
            yOrigin = boxSide * CGFloat(y)
            for x in 0...numberOfBoxesPerRow - 1 {

                xOrigin = boxSide * CGFloat(x)
                let color = isBlack ? UIColor.red : UIColor.blue
                isBlack = !isBlack

                context?.setFillColor(color.cgColor)
                
                let rectnagle =  CGRect(origin: .init(x: xOrigin, y: yOrigin), size: .init(width: boxSide, height: boxSide))
                context?.addRect(rectnagle)
                context?.fill([rectnagle])
            }
        }
           
    }
}

它正在作業，但我正在嘗試優化它。
任何幫助將不勝感激！

uj5u.com熱心網友回復：

很難回答“抽象”問題......這是一個問題，不知道你是否已經運行了一些測驗/分析以確定這段代碼是否很慢。

但是，您可以做幾件事來加快速度……

• 用一種顏色（在本例中為紅色）填充視圖，然后僅繪制其他顏色的框
• 將矩形添加到背景關系的路徑中，并填充一次路徑

看看這個修改：

class PatternView: UIView {
    
    override func draw(_ rect: CGRect) {
        
        guard let context = UIGraphicsGetCurrentContext() else { return }
        
        let numberOfBoxesPerRow = 7
        let boxSide: CGFloat = rect.width / CGFloat(numberOfBoxesPerRow)
        
        context.setFillColor(UIColor.red.cgColor)
        context.fill(bounds)
        
        var r: CGRect = CGRect(origin: .zero, size: CGSize(width: boxSide, height: boxSide))
        
        context.beginPath()
        
        for row in 0..<numberOfBoxesPerRow {
            r.origin.x = 0.0
            for col in 0..<numberOfBoxesPerRow {
                if (row % 2 == 0 && col % 2 == 1) || (row % 2 == 1 && col % 2 == 0) {
                    context.addRect(r)
                }
                r.origin.x  = boxSide
            }
            r.origin.y  = boxSide
        }
        
        context.setFillColor(UIColor.blue.cgColor)
        
        context.fillPath()

    }
}

還有其他選項...創建“圖案”背景顏色...例如使用CAShapeLayers 和/或CAReplicatorLayers...。

編輯

您得到“模糊邊緣”的原因是，正如您所猜測的，您正在繪制部分像素。

如果我們修改值以使用整數（使用floor()），我們可以避免這種情況。請注意，wholeNumberBoxSide * numBoxes 可能不完全等于視圖的矩形，因此我們還需要插入“網格”：

class PatternView: UIView {
    
    override func draw(_ rect: CGRect) {
        
        guard let context = UIGraphicsGetCurrentContext() else { return }
        
        let c1: UIColor = .white
        let c2: UIColor = .lightGray
        
        let numberOfBoxesPerRow = 7
        
        // use a whole number
        let boxSide: CGFloat = floor(rect.width / CGFloat(numberOfBoxesPerRow))

        // inset because numBoxes * boxSide may not be exactly equal to rect
        let inset: CGFloat = floor((rect.width - boxSide * CGFloat(numberOfBoxesPerRow)) * 0.5)
        
        context.setFillColor(c1.cgColor)
        context.fill(CGRect(x: inset, y: inset, width: boxSide * CGFloat(numberOfBoxesPerRow), height: boxSide * CGFloat(numberOfBoxesPerRow)))
        
        var r: CGRect = CGRect(x: inset, y: inset, width: boxSide, height: boxSide)
        
        context.beginPath()
        
        for row in 0..<numberOfBoxesPerRow {
            r.origin.x = inset
            for col in 0..<numberOfBoxesPerRow {
                if (row % 2 == 0 && col % 2 == 1) || (row % 2 == 1 && col % 2 == 0) {
                    context.addRect(r)
                }
                r.origin.x  = boxSide
            }
            r.origin.y  = boxSide
        }
        
        context.setFillColor(c2.cgColor)
        
        context.fillPath()

    }
}

我們還可以獲得主螢屏的比例（將是 2x 或 3x）并將 boxSide 舍入到一半或三分之一點以與像素對齊……如果真的需要的話。

編輯 2

其他修改...可設定的顏色和框數。

另外，使用這個擴展：

// extension to round CGFloat values to floor/nearest CGFloat
//  so, for example
//  if f == 10.6
//      f.floor(nearest: 0.5)    = 10.5
//      f.floor(nearest: 0.3333) = 10.3333
//      f.round(nearest: 0.5)    = 10.5
//      f.round(nearest: 0.3333) = 10.66666
extension CGFloat {
    func round(nearest: CGFloat) -> CGFloat {
        let n = 1/nearest
        let numberToRound = self * n
        return numberToRound.rounded() / n
    }
    
    func floor(nearest: CGFloat) -> CGFloat {
        let intDiv = CGFloat(Int(self / nearest))
        return intDiv * nearest
    }
}

我們可以將坐標四舍五入以匹配螢屏比例。

模式視圖類

class PatternView: UIView {

    var c1: UIColor = .white { didSet { setNeedsDisplay() } }
    var c2: UIColor = .lightGray { didSet { setNeedsDisplay() } }
    var numberOfBoxesPerRow = 21 { didSet { setNeedsDisplay() } }

    override func draw(_ rect: CGRect) {
        
        guard let context = UIGraphicsGetCurrentContext() else { return }
        
        let sc: CGFloat = 1.0 // / CGFloat(UIScreen.main.scale)
        
        // use a whole number
        let boxSide: CGFloat = (rect.width / CGFloat(numberOfBoxesPerRow)).floor(nearest: sc)
        
        // inset because numBoxes * boxSide may not be exactly equal to rect
        let inset: CGFloat = ((rect.width - boxSide * CGFloat(numberOfBoxesPerRow)) * 0.5).floor(nearest: sc)
        
        context.setFillColor(c1.cgColor)
        context.fill(CGRect(x: inset, y: inset, width: boxSide * CGFloat(numberOfBoxesPerRow), height: boxSide * CGFloat(numberOfBoxesPerRow)))
        
        var r: CGRect = CGRect(x: inset, y: inset, width: boxSide, height: boxSide)
        
        context.beginPath()
        
        for row in 0..<numberOfBoxesPerRow {
            r.origin.x = inset
            for col in 0..<numberOfBoxesPerRow {
                if (row % 2 == 0 && col % 2 == 1) || (row % 2 == 1 && col % 2 == 0) {
                    context.addRect(r)
                }
                r.origin.x  = boxSide
            }
            r.origin.y  = boxSide
        }
        
        context.setFillColor(c2.cgColor)
        
        context.fillPath()
        
    }
}

示例控制器視圖類

class PatternTestVC: UIViewController {
    
    let pvA = PatternView()
    let pvB = PatternView()
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        view.backgroundColor = .systemBlue
        
        let stack = UIStackView()
        stack.axis = .vertical
        stack.spacing = 8
        
        stack.translatesAutoresizingMaskIntoConstraints = false
        view.addSubview(stack)
        
        let g = view.safeAreaLayoutGuide
        NSLayoutConstraint.activate([
            stack.leadingAnchor.constraint(equalTo: g.leadingAnchor, constant: 40.0),
            stack.trailingAnchor.constraint(equalTo: g.trailingAnchor, constant: -40.0),
            stack.centerYAnchor.constraint(equalTo: g.centerYAnchor),
        ])
        
        [pvA, pvB].forEach { v in
            v.backgroundColor = .red
            v.numberOfBoxesPerRow = 7
            v.heightAnchor.constraint(equalTo: v.widthAnchor).isActive = true
            stack.addArrangedSubview(v)
        }
    }
    
    override func touchesBegan(_ touches: Set<UITouch>, with event: UIEvent?) {
        pvB.numberOfBoxesPerRow  = 1
    }
}

設定兩個模式視圖...都從 7 個框開始...每次點擊任意位置都會增加底部視圖中每行的框。

這是每行 21 個框的外觀（實際大小 - 非常大的影像）：

并放大 1600%：

注意紅色邊框...我將視圖的背景設定為紅色，因此我們可以看到必須插入網格以考慮非整數框的大小。

編輯 3

避免“模糊邊緣”的選項......

假設我們有一個視圖寬度，209我們想要10盒子。

這給了我們一個 20.9 的盒子寬度......這會導致“模糊的邊緣”——所以我們知道我們需要得到一個整數。

如果我們對它進行四舍五入，我們會得到21--21 x 10 = 210這將超過視圖的寬度。所以我們需要將它向下取整（floor()）。

所以...

選項1：

選項 2：

選項 3：

uj5u.com熱心網友回復：

我認為你的第一步是先畫一個大的紅色方塊，然后只在上面畫藍色的方塊。即使它不改變數量級，它也會節省一半的計算量。

編輯

注意：消耗時間的總是繪圖本身，很少是其他計算。所以這就是我們必須最小化的。

所以，我的第二步是通過創建一個復雜的 BezierPath 來替換繪制正方形，這使得所有正方形都變成一種形式，然后只顯示一次。我不知道是否可以僅以一種形式完成整體，但可以將兩列藍色方塊制成一種形式。

編輯 2

另外，我不明白為什么這里有兩個說明：

context?.addRect(rectnagle)
context?.fill([rectnagle])

不應該只有第二個就足夠了嗎？

標籤：IOS迅速核心图形画法cg上下文

上一篇：多個Lottie影片同時觸發

下一篇：如何根據字典值總結字串行？