PaperJS 无法正确调整画布中绘图的大小

Question

JSFiddle：https://jsfiddle.net/vt63Lxf7/4/

我在画布上使用 PaperJS，并指定了

resize

。

<canvas id="mycanvas" resize>

此外，画布在 CSS 中设置为宽度/高度为 100%：

#mycanvas {
    width: 100%;
    height: 100%;
}

绘图是取决于画布当前宽度/高度的圆形。如果您尝试在水平和垂直方向上调整 JSFiddle 渲染面板的大小，则绘图应该按比例增大/缩小，但这种情况并没有发生。获得新比例绘图的唯一方法是在新的 JSFiddle 渲染面板上刷新浏览器。

我在 Chrome 的 DevTools 中验证，当您拖动 JSFiddle 画布时，其宽度/高度会相应变化，因此 PaperJS 不会选择新的画布大小。

Answer 1

这就是它应该如何工作的。如果你想让圆圈相应地调整大小，只需添加固定的canvas.width和canvas.height即可。

Answer 2

尝试添加 data-paper-resize 属性。

<canvas height="100" width="100! data-paper-resize></canvas>