具有大小与宽度/高度属性的居中矩形

【问题标题】：Centering rectangle with size vs width/height properties具有大小与宽度/高度属性的居中矩形
【发布时间】：2018-03-07 21:55:31
【问题描述】：

在设置 .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';

【问题讨论】：

标签： paperjs

【解决方案1】：

我也很好奇，看了看源代码。

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

另一方面，使用“.size”，它是一个 setter (method here) 不仅如此。它根据名为“_sx”和“_sy”的内部状态重新计算 X 和 Y（默认值为 0.5 - 中心。More here）。

关键在这里：

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

当“sx”和/或“sy”为 0.5 时，矩形中心（默认）。

【讨论】：