Raphael累積與絕對縮放/旋轉/翻譯？

我想繪製一個Javascript的交互式地圖，使用拉斐爾做繁重的工作。Raphael累積與絕對縮放/旋轉/翻譯？

地圖背景是一個相當複雜的東西，包含網格，地圖元素，標籤等等。然後，我將繪製用戶實際使用的東西。由於背景非常複雜，我不希望每一幀都要重新渲染。所以，在繪製之後，我想重複使用這些繪圖元素，僅僅改變用戶平移，縮放等的背景的平移，旋轉和縮放。

不幸的是，我對拉斐爾的轉換原語感到困惑：他們我的行爲不像我期望的那樣。如果我調用scale()，縮放似乎適用於繪圖元素的原始大小;但translate()是累積的，所以它適用於以前的翻譯。 rotate()可以，因爲它有我可以設置的選項...

是否有可能做絕對翻譯？也就是說，能夠指定我的對象的新中心的絕對座標（通常是路徑）？如果不這樣做，是否跟蹤舊的位置，以便我可以應用三角洲時，我想將它移動到新的位置這樣做的合理方式？

或者我會更好嗎簡單地重新渲染整個事情的每一幀？（我看到了Raphael不擅長轉換複雜繪圖的建議，因爲大部分都是在Javascript中完成的;查看正在生成的SVG，我發現翻譯看起來已經回到了路徑數據中，證實了這一點......）

（順便說一句，FWIW我用這一切的GWT拉斐爾接口。）

來源

2011-03-05 David Given

如果用戶不與背景地圖交互，是否可以用靜態柵格圖像替換它？顯然它必須具有足夠高的分辨率才能處理最放大的狀態（這可能太大而無法在瀏覽器中提供和操作）。在某些情況下，這可能會更好，而不是讓客戶端呈現引擎嘗試繪製複雜的矢量路徑。我敢肯定有一些注意事項我沒有解決...... – peteorpeter 2011-05-03 22:09:55

不幸的是，用戶*確實*與它交互，我需要在飛行中更新它。事實上，我正在做的是有三層的堆疊：兩個畫布和一個背景光柵。我不再使用SVG，因爲它似乎太慢了;直觀地反映，每一幀畫布和重繪地圖似乎都更快。（這兩個畫布是我可以將地圖分成需要經常更新的東西以及不需要經常更新的東西，這很好。） – 2011-05-24 11:34:06

我已經成功地使用了拉斐爾 - ZPD插件。我不確定這是否會插入到GWT中 - 您可以查看它們的源代碼並將其調整爲您的使用案例。

項目：https://github.com/somnidea/raphael-zpd
來源：https://github.com/somnidea/raphael-zpd/blob/master/raphael-zpd.js

來源

2011-05-05 20:11:17 peteorpeter

您可以使用Element.attr設置絕對位置。只需更改x和y屬性：

myElement.attr("x", myX); 
myElement.attr("y", myY);

來源

2012-06-06 07:28:35

Raphael累積與絕對縮放/旋轉/翻譯？

回答

相關問題