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

Question

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

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

当前的调整大小函数如下所示：

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

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

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

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

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

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

Resize rectangle "onResize" in paper.js