具有大小与 width/height 属性的居中矩形

Question

设置.size 属性时，为什么矩形会居中？

var rect = new Rectangle();
rect.center = view.center;
rect.size = new Size(100, 200);
var path = new Path.Rectangle(rect);
path.fillColor = 'red';

为什么在设置.width和.height属性时，矩形不会居中？

var rect = new Rectangle();
rect.center = view.center;
rect.width = 100;
rect.height = 200;
var path = new Path.Rectangle(rect);
path.fillColor = 'red';

Answer 1

我也很好奇，看了下源码

发生这种情况是因为直接更新宽度/高度只会更改 bottomRight 点应该在的位置。你只告诉在X和Y方向“增长”。

另一方面，使用“.size”，这是 setter (method here) 不止于此。它 re-calculates X 和 Y 基于称为“_sx”和“_sy”的内部状态（默认值为 0.5 - 中心 - 作为值。More here）。

关键在这里：

...
if (sx) {
    this.x += (this.width - w) * sx;
}
if (sy) {
    this.y += (this.height - h) * sy;
}
...

当“sx”and/or“sy”为矩形中心的 0.5（默认）时。

具有大小与 width/height 属性的居中矩形

Centering rectangle with size vs width/height properties

paperjs