현재 마우스 위치에서 캔버스 내부에 Textarea 추가

Question

캔버스에 텍스트 정보를 추가하고 싶습니다. 캔버스의 한 지점을 마우스로 클릭하면 현재 마우스 위치에 텍스트 영역이 표시됩니다. 그것은 또한 선택, 드래그 앤 텍스트 영역을 회전 가능해야합니다. 어떻게 HTML5 캔버스와 자바 스크립트를 사용 하여이 기능을 얻을 수 있습니까? 좌표 캔버스와 디스플레이 텍스트 영역을 클릭 처리 코드

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를 참조하십시오. 텍스트 영역의 회전 위치와 각도를 명시 적으로 추적해야합니다. 캔버스 요소의 이벤트 리스너는 마우스가 텍스트 내에 있는지 여부를 확인해야합니다.이 경우 텍스트가 드래그를 시작하거나 외부에서 텍스트를 작성/이동합니다.

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과 같은 외부 라이브러리를 사용하고 싶을 것입니다.

EDITED : 스타일에 'px'가 없습니다. 스튜어트에게 감사드립니다.