UIBezierPath 在故事板和模拟器中绘制不同

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

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