HTML5 Canvas拖放项 [英] HTML5 Canvas Drag and Drop Item
问题描述
一直在努力工作。这是我的代码：
< canvas id =graphCanvasondrop =drop（event）ondragover =allowDrop ）height = 600 width = 1000 style =border：1px solid＃000000;>< / canvas>
< img id =img1src =./ images / arrow_up.svgdraggable =trueonmousedown =get_pos（event）ondragstart =drag（event）/>
< script type =text / javascript>
function init（）{
var canvas = document.getElementById（graphCanvas）;
var context = canvas.getContext（2d）;
context.lineWidth = 2;
}
var pos;
function allowDrop（ev）{
ev.preventDefault（）;
}
function get_pos（ev）{
pos = [ev.pageX，ev.pageY];
}
function drag（ev）{
ev.dataTransfer.setData（Text，ev.target.id）;
}
函数drop（ev）{
ev.preventDefault（）;
var offset = ev.dataTransfer.getData（text / plain）。split（'，'）;
var data = ev.dataTransfer.getData（Text）;
var img = canvas = document.getElementById（img1）;
var dx = pos [0] - img.offsetLeft;
var dy = pos [1] -img.offsetTop;
document.getElementById（graphCanvas）。getContext（2d）。drawImage（document.getElementById（data），ev.pageX - dx，ev.pageY - dy）;
}
< / script>
假设是一个可拖动的图像，我可以放到画布上。一旦图像在画布中，用户可以移动该图像。不幸的是，我似乎无法得到它的工作。
如何解决这个问题？
您可以使用html5 draggable在画布上放置图片元素。
您需要此信息才能在画布上绘制可拖动图像的副本： / p>
-
相对于可拖动图片的鼠标位置（请参见下面的mousedown）
-
drop（dropEvent.clientX& dropEvent.clientY）
-
可拖动元素的ID（在dragEvent.dataTransfer中存储和检索）
li>
相对于文档的画布位置（canvasElement.offsetLeft& canvasElement.offsetTop）。
有了这个信息，你可以drawImage这个draggable元素的副本：
function drop（ev）{
ev.preventDefault（）;
var dropX = ev.clientX-canvasLeft-startOffsetX;
var dropY = ev.clientY-canvasTop-startOffsetY;
var id = ev.dataTransfer.getData（Text）;
var dropElement = document.getElementById（id）;
//在拖放坐标处绘制拖动图像
ctx.drawImage（dropElement，dropX，dropY）;
}
下面是示例代码和演示： http://jsfiddle.net/m1erickson/WyEPh/
<！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; padding：20px; }
#graphCanvas {border：1px solid＃000000;}
< / style>
< script>
$（function（）{
var canvas = document.getElementById（graphCanvas）;
var ctx = canvas.getContext（2d）;
var canvasLeft = canvas.offsetLeft;
var canvasTop = canvas.offsetTop;
canvas.ondrop = drop;
canvas.ondragover = allowDrop;
//
var img = document.getElementById（img1）;
img.onmousedown = mousedown;
img.ondragstart = dragstart;
//这是鼠标在拖动元素中的位置
var startOffsetX，startOffsetY;
function allowDrop（ev）{
ev.preventDefault（）;
}
function mousedown {
startOffsetX = ev.offsetX;
startOffsetY = ev.offsetY;
}
function dragstart（ev）{
ev.dataTransfer.setData Text，ev.target.id）;
}
function drop（ev）{
ev.preventDefault（）;
var dropX = ev.clientX-canvasLeft-startOffsetX;
var dropY = ev.clientY-canvasTop-startOffsetY;
var id = ev.dataTransfer.getData（Text）;
var dropElement = document.getElementById（id）;
//在拖放坐标处绘制拖动图像
ctx.drawImage（dropElement，dropX，dropY）;
}
}）; // end $（function（）{}）;
< / script>
< / head>
< body>
< canvas id =graphCanvasheight = 300 width = 300>< / canvas>
< img id =img1src =house32x32.pngdraggable =true/>
< / body>
< / html>
但是，在画布上绘制的图像只是绘制像素，因此不能拖动
您可以使用画布库（例如KineticJS）来创建已保留的图片，在画布上绘制后可以拖动它们。
这里是一个使用KineticJS的示例，允许拖放的图片稍后在画布上拖动：
http://jsfiddle.net/m1erickson/LuZbV/
Been struggling to get this work work. Here's my code:
<canvas id="graphCanvas" ondrop="drop(event)" ondragover="allowDrop(event)" height=600 width=1000 style="border:1px solid #000000;"></canvas>
<img id="img1" src="./images/arrow_up.svg" draggable="true" onmousedown="get_pos(event)" ondragstart="drag(event)"/>
<script type="text/javascript">
function init() {
var canvas = document.getElementById("graphCanvas");
var context = canvas.getContext("2d");
context.lineWidth = 2;
}
var pos;
function allowDrop(ev) {
ev.preventDefault();
}
function get_pos(ev){
pos = [ev.pageX, ev.pageY];
}
function drag(ev) {
ev.dataTransfer.setData("Text",ev.target.id);
}
function drop(ev) {
ev.preventDefault();
var offset = ev.dataTransfer.getData("text/plain").split(',');
var data=ev.dataTransfer.getData("Text");
var img = canvas = document.getElementById("img1");
var dx = pos[0] - img.offsetLeft;
var dy = pos[1] - img.offsetTop;
document.getElementById("graphCanvas").getContext("2d").drawImage(document.getElementById(data), ev.pageX - dx, ev.pageY - dy);
}
</script>
It's suppose to be a draggable image that I can drop into a canvas. Once the image is in the canvas, the user can then move that image around. Unfortunately I can not seem to get it work. The image should appear if you drop it in near the top left, but the image appears near the bottom right.
How can I fix this problem?
You can use html5 draggable to drop an image element on canvas.
Then you can drawImage a copy of that image on the canvas.
You need this info to draw a copy of the draggable image on the canvas:
The mouse position relative to the draggable image (see mousedown below)
The canvas position relative to the document (canvasElement.offsetLeft & canvasElement.offsetTop).
The mouse position relative to the document at the drop ( dropEvent.clientX & dropEvent.clientY )
The Id of the draggable element (stored and retrieved in dragEvent.dataTransfer)
With this info you can drawImage a copy of the draggable element like this:
function drop(ev) {
ev.preventDefault();
var dropX=ev.clientX-canvasLeft-startOffsetX;
var dropY=ev.clientY-canvasTop-startOffsetY;
var id=ev.dataTransfer.getData("Text");
var dropElement=document.getElementById(id);
// draw the drag image at the drop coordinates
ctx.drawImage(dropElement,dropX,dropY);
}
Here's example code and a Demo: http://jsfiddle.net/m1erickson/WyEPh/
<!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; padding:20px; }
#graphCanvas{border:1px solid #000000;}
</style>
<script>
$(function(){
var canvas=document.getElementById("graphCanvas");
var ctx=canvas.getContext("2d");
var canvasLeft=canvas.offsetLeft;
var canvasTop=canvas.offsetTop;
canvas.ondrop=drop;
canvas.ondragover=allowDrop;
//
var img=document.getElementById("img1");
img.onmousedown=mousedown;
img.ondragstart=dragstart;
// this is the mouse position within the drag element
var startOffsetX,startOffsetY;
function allowDrop(ev) {
ev.preventDefault();
}
function mousedown(ev){
startOffsetX=ev.offsetX;
startOffsetY=ev.offsetY;
}
function dragstart(ev) {
ev.dataTransfer.setData("Text",ev.target.id);
}
function drop(ev) {
ev.preventDefault();
var dropX=ev.clientX-canvasLeft-startOffsetX;
var dropY=ev.clientY-canvasTop-startOffsetY;
var id=ev.dataTransfer.getData("Text");
var dropElement=document.getElementById(id);
// draw the drag image at the drop coordinates
ctx.drawImage(dropElement,dropX,dropY);
}
}); // end $(function(){});
</script>
</head>
<body>
<canvas id="graphCanvas" height=300 width=300></canvas>
<img id="img1" src="house32x32.png" draggable="true" />
</body>
</html>
However...images drawn on the canvas are just painted pixels and therefore not draggable
You can use a canvas library like KineticJS to create "retained" images that can be dragged after they are drawn on the canvas.
Here's a Demo using KineticJS to allow dropped images to later be dragged around the canvas:
http://jsfiddle.net/m1erickson/LuZbV/
这篇关于HTML5 Canvas拖放项的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
