将其拖放到canvas元素后拖动图像 [英] drag image after dropping it in canvas element
问题描述
要执行拖动& drop功能，使用canvas元素，我必须使用这一行实际绘制目标元素中的图像。
ctx.drawImage （imgElement，dropX，dropY）;
因为是绘图，我发现再次拖动它的困难。
我在这个代码的基础上工作： http://jsfiddle.net/m1erickson/cyur7/
我必须进行哪些修改，
请记住，画布只是一个位图。
一旦您的图片在画布上绘制，就无法重新定位。
要重新定位图片，必须清除画布并重新绘制
要移动和重绘图片，您需要至少保存有关图片的基本信息：
var image1 = {
x：50，
y：30，
image：imageObject
}
您可以让用户通过收听鼠标事件在画布上拖动图片
-
在mousedown中，检查鼠标是否在图像上。
在mousemove中，添加用户从上次鼠标移动到图像x，y位置时拖动的距离。
在鼠标悬停时，停止拖动。代码和演示： http://jsfiddle.net/m1erickson/L3VjK/
<！doctype html>
< html>
< head>
< link rel =stylesheettype =text / cssmedia =allhref =css / reset.css/> <！ - reset css - >
< script type =text / javascriptsrc =http://code.jquery.com/jquery.min.js>< / script>
< style>
body {background-color：ivory; }
#canvas {border：1px solid red;}
< / style>
< script>
$（function（）{
var canvas = document.getElementById（canvas）;
var ctx = canvas.getContext（2d）;
var canvasOffset = $（＃canvas）。offset（）;
var offsetX = canvasOffset.left;
var offsetY = canvasOffset.top;
var isDown = false;
var startX;
var startY;
var imgX = 50;
var imgY = 50;
var imgWidth，imgHeight;
var img = new Image （）; img.onload = start; img.src =https://dl.dropboxusercontent.com/u/139992952/stackoverflow/house32x32transparent.png;
function start（）{
imgWidth = img.width;
imgHeight = img.height;
ctx.drawImage（img，imgX，imgY）;
}
function handleMouseDown ）{
e.preventDefault（）;
startX = parseInt（e.clientX-offsetX）;
startY = parseInt（e.clientY-offsetY）;
//把你的mousedown东西放在这里
if（startX> = imgX&&& startX< = imgX + imgWidth&& startY> = imgY&& startY< = imgY + imgHeight）{
isDown = true;
}
}
function handleMouseUp（e）{
e.preventDefault（）;
isDown = false;
}
function handleMouseOut（e）{
e.preventDefault（）;
isDown = false;
}
function handleMouseMove（e）{
if（！isDown）{return;}
e.preventDefault
mouseX = parseInt（e.clientX-offsetX）;
mouseY = parseInt（e.clientY-offsetY）;
//把你的mousemove东西放在这里
if（！isDown）{return;}
imgX + = mouseX-startX;
imgY + = mouseY-startY;
startX = mouseX;
startY = mouseY;
ctx.clearRect（0,0，canvas.width，canvas.height）;
ctx.drawImage（img，imgX，imgY）;
}
$（＃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>
< canvas id =canvaswidth = 300 height = 300>< / canvas>
< / body>
< / html>
To perform drag & drop functionality, with canvas element, I have to actually draw the image in the element of destination using this line,
ctx.drawImage(imgElement,dropX, dropY);
Because it's drawed, I found a difficulty in dragging it again. It's like I can't make it move anymore
I'm working on the basis of this code here : http://jsfiddle.net/m1erickson/cyur7/
What modifications do I have to make, in order to drag again a dropped image?
Keep in mind that canvas is just a bitmap.
Once your images are drawn on the canvas they cannot be repositioned.
To reposition your image, you must clear the canvas and redraw your image in a new position.
To move and redraw your image, you will need to save at least this basic information about the image:
var image1={
x:50,
y:30,
image:imageObject
}
You can let the user drag your image around the canvas by listening to mouse events
In mousedown, check if the mouse is over the image. If yes, start the drag.
In mousemove, add the distance the user dragged since the last mousemove to the images x,y position.
In mouseup, stop the drag.
Here's example code and a Demo: http://jsfiddle.net/m1erickson/L3VjK/
<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css -->
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<style>
body{ background-color: ivory; }
#canvas{border:1px solid red;}
</style>
<script>
$(function(){
var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
var canvasOffset=$("#canvas").offset();
var offsetX=canvasOffset.left;
var offsetY=canvasOffset.top;
var isDown=false;
var startX;
var startY;
var imgX=50;
var imgY=50;
var imgWidth,imgHeight;
var img=new Image();img.onload=start;img.src="https://dl.dropboxusercontent.com/u/139992952/stackoverflow/house32x32transparent.png";
function start(){
imgWidth=img.width;
imgHeight=img.height;
ctx.drawImage(img,imgX,imgY);
}
function handleMouseDown(e){
e.preventDefault();
startX=parseInt(e.clientX-offsetX);
startY=parseInt(e.clientY-offsetY);
// Put your mousedown stuff here
if(startX>=imgX && startX<=imgX+imgWidth && startY>=imgY && startY<=imgY+imgHeight){
isDown=true;
}
}
function handleMouseUp(e){
e.preventDefault();
isDown=false;
}
function handleMouseOut(e){
e.preventDefault();
isDown=false;
}
function handleMouseMove(e){
if(!isDown){return;}
e.preventDefault();
mouseX=parseInt(e.clientX-offsetX);
mouseY=parseInt(e.clientY-offsetY);
// Put your mousemove stuff here
if(!isDown){return;}
imgX+=mouseX-startX;
imgY+=mouseY-startY;
startX=mouseX;
startY=mouseY;
ctx.clearRect(0,0,canvas.width,canvas.height);
ctx.drawImage(img,imgX,imgY);
}
$("#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>
<canvas id="canvas" width=300 height=300></canvas>
</body>
</html>
这篇关于将其拖放到canvas元素后拖动图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
