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