画布大小调整不改变宽度的路径在Paper.js



我试图得到的效果,当画布是调整大小,但路径绘制在它仍然有相同的宽度。然而,它改变宽度成比例的画布宽度。我试着重画路径,然而一个纸对象似乎记得旧的宽度和高度和比例路径,尽管我的新设置应用到路径。也许解决方案是缩放路径的宽度,但我希望有一个更温和的解决方案。


回答似乎最好的解决方案是缩放路径和形状的宽度和半径。当您在调整大小后绘制新路径时,您必须将旧的宽度和高度传递给新的点坐标。也许这不是一个温和的解决方案,但工作,我没有看到其他的

你可以告诉你的画布自动调整大小,见这里:

http://paperjs.org/tutorials/getting-started/working-with-paper-js/canvas-configuration

然后它改变它的大小,但它不应该缩放内容。你可以在paper.js网站上的所有示例中看到这一点,例如http://paperjs.org/examples/rounded-rectangles/

那些按比例缩放的是通过编程方式被告知这样做的。

如果你只是用CSS方式缩放画布对象,那么你最终会在鼠标事件中出现放大的像素和错误的偏移量。

如果你不想使用resize属性,但仍然需要调整画布的大小,你可以调用paper.view.setViewSize(width, height),它会为你做调整,尊重HiDPI设置和所有。

我可能有点晚了,但我最近有同样的问题,我通过在canvas元素上添加resize属性来解决它。

<canvas id="myCanvas" resize="true"></canvas>

不要忘记显式设置resize等于true(即resize="true")。

仅仅使用resize属性,或者使用任何其他值都不能达到这个效果。

最新更新