在当前鼠标位置的画布内添加一个 Textarea答案

【问题标题】：Add a Textarea inside the canvas at the current mouse position在当前鼠标位置的画布内添加一个 Textarea
【发布时间】：2012-11-28 17:19:48
【问题描述】：

我想在画布上添加一些文本信息。当我在画布的某个点上单击鼠标时，它应该在当前鼠标位置显示一个文本区域。应该还可以选择、拖动和旋转文本区域。如何使用 HTML5 画布和 javascript 实现此功能？

【问题讨论】：

请显示一些代码。你知道演习。

标签： javascript jquery html html5-canvas

【解决方案1】：

处理点击画布并显示带有坐标的文本区域的代码示例：

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”。谢谢斯图尔特。

【讨论】：

样式设置中需要+ 'px'

【解决方案2】：

下面的代码是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 元素的事件监听器必须检查鼠标是否在文本内，在这种情况下它开始拖动，或者在外部，在这种情况下它创建/移动文本。

【讨论】：