如何在畫布內顯示可拖動的文本元素？

我要的是顯示在網頁上（如span或p元素），當我雙擊它們，我可以把它變成一個input元素並更改其文本的文本元素。如何在畫布內顯示可拖動的文本元素？

每個元素都必須是可拖拽，所以當我雙擊一個元素時，我必須在文本元素的相同位置創建input元素。

什麼是做到這一點的最好方法是什麼？ Inside canvas？從我讀過的內容來看，不可能在畫布中放置HTML元素。

PS：我知道了HTML5 draggable財產，並已用它來測試。與JQueryUI相同，所以問題不在於DnD，而只是記錄可拖動元素位置的最佳方法。

來源

2013-03-09 thibaultcha

要糖衣片文本元素到畫布上，它使用一個框架（如cgSceneGraph）一個好主意。

不能使用HTML元素的canvas元素裏面，但是你可以通過創建一個文本輸入字段模擬這樣的行爲時，對文字的用戶點擊，並在同一個地方的文本添加文本輸入。

在cgSceneGraph中，我使用相同的技巧來顯示和操作畫布「內部」的web視圖（但是使用iFrame而不是文本輸入）。

下面是代碼開始：

this._textInput = document.createElement("INPUT"); 
this._textInput .style.position = "absolute"; 
document.body.appendChild(this._textInput); 

this._textInput.style.left = this.getAbsoluteLeft() + "px"; 
this._textInput.style.top = this.getAbsoluteTop(+ "px"; 
this._textInput.style.width = this.getAbsoluteWidth() + "px"; 
this._textInput.style.height = this.getAbsoluteHeight() + "px";

來源

2013-03-09 20:07:02

這似乎是一個很好的框架也從我讀過！（從您的鏈接到其網站）。我會盡量選擇最適合我需求的，謝謝。 – thibaultcha 2013-03-09 21:05:45

我目前正在嘗試cgSceneGraph，很好。我有兩個問題：當節點被拖動時，我可以刪除粉紅色邊框嗎？我該如何綁定textNode上的'dblclick'事件？通過擴展類？ – thibaultcha 2013-03-10 13:39:52

是的，你可以修改所選邊框的行爲與CGSGNode的那些4個屬性：'selectionHandleColor'，'selectionHandleSize'，'selectionLineColor'和'selectionLineWidth'。 v2還將包含一個委託渲染方法來繪製任何你想要的而不是方塊。每個節點都從CGSGNode進入，並從中獲取所有事件和屬性。所述雙擊事件（也作爲雙次觸摸，這是不被移動瀏覽器本身管理的）被稱爲任何其他事件：myTextNode.onDblClick =函數（事件）{ //event.node.xxx; };' – 2013-03-10 14:31:18

如何在畫布內顯示可拖動的文本元素？

回答

相關問題