编程语言
首页 > 编程语言> > javascript – 在PaperJS中缩放后重置形状大小的最有效方法是什么

javascript – 在PaperJS中缩放后重置形状大小的最有效方法是什么

作者:互联网

我试图在Paper JS中创建一个非常简单的类似信标的动画.这个想法是,一个圆开始非常小,完全不透明,然后变得更大,更透明,直到它消失,动画重新开始.

我正在使用缩放来使图像变大但将其重置为原始尺寸变得有问题,而且目前我已经使用克隆第二个圆来重置它而不是仅使用单个形状,必须更简单这样做的方式.

到目前为止,我已经创建了一个jsFiddle来演示我的粗略代码,任何帮助都会受到赞赏.

http://jsfiddle.net/colethecoder/Y3S9n/1

解决方法:

Paperjs不存储原始路径,也不记得已应用于达到当前状态的任何操作,因此可能难以重置为先前状态.最简单的方法是使用当前代码正在计算的this.scale以及何时重置make this.circle.scale(1 / this.scale);这是一个jsfiddle.

仅供参考,这是缩放的代码路径:

> Item.scale()
> Item.transform()
> Item.apply()
> Path._apply()
> Segment._transformCoordinates()

因此,最终结果是在圆圈中的四个段中的每一个上调用_transformCoordinates(),并且它只是移动点坐标……没有记住以后“撤消”缩放.

或者自己记住刻度,可以使用Path.fitBounds()函数将圆缩小到任意大小…例如,您可以在创建圆后立即保存边界矩形,然后将fitBounds恢复到该大小.

标签:javascript,canvas,paperjs
来源: https://codeday.me/bug/20190613/1234765.html