javascript - 在 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

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;
}

Answer 3

我解决这个问题的方法是在它们实例化后立即将一个名为 originalBounds 的新对象附加到 paper.js 形状。如果我需要使用它的大小，那么回到原来的大小就变得相当简单了。