1
사용자가 캡션을 추가 할 수있는 응용 프로그램이 있는데 문제는 여러 텍스트를 끌어서 놓는 데 문제가 있다는 것입니다. 일반적인 mousedown, mousemove, mouseup 이벤트를 사용하면 하나의 텍스트 만 드래그 앤 드롭 할 수 있지만 여러 텍스트를 드래그 앤 드롭하는 기능을 원하지만이 문제에 대한 명확한 접근법은 없습니다. 어떤 도움이라도 대단히 감사 할 것입니다.HTML5 캔버스 여러 텍스트 끌어서 놓기
업데이트 : 두 텍스트를 모두 드래그하려고 할 때 코드가 엉망이지만 어쨌든 게시합니다.
감사
<html>
<body>
<canvas id = 'canvas'></canvas>
<textarea id = 'topCaption'></textarea>
<textarea id = 'bottomCaption'></textarea>
<script type = 'text/javascript'>
window.addEventListener('load',initCanvas,false);
function initCanvas(e)
{
canvas = document.getElementById('canvas');
context = canvas.getContext('2d');
canvas.height = 500;
canvas.width = 500;
mouse = {x:0,y:0};
dragging = false;
topCap = document.getElementById('topCaption');
bottomCap = document.getElementById('bottomCaption');
topX = 100; //top x position
topY = 100; //top y position
botX = 300; //bottom x position
botY = 300; //bottom y position
canvas.addEventListener('mousemove',MouseMove,false);
canvas.addEventListener('mouseup',MouseUp,false);
canvas.addEventListener('mousedown',MouseDown,false);
window.addEventListener('keyup',KeyUp,false);
return setInterval(keyup,10)
}
function clear()
{
context.clearRect(0,0,canvas.width,canvas.height);
}
function text(Caption,x,y)
{
context.fillStyle = '#000';
context.font = '45px Impact'; //'bold 45px impact';
context.textAlign = 'center';
context.lineCap = 'round';
context.lineJoin = 'round';
context.fill();
context.stroke();
context.fillText(Caption,x,y);
};
function MouseMove(event){
mouse.x = event.pageX - canvas.offsetLeft;
mouse.y = event.pageY - canvas.offsetTop;
if(dragging)
{
context.lineTo(mouse.x,mouse.y);
}
}
function MouseDown(event)
{
dragging = true;
setInterval(function(){
topX = mouse.x;
topY = mouse.y;
botX = mouse.x;
botY = mouse.y;
},10)
}
function MouseUp(event)
{
if(dragging)
{
dragging = false;
}
}
function KeyUp(event)
{
clear();
text(topCap.value.toUpperCase(),topX,topY);
text(bottomCap.value.toUpperCase(),botX,botY);
}
</script>
</body>
</html>
우리가 살펴볼 코드와 시도한 코드를 제공해주십시오. 텍스트는 어떻게 선택됩니까? 여러 텍스트를 어떻게 선택할 수 있습니까? –