使用畫布獲取轉換後的座標

Question

如果在畫布上使用像translate/rotate這樣的轉換函數，則所有點在傳遞給任何畫布函數時都會轉換。這就像一個魅力，但是還有一種方法可以簡單地獲得轉換後的點而不真正繪製？

這在調試時非常有用。我現在所能做的就是查看點在哪裏結束，但我似乎無法獲得計算出的變換後的座標。

那麼，假設我旋轉90度，是否有任何函數需要一個點（即(10, 0)）並給出了變換點（即(0, 10)）？

我基本意思是這樣的：

ctx.rotate(90 * Math.PI/180); 
ctx.transformed(10, 0); // would return (0, 10) as an array or something 

Answer 1

簡短的回答是「不是默認。」

你需要讓自己保持跟蹤當前的轉型，因爲沒有辦法得到它（人提交bugs，因爲這看起來很不必要的）。

像Cake.js這樣的圖書館，以及我們很多人都基本上覆制了轉換代碼以便跟蹤它，所以我們可以做這樣的事情。一旦你記住它，你需要的只是：

function multiplyPoint(point) { 
    return { 
    x: point.x * this._m0 + point.y * this._m2 + this._m4, 
    y: point.x * this._m1 + point.y * this._m3 + this._m5 
    } 
}