ios - 覆盖 drawRect 不渲染

Question

我正在覆盖 drawRect，我看到我的断点被命中。我期待显示一系列红色方 block ，但我只看到背景颜色。

class GameViewController: UIViewController {
    var board: Board!

    override func viewDidLoad() {
        super.viewDidLoad()

        let w = UIScreen.main.bounds.width
        board = Board(frame:  CGRect(x: 0, y: view.frame.size.height - w - 45 , width: w, height: w))
        view.addSubview(board)
    }

}




import UIKit

class Board: UIView {
    var rows = [[Tile]]()
    var w: CGFloat!
    var squareSize: CGFloat!
    var tilesize: CGFloat!
    var sepsize: CGFloat!
    var halfsep: CGFloat!

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

        backgroundColor = .clear
            //UIColor(colorLiteralRed: 76/255, green: 89/255, blue: 89/255, alpha: 1)
        makeRows()

        configDrawing()
        setNeedsDisplay()
    }

    func configDrawing() {
        w = frame.size.width
        squareSize = w / 7
        tilesize = squareSize * 0.96
        sepsize = squareSize * 0.04
        halfsep = squareSize * 0.5
    }

    override func layoutSubviews() {
        super.layoutSubviews()
    }

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

    func makeRows() {
        for i in 0...6 {
            var row = [Tile]()
            for j in 1...7 {
                let tile = Tile(j, i)
                row.append(tile)
            }
            rows.append(row)
        }
    }

    func update(_ newRows: [[Tile]]) {
        rows = newRows
        //subview?
    }

    override func draw(_ rect: CGRect) {
        //render dividers
        let context = UIGraphicsGetCurrentContext();

        for i in 0..<rows.count {
            let row = rows[i]
            for j in 0..<row.count {
                let tile = rows[i][j]
                context?.beginPath()
                let x = CGFloat(j) //CGFloat(tile.x)
                let y = CGFloat(i) //CGFloat(tile.y)

                context?.setStrokeColor(red: 1, green: 0, blue: 0, alpha: 1)

                let ul = CGPoint(x: (x * squareSize) + halfsep, y: (y * squareSize) + halfsep)
                let ur = CGPoint(x: ((x + 1) * squareSize) - halfsep, y: (y * squareSize) + halfsep)
                let br = CGPoint(x: ((x + 1) * squareSize) - halfsep, y: ((y + 1) * squareSize) - halfsep)
                let bl = CGPoint(x: ((x * squareSize) + halfsep), y: ((y + 1) * squareSize) - halfsep)
                let corners = [ul, ur, br, bl]
                context?.addLines(between: corners)
                context?.strokePath()

            }
        }
//        CGPoint corners[4];

        //render tiles
    }
}

方 block 应该比整个空间略小，所以我应该看到一个 96% 大小的红色方 block ，其中 4% 由背景线作为网格填充。

我什么也没看到，为什么？

Answer 1

在您使用 halfsep 的任何地方，您都打算使用 sepsize。正如您所写的那样，整个矩形最终大小为零(它从四面八方插入其大小的一半；1-(1/2+1/2) = 0)。

这是您想要的代码:

let ul = CGPoint(x: (x * squareSize) + sepsize, y: (y * squareSize) + sepsize)
let ur = CGPoint(x: ((x + 1) * squareSize) - sepsize, y: (y * squareSize) + sepsize)
let br = CGPoint(x: ((x + 1) * squareSize) - sepsize, y: ((y + 1) * squareSize) - sepsize)
let bl = CGPoint(x: ((x * squareSize) + sepsize), y: ((y + 1) * squareSize) - sepsize)

您还需要关闭方框:

let corners = [ul, ur, br, bl, ul]

注意最后的(重复的)ul。

然而，这可以简化很多。有一种绘制矩形的内置方法，也有一种“缩小”(插入)矩形的内置方法。您也可以构建整个路径，然后对其进行一次描边，而不是重新开始路径。

override func draw(_ rect: CGRect) {
    //render dividers
    let context = UIGraphicsGetCurrentContext();

    let size = CGSize(width: squareSize, height: squareSize)
    context?.setStrokeColor(red: 1, green: 0, blue: 0, alpha: 1)
    context?.beginPath()
    for i in 0..<rows.count {
        let row = rows[i]
        for j in 0..<row.count {
//          let tile = rows[i][j] 
            let x = CGFloat(j) //CGFloat(tile.x)
            let y = CGFloat(i) //CGFloat(tile.y)

            let rect = CGRect(origin: CGPoint(x: x * squareSize, y: y * squareSize),
                              size: size)
                .insetBy(dx: sepsize, dy: sepsize)
            context?.addRect(rect)
        }
    }
    context?.strokePath()
    //render tiles
}