將形狀從HTML5畫布拖放到另一個

Question

考慮有兩個畫布。我想拖動一個放在畫布中的形狀並將其放到另一個畫布上。有可能嗎？

感謝理解我的問題。

Answer 1

這絕對有可能。不過，這並不會特別容易。我會給你基本的想法。你需要自己做數學和實現：

1. 找出源形狀邊界。
2. 獲取該像素數據，並用它來構建一箇舊的畫布元素。你會用這個來處理拖動。
3. 實現此臨時畫布的拖動邏輯。
4. 檢測目標畫布上的「拖放」，找出界限命中的位置。用可拖動的數據替換目標像素數據。
5. 擺脫可拖動的畫布。

我希望這有助於！

Answer 2

我可能不會理解你的問題，但不會將形狀放在你繪製的任何上下文上？

實施例：

context1.drawImage(...); 
context2.drawImage(...); 

簡單地改變上下文？

Answer 3

最簡單的做法是使用DOM代理對象，捕捉鼠標事件，覆蓋畫布。因爲在問題的代碼是非常複雜的使用庫考慮：

http://www.html5canvastutorials.com/kineticjs/html5-canvas-drag-and-drop-tutorial/

從畫布到畫布上仍需要弄清楚親手使用方能體驗，由於使用情況是非常罕見的東西，你需要動畫對象拖動不在畫布上時。絕對可能，但極其複雜。