【问题标题】:Canvas resizing without changing width of path in Paper.js在不改变 Paper.js 中路径宽度的情况下调整画布大小
【发布时间】:2014-09-04 03:17:07
【问题描述】:

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


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

【问题讨论】:

  • 路径的位置也有问题。调整为小尺寸后似乎画布具有更大的分辨率....并且我的路径将位置更改为与图像的相对位置不同。

标签: canvas path resize width paperjs


【解决方案1】:

我参加聚会可能有点晚了,但我最近遇到了同样的问题,我通过在 canvas 元素上添加 resize 属性解决了这个问题。

HTML

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

不要忘记明确resize 设置为等于true(即resize="true")。

只需存在 resize 属性,或者使用任何其他值都不会这样做。

【讨论】:

    【解决方案2】:

    您可以让画布自动调整大小,请参见此处:

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

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

    以编程方式告知扩展的那些。

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

    如果您不想使用调整大小属性,但仍需要调整画布大小,您可以通过调用 paper.view.setViewSize(width, height) 来实现,它会根据 HiDPI 设置和所有内容为您调整大小。

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 2016-12-18
      • 2011-11-15
      • 2013-07-20
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2017-08-11
      • 1970-01-01
      相关资源
      最近更新 更多