Javascript HTML5画布拖放多个文本_Javascript_Drag And Drop_Html5 Canvas

Javascript HTML5画布拖放多个文本

javascript html5-canvas

Javascript HTML5画布拖放多个文本,javascript,drag-and-drop,html5-canvas,Javascript,Drag And Drop,Html5 Canvas,我有一个应用程序，用户可以添加标题，我唯一的问题是我有拖拽多个文本的问题。对于通常的mousedown、mousemove、mouseup事件，我只能拖放一个文本，我希望能够拖放多个文本，但是我没有明确的方法来解决这个问题。任何帮助都将不胜感激更新：我的代码是混乱的，当我试图拖动这两个文本，但我会张贴它无论如何谢谢 <html> <body> <canvas id = 'canvas'></canvas> <textarea id = '

我有一个应用程序，用户可以添加标题，我唯一的问题是我有拖拽多个文本的问题。对于通常的mousedown、mousemove、mouseup事件，我只能拖放一个文本，我希望能够拖放多个文本，但是我没有明确的方法来解决这个问题。任何帮助都将不胜感激

更新：我的代码是混乱的，当我试图拖动这两个文本，但我会张贴它无论如何

谢谢

<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>


addEventListener（'load'，initCanvas，false）；
函数initCanvas（e）
{
canvas=document.getElementById（'canvas'）；
context=canvas.getContext（'2d'）；
高度=500；
画布宽度=500；
鼠标={x:0，y:0}；
拖动=假；
topCap=document.getElementById（'topCaption'）；
bottomCap=document.getElementById（'bottomCaption'）；
topX=100；//顶部x位置
topY=100；//顶部y位置
botX=300；//底部x位置
botY=300；//底部y位置
canvas.addEventListener（'mousemove'，mousemove，false）；
canvas.addEventListener（'mouseup'，mouseup，false）；
canvas.addEventListener（'mousedown'，mousedown，false）；
window.addEventListener（'keyup'，keyup，false）；
返回设置间隔（键控，10）
}
函数clear（）
{
clearRect（0,0，canvas.width，canvas.height）；
}
函数文本（标题，x，y）
{
context.fillStyle='#000'；
context.font='45px Impact'；//'bold 45px Impact'；
context.textAlign='center'；
context.lineCap='round'；
context.lineJoin='round'；
context.fill（）；
stroke（）；
填充文本（标题，x，y）；
};
函数MouseMove（事件）{
mouse.x=event.pageX-canvas.offsetLeft；
mouse.y=event.pageY-canvas.offsetTop；
如果（拖动）
{
lineTo（mouse.x，mouse.y）；
}
}
函数MouseDown（事件）
{
拖动=真；
setInterval（函数（）{
topX=鼠标.x；
topY=mouse.y；
botX=鼠标.x；
botY=老鼠。y；
},10)
}
函数MouseUp（事件）
{
如果（拖动）
{
拖动=假；
}
}
功能键控（事件）
{
清除（）；
文本（topCap.value.toUpperCase（），topX，topY）；
文本（bottomCap.value.toUpperCase（），botX，botY）；
}

听起来您通过听鼠标事件了解了基本的拖动，下面是拖动多个项目的方法概述：

听mousedown、mouseup和mousemove

如果在文本边界框中使用获得mousedown+mouseup，听起来像是通过聆听鼠标事件来理解基本拖动，那么下面是拖动多个项目的方法的概要：

听mousedown、mouseup和mousemove

如果你在一个文本框中得到mousedown+mouseup，请提供一些代码供我们查看，以及你尝试的代码。如何选择文本？您是如何选择多个文本的？请提供一些代码供我们查看，以及您尝试的代码。如何选择文本？如何选择多个文本？