在當前鼠標位置在畫布內添加一個Textarea

Question

我想在畫布上添加一些文字信息。當我點擊畫布上的鼠標時，它應該在當前鼠標位置顯示一個文本區域。應該也可以選擇，拖動和旋轉textarea.How可以使用HTML5 canvas和javascript實現這個功能嗎？的代碼

Answer 1

下面的代碼是由dreame4提供的，適用於允許拖動（jsfiddle）。

var canvas = document.getElementById("c"), 
    textarea = null; 

function mouseDownOnTextarea(e) { 
    var x = textarea.offsetLeft - e.clientX, 
     y = textarea.offsetTop - e.clientY; 
    function drag(e) { 
     textarea.style.left = e.clientX + x + 'px'; 
     textarea.style.top = e.clientY + y + 'px'; 
    } 
    function stopDrag() { 
     document.removeEventListener('mousemove', drag); 
     document.removeEventListener('mouseup', stopDrag); 
    } 
    document.addEventListener('mousemove', drag); 
    document.addEventListener('mouseup', stopDrag); 
} 
canvas.addEventListener('click', function(e) { 
    if (!textarea) { 
     textarea = document.createElement('textarea'); 
     textarea.className = 'info'; 
     textarea.addEventListener('mousedown', mouseDownOnTextarea); 
     document.body.appendChild(textarea); 
    } 
    var x = e.clientX - canvas.offsetLeft, 
     y = e.clientY - canvas.offsetTop; 
    textarea.value = "x: " + x + " y: " + y; 
    textarea.style.top = e.clientY + 'px'; 
    textarea.style.left = e.clientX + 'px'; 
}, false);​ 

然而，旋轉需要相當不同的，更復雜的解決方案 - 使用context.fillText使畫面內的文本，然後看看如何將它旋轉this post。您需要明確跟蹤文本區域的位置和旋轉角度。 canvas元素的事件偵聽器將不得不檢查鼠標是否在文本中，在這種情況下，它會開始拖動，或者在外部，在這種情況下，它會創建/移動文本。

Answer 2

實施例，處理點擊座標帆布和顯示文本區域：

HTML

<canvas id="c" width="200" height="200"></canvas> 

JS：

var canvas = document.getElementById("c"), 
    textarea = null; 

canvas.addEventListener('click', function(e) { 
    if(!textarea) { 
     textarea = document.createElement('textarea'); 
     textarea.className = 'info'; 
     document.body.appendChild(textarea); 
    } 
    var x = e.clientX - canvas.offsetLeft, 
    y = e.clientY - canvas.offsetTop; 
    textarea.value = "x: " + x + " y: " + y; 
    textarea.style.top = e.clientY + 'px'; 
    textarea.style.left = e.clientX + 'px'; 
}, false); 

的功能的其餘部分是比較複雜的。可能你想使用外部庫，如jQuery UI。

編輯：在樣式中缺少'px'。謝謝Stuart。