如何在畫布上選擇並拖動一條線？

我現在正在研究一個繪畫應用程序。它使用HTML畫布。用戶可以在畫布上繪製形狀。如何在畫布上選擇並拖動一條線？

現在出現了一個問題。我想選擇我在畫布上繪製的線條。當它被選中時，我可以拖動它或刪除它。我怎樣才能實現它？任何好主意？

來源

2012-07-04 Shieffan

有一個名爲kinetic.js的庫，通過它你可以跟蹤在選擇特徵的畫布上繪製的形狀。

下面是一個例子：http://www.html5canvastutorials.com/kineticjs/html5-canvas-select-shapes-by-name-with-kineticjs/

來源

2012-07-04 08:10:12 rpabon

Thanx，我已經搜索並找到庫之前。我瀏覽了文檔，發現它不適合我正在使用的應用程序。現在我決定自己實施一個圖書館。所以，我只想知道實現這個功能的方式或指南。 – Shieffan

這可能是值得你看看這https://github.com/canvimation/canvimation.github.com包含了使用帆布繪圖應用程序的源代碼。

您應該注意，此應用程序正在重新編碼，但目前還沒有工作版本正在使用新的代碼。新的源代碼位於階段1分支。希望這個新代碼比舊代碼更容易理解，下面提到的代碼來自stage1分支。

基本上爲每個繪製的形狀創建一個形狀對象，其中包含所有關於形狀的數據，包括路徑數據和數據以及形狀周圍的矩形邊界。當點擊「boundarydrop」div時，函數checkBoundary被調用，並且關於shift鍵和光標位置的數據被傳遞。然後，對於每個形狀，首先檢查光標是否在形狀的邊界內，如果是，則進行更精確的檢查。對於封閉的形狀，檢查是否光標在形狀內，如果光標靠近路徑，則檢查是否爲開放形狀。

根據移位鍵是否被按下以及該形狀屬於哪個組，還有其他併發症。但基本知識在那裏。

功能的index.html

降檔
爲getPosition

在腳本中檢查出

/drawboundary.js

checkBoundary

ISIN

ISON

腳本/shape.js

形狀

應用的一個工作網絡版在http://canvimation.github.com/但使用主分支中的舊代碼，並有一些錯誤，但它w生病讓你瞭解應用程序的功能。

希望這是一些幫助

來源

2012-07-04 10:28:47 jing3142

如何在畫布上選擇並拖動一條線？

回答

相關問題