如何旋轉基於矢量的地圖？

我需要使用CANVAS旋轉基於矢量地圖繪製的地圖。我將在瀏覽器中運行的導航系統中使用此地圖。是否有任何簡單的方法可以遵循？如何旋轉基於矢量的地圖？

來源

2013-08-28 mekafe

你可以用context.rotate(angle)方法做到這一點。此方法不會影響畫布上當前繪製的內容，而是會影響設置旋轉後將繪製的所有內容。角度以弧度表示，所以整圓爲pi * 2 = 6.28318530718。

旋轉將圍繞畫布當前內部座標系的0：0點。我建議您使用context.translate(x, y)將其放置在畫布的中心而不是左上角。

上繪製一個不可見的背景畫布地圖
組變換可見畫布到旋轉中心
設置旋轉上的可見畫布
使用drawImage上繪製可見畫布到可見的一個（當您使用drawImage時，源代碼也可以是另一個畫布）。此drawImage調用將受您設置的旋轉和平移的影響。

如果您可以控制繪製原始地圖的時間和方式，則可以在繪製原始地圖之前將變換和旋轉應用到原始畫布。

來源

2013-08-28 14:30:17 Philipp

謝謝菲利普，我會盡力的。 – mekafe

我實施了前三步，但我不能做最後一步，你能幫我嗎？這是我的源代碼： var visibleCanvas = document.getElementById（「VisibleCanvas」）; var visibleCtx = visibleCanvas.getContext（「2d」）; visibleCtx.translate（400,300）; visibleCtx.rotate（Math.PI）; visibleCtx.drawImage（c，-400，-300,800,600）; c是我的隱藏畫布。 – mekafe

@mekafe請創建一個新問題，在那裏發佈你的代碼（最好是作爲一個工作[jsfiddle]（http://jsfiddle.net）），並解釋你的卡住的地方（你期望發生什麼以及發生什麼）。 – Philipp

如何旋轉基於矢量的地圖？

回答

相關問題