javascript - キャンバス内の現在のマウス位置に Textarea を追加します

Question

キャンバスにテキスト情報を追加したいと思います。キャンバスのポイントでマウスをクリックすると、現在のマウス位置にテキスト領域が表示されます。テキストエリアを選択、ドラッグ、回転することもできるはずです.HTML5キャンバスとJavaScriptを使用してこの機能を実現するにはどうすればよいですか?

Answer 1

以下のコードは、ドラッグ ( jsfiddle ) を許可するように調整された、dreame4 によって提供されたものです。

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を参照してください。テキスト領域の位置と回転角度を明示的に追跡する必要があります。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」がありません。ありがとうスチュアート。