Javascript 画布拖放
我想将图像拖放到画布中，并使其可拖动。到目前为止，这是我能找到的全部，但一旦文本被放入画布，它就不再是可拖动的Javascript 画布拖放,javascript,jquery,html,jquery-ui,canvas,Javascript,Jquery,Html,Jquery Ui,Canvas,我想将图像拖放到画布中，并使其可拖动。到目前为止，这是我能找到的全部，但一旦文本被放入画布，它就不再是可拖动的 在此处输入代码 请有人帮帮我：D正如@Zack Argyle所说，html画布上的任何绘图都只是画布上的绘画——它无法拖动 如何在html画布上拖动文本： 使用jquery DragTable将listitem拖到画布上（正如您已经做的那样） 将有关该文本的信息放入对象（文本、x&y位置、文本宽度和高度） 将该文本对象添加到保存画布上所有文本的数组中 当用户开始拖动时，查找鼠标下的文
在此处输入代码请有人帮帮我：D正如@Zack Argyle所说，html画布上的任何绘图都只是画布上的绘画——它无法拖动 如何在html画布上拖动文本：
- 使用jquery DragTable将listitem拖到画布上（正如您已经做的那样）
- 将有关该文本的信息放入对象（文本、x&y位置、文本宽度和高度）
- 将该文本对象添加到保存画布上所有文本的数组中
- 当用户开始拖动时，查找鼠标下的文本（选定文本）
- 当用户拖动时，将选定文本移动用户已拖动的距离
正文{背景色：象牙；}
画布{边框：1px纯红；}
$（函数（）{
//获取对画布及其上下文的引用
var canvas=document.getElementById（“canvas”）；
var ctx=canvas.getContext（“2d”）；
ctx.font=“16px helvetica”；
//变数
//一些文本对象定义画布上的文本
var文本=[]；
//用于获取画布上鼠标位置的变量
var$canvas=$（“#canvas”）；
var canvasOffset=$canvas.offset（）；
var offsetX=canvasOffset.left；
var offsetY=canvasOffset.top；
var scrollX=$canvas.scrollLeft（）；
var scrollY=$canvas.scrollTop（）；
//保存上次鼠标位置的变量
//用于查看用户拖动鼠标的距离
//然后将文本移动该距离
var-startX；
var startY；
//此变量将保存所选文本的索引
var selectedText=-1；
//使可拖动
$（“li”）。可拖动({
助手：“克隆”
});
//放在画布上
$（“#画布”）.可拖放({
接受：“李”，
drop：函数（事件、用户界面）{
ctx.fillText（$（ui.draggable.clone（）.text（），ui.position.left-event.target.offsetLeft，ui.position.top-event.target.offsetTop）；
var text=$（ui.draggable.clone（）.text（）；
var x=ui.position.left-event.target.offsetLeft；
var y=ui.position.top-event.target.offsetTop；
var width=ctx.measureText（text）.width；
var高度=16；
//将此文本信息保存在文本[]中的对象中
push（{text:text，x:x，y:y，width:width，height:height}）；
//将所有文本绘制到画布上
draw（）；
}
});
//清除画布并绘制所有文本
函数绘图（）{
clearRect（0,0，canvas.width，canvas.height）；
对于（变量i=0；i=text.x&&
x=text.y-text.height&&
yYou无法将事件绑定到画布上绘制的对象（直接）。看看画布对象，你会发现里面没有可以单击的元素，即使在拖放之后也是如此。我想说的是，解决方法是将单击事件绑定到画布本身，并使用鼠标位置来确定单击的内容，然后在鼠标移动时重新绘制…或使用SVG。做得好。我觉得在这一点上，我可能会放弃使用画布只需使用绝对定位的元素。令人印象深刻的tho。@ZackArgyle，在你放弃画布之前，也许你想在拖动到画布上后对文本做一些有趣的事情；）画布上的文本变得模糊。有没有办法防止这种情况？
<!doctype html>
<html lang="en">
<head>
<style>
body{ background-color: ivory; }
canvas{border:1px solid red;}
</style>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script>
$(function() {
// get reference to the canvas and its context
var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
ctx.font = "16px helvetica";
// variables
// some text objects defining text on the canvas
var texts=[];
// variables used to get mouse position on the canvas
var $canvas=$("#canvas");
var canvasOffset=$canvas.offset();
var offsetX=canvasOffset.left;
var offsetY=canvasOffset.top;
var scrollX=$canvas.scrollLeft();
var scrollY=$canvas.scrollTop();
// variables to save last mouse position
// used to see how far the user dragged the mouse
// and then move the text by that distance
var startX;
var startY;
// this var will hold the index of the selected text
var selectedText=-1;
// make the <li> draggable
$("li").draggable({
helper: 'clone'
});
// drop on canvas
$("#canvas").droppable({
accept: "li",
drop: function(event,ui){
ctx.fillText($(ui.draggable).clone().text(),ui.position.left - event.target.offsetLeft,ui.position.top - event.target.offsetTop);
var text=$(ui.draggable).clone().text();
var x=ui.position.left - event.target.offsetLeft;
var y=ui.position.top - event.target.offsetTop;
var width=ctx.measureText(text).width;
var height=16;
// save this text info in an object in texts[]
texts.push({text:text,x:x,y:y,width:width,height:height});
// draw all texts to the canvas
draw();
}
});
// clear the canvas draw all texts
function draw(){
ctx.clearRect(0,0,canvas.width,canvas.height);
for(var i=0;i<texts.length;i++){
var text=texts[i];
ctx.fillText(text.text,text.x,text.y);
}
}
// test if x,y is inside the bounding box of texts[textIndex]
function textHittest(x,y,textIndex){
var text=texts[textIndex];
return(x>=text.x &&
x<=text.x+text.width &&
y>=text.y-text.height &&
y<=text.y);
}
// handle mousedown events
// iterate through texts[] and see if the user
// mousedown'ed on one of them
// If yes, set the selectedText to the index of that text
function handleMouseDown(e){
e.preventDefault();
startX=parseInt(e.clientX-offsetX);
startY=parseInt(e.clientY-offsetY);
// Put your mousedown stuff here
for(var i=0;i<texts.length;i++){
if(textHittest(startX,startY,i)){
selectedText=i;
}
}
}
// done dragging
function handleMouseUp(e){
e.preventDefault();
selectedText=-1;
}
// also done dragging
function handleMouseOut(e){
e.preventDefault();
selectedText=-1;
}
// handle mousemove events
// calc how far the mouse has been dragged since
// the last mousemove event and move the selected text
// by that distance
function handleMouseMove(e){
if(selectedText<0){return;}
e.preventDefault();
mouseX=parseInt(e.clientX-offsetX);
mouseY=parseInt(e.clientY-offsetY);
// Put your mousemove stuff here
var dx=mouseX-startX;
var dy=mouseY-startY;
startX=mouseX;
startY=mouseY;
var text=texts[selectedText];
text.x+=dx;
text.y+=dy;
draw();
}
// listen for mouse events
$("#canvas").mousedown(function(e){handleMouseDown(e);});
$("#canvas").mousemove(function(e){handleMouseMove(e);});
$("#canvas").mouseup(function(e){handleMouseUp(e);});
$("#canvas").mouseout(function(e){handleMouseOut(e);});
}); // end $(function(){});
</script>
</head>
<body>
<ul id="drag">
<li class="new-item">Drag me down1</li>
<li class="new-item">Drag me down2</li>
<li class="new-item">Drag me down3</li>
</ul>
<canvas id="canvas" width=300 height=300></canvas>
</body>
</html>