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

Question

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

我使用缩放来增大图像大小，但将其重置为原始大小已成问题，此刻我采取了克隆第二个圆来重置它而不是仅使用单个形状的方法，做一个更简单的方法来做到这一点。

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

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

Answer 1

Paperjs不存储原始路径，也没有记住，已应用于达到目前的状态的任何操作，因此它可能很难恢复到以前的状态。最简单的方法是使用您当前的代码正在计算的this.scale，以及您想要重置的时间this.circle.scale(1/this.scale);这是一个jsfiddle。

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

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

所以最终的结果是_transformCoordinates()在圆圈中的四个段上都被调用，它只是移动点坐标......没有任何东西被记住，以便稍后“撤消”缩放。

除了自己记住缩放比例外，还可以使用Path.fitBounds()函数将圆圈缩小为任意大小......例如，您可以在创建圆圈后立即保存边界矩形，然后再将fitBounds恢复为该大小。

Answer 2

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

Answer 3

设置item.applyMatrix = false如果您不想与item一起保持转换。

例如，下面的代码线（即“加法”）动画item.scaling：

var item = new Path.Rectangle({ 
    point: [75, 75], 
    size: [5, 5], 
    strokeColor: 'black', 
    applyMatrix: false 
}); 

function onFrame(event) { 
    item.scaling += 0.1; 
}