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

Question

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

我正在使用缩放来放大图像，但是将其重置为原始大小变得有问题，此刻我不得不克隆第二个圆来重置它，而不仅仅是使用单个形状，它必须更简单这样的方式。

到目前为止，我已经创建了一个jsFiddle来演示我的粗略代码，任何帮助将不胜感激。

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

Answer 1

Paperjs 不存储原始 Path，也不会记住为达到当前状态而应用的任何操作，因此很难重置到以前的状态。最简单的方法是使用this.scale您当前的代码正在计算的，当您想要重置时执行this.circle.scale(1/this.scale);使用这种方式 的jsfiddle。

仅供参考，这是缩放的代码路径：

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

所以最终的结果是_transformCoordinates()在圆中的四个部分中的每一个上调用它，它只是移动点坐标......以后没有任何东西可以“撤消”缩放。

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