在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()功能将圆圈缩小到任意大小...例如，您可以在创建Circle后立即保存边界矩形，然后将fitBounds恢复为那个大小。

Answer 2

如果您不希望与TypeError: Cannot read property 'setDeleted' of undefined一起保持转换，请设置item.applyMatrix = false。

例如，以下代码线性地（即＆＃34;附加地＆＃34;）动画item：

item.scaling

Answer 3

我解决这个问题的方法是在实例化后立即将一个名为originalBounds的新对象附加到paper.js形状。如果我需要玩它的大小，回来它的原始变得相当微不足道。