画布拖放 [英] Canvas Drag and Drop
本文介绍了画布拖放的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我想将图片拖放到画布上，并使它们可拖动。到目前为止这是所有我可以找到，但一旦文本已被放入画布，它不再是draggable。
在此输入代码 http://jsfiddle.net/ranganadh/6WpKf/
请有人帮助我：D
如何在html画布上拖动文本：
- 使用jquery draggable拖动
- 将该文字的相关信息放入对象（文字，x& y位置，文字宽度和高度）
- 将文本对象添加到包含画布上所有文本的数组中
- 当用户开始拖动时，查找鼠标下的文本文本）
- 当用户拖动时，按照用户拖动的距离移动所选文字
这里是代码和演示： http://jsfiddle.net/m1erickson/hQTLa/
<！doctype html>
< html lang =en>
< head>
< style>
body {background-color：ivory; }
canvas {border：1px solid red;}
< / style>
< link rel =stylesheethref =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（）{
//获取对画布及其上下文的引用
var canvas = document.getElementById（canvas）;
var ctx = canvas.getContext（2d）;
ctx.font =16px helvetica;
//变量
//定义文本的一些文本对象画布
var texts = [];
//用于在画布上获取鼠标位置的变量
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将保存所选文本的索引
var selectedText = -1 ;
//使< 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;
//保存在文本中的对象中的文本信息[]
texts.push（{text：text，x：x，y：y，width：width，height：height}）;
将所有文本绘制到画布中
draw（）;
}
}）;
//清除画布绘制所有文本
function draw（）{
ctx.clearRect（0,0，canvas.width，canvas.height）;
for（var i = 0; i
ctx.fillText（text.text，text.x，text.y）;
}
}
//测试如果x，y在文本的边界框内[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）;
}
//处理mousedown事件
//通过texts []迭代并查看用户
// mousedown在其中之一
//如果是，将selectedText设置为该文本的索引
function handleMouseDown（e）{
e.preventDefault（）;
startX = parseInt（e.clientX-offsetX）;
startY = parseInt（e.clientY-offsetY）;
//把你的mousedown的东西放在这里
for（var i = 0; i
selectedText = 1;
}
}
}
//拖动
function handleMouseUp（e）{
e.preventDefault（）;
selectedText = -1;
}
//也可以拖动
function handleMouseOut（e）{
e.preventDefault（）;
selectedText = -1;
}
//处理mousemove事件
//计算自
以来拖动鼠标的距离//最后一个mousemove事件并移动所选文本
//的距离
function handleMouseMove（e）{
if（selectedText< 0）{return;}
e.preventDefault
mouseX = parseInt（e.clientX-offsetX）;
mouseY = parseInt（e.clientY-offsetY）;
//把你的mousemove东西放在这里
var dx = mouseX-startX;
var dy = mouseY-startY;
startX = mouseX;
startY = mouseY;
var text = texts [selectedText];
text.x + = dx;
text.y + = dy;
draw（）;
}
//监听鼠标事件
$（＃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>拖曳我down1< / li>
< li class =new-item>拖曳我down2< / li>
< li class =new-item>拖曳我下3< / li>
< / ul>
< canvas id =canvaswidth = 300 height = 300>< / canvas>
< / body>
< / html>
I want to drag and drop images into a canvas, and make them draggable. so far this is all i can find but once the text has been dropped into the canvas it is no longer draggable.
enter code herehttp://jsfiddle.net/ranganadh/6WpKf/
Please someone help me :D
解决方案
As @Zack Argyle says, any drawing on html canvas is just paint on a canvas--it can't be dragged.
How to drag text on html canvas:
- Use jquery draggable to drag a listitem onto the canvas (as you've already done)
- Put info about that text into an object (text, x & y position, text width & height)
- Add that text object to an array that holds all text on the canvas
- When the user starts a drag, find which text is under the mouse (the selected text)
- As the user drags, move the selected text by the distance the user has dragged
You must repaint all text on the canvas every time the user drags any text to a new location.
Here's code and a Demo: http://jsfiddle.net/m1erickson/hQTLa/
<!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>
这篇关于画布拖放的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
