在 paper.js 中调整矩形“onResize”的大小

Question

好吧，我觉得自己非常愚蠢，但是尝试了半个小时左右，我放弃了。

如何通过 paper.js 中的onResize() 事件调整矩形的大小？ 我正在尝试使用this example，它已经带有onResize() 功能，但我没有成功（您可以通过单击右上角的Source 按钮来编辑示例）。

当前的resize函数如下所示：

function onResize() {
    text.position = view.center + [0, 200];
    square.position = view.center;
}

现在，我尝试通过添加以下内容使正方形在调整大小时达到视口高度的 80%：

square.size = [view.size.height / 100 * 80, view.size.height / 100 * 80];

（为了确定，我尝试了同样的静态数字）。

我试过了

square.size = new Size(width, height);

square.set(new Point(view.center), new Size(width, height)

square.height = height;
square.width = width;

可能还有 20 个我现在不记得的版本。 当我 console.logged square.size 它确实向我显示了新分配的值（有时？），但它仍然保持矩形的大小不变。

我该怎么做才能真正改变矩形的大小？

Answer 1

只是为了确保在窗口尺寸发生变化时调用onResize() 函数。这不是您可以更改矩形大小的唯一地方/它与矩形本身无关。

要更改矩形的大小，您必须查看文档。有一个scale(amount) 和一个expand(amount) 方法附加到Rectangle 对象。 size 只是一个属性，似乎没有自带setter。

因此，如果你想保持正方形和视图之间的比例，我想你可以保存以前的视图宽度，看看有什么区别并相应地缩放矩形 - 看看这个this 回答上一个问题。

或者，您可以在每次调整视图大小时重新初始化正方形并将 size 属性设置为视图宽度的 80%：

square = new Path.Rectangle({
    position: view.center,
    size: view.bounds.width * 0.8,
    parent: originals,
    fillColor: 'white'
});