如何在画布内显示可拖动的文本元素？

Question

我要的是显示在网页上（如span或p元素），当我双击它们，我可以把它变成一个input元素并更改其文本的文本元素。

每个元素都必须是可拖拽，所以当我双击一个元素时，我必须在文本元素的相同位置创建input元素。

什么是做到这一点的最好方法是什么？ Inside canvas？从我读过的内容来看，不可能在画布中放置HTML元素。

PS：我知道了HTML5 draggable财产，并已用它来测试。与JQueryUI相同，所以问题不在于DnD，而只是记录可拖动元素位置的最佳方法。

Answer 1

要糖衣片文本元素到画布上，它使用一个框架（如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";