UIBezierPath 在 storyboard 和模拟器中绘制不同

Question

我正在创建一个自定义IBDesignable控件，我想在其中绘制一组正方形。 我有一个draw(_ rect:)方法，它执行以下操作：

override func draw(_ rect: CGRect) {

        // ... skipped ...
        
        for i in 0 ..< 7 {
            for j in 0 ... 6 {

                let x = Double(i) * (cellSize + space)
                let y = Double(j) * (cellSize + space)
                
                let rectangle = CGRect(x: x, y: y, width: cellSize, height: cellSize)
                let face = UIBezierPath(roundedRect: rectangle, cornerRadius: CGFloat(0))

                face.fill()
            }
        }
    }

当我将组件添加到界面生成器中时，这工作得很好，我可以看到方块。 但是当我在模拟器中运行它时，它会绘制矩形而不是正方形：

这似乎很奇怪，因为width等于height 。 即使我用线条画，它的工作方式也是一样的：

let face = UIBezierPath()
face.move(to: CGPoint(x: x, y: y))
face.addLine(to: CGPoint(x: x + cellSize, y: y))
face.addLine(to: CGPoint(x: x + cellSize, y: y + cellSize))
face.addLine(to: CGPoint(x: x, y: y + cellSize))
face.close()

或者如果我使用常规而不是圆角矩形：

let face = UIBezierPath(rect: rectangle)

有什么想法可能是错的吗？

Answer 1

问题在于时机。 视图是使用正方形绘制的，但随后会布置界面并且视图高度会变小一点或宽度会变大一点。 绘图被缓存了——你没有设置视图在边界改变时重绘——所以现在绘图稍微变形了，就好像一个比例变换已经应用到它上面，水平值与垂直值不同。 因此，正方形不再是正方形。