[英]Custom made Drag and Drop canvas in HTML5
I made an little test to check out HTML 5. 我做了一些测试以检查HTML 5。
In my test I have a <canvas>
and want to drag this one. 在我的测试中,我有一个<canvas>
并想拖动它。 But I have a little problem, my canvas is kinda shaking. 但是我有一个小问题,我的画布有点发抖。
Could someone help me plz? 有人可以帮助我吗?
Fiddle: http://jsfiddle.net/wnxFK/ 小提琴: http : //jsfiddle.net/wnxFK/
Calculating layerX and layerY once at the start of the drag helps create a smoother effect: 在拖动开始时一次计算layerX和layerY有助于创建更平滑的效果:
http://jsfiddle.net/jB5YN/ http://jsfiddle.net/jB5YN/
So at the start you have: 因此,一开始您有:
var mousedown = false;
var layerX = 0;
var layerY = 0;
function onMouseDown(event)
{
var canvas = document.getElementById("myCanvas");
mousedown = true;
layerX = event.layerX;
layerY = event.layerY;
// Code
drag(event);
}
And when you come to drag you have: 当您拖动时,您有:
function drag(event)
{
var clientX = ('clientX' in event) ? (event.clientX) : (event.offsetX);
var clientY = ('clientY' in event) ? (event.clientY) : (event.offsetY);
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext('2d');
var x = (event.clientX- layerX);
var y = (event.clientY- layerY);
var log = document.getElementById("log");
log.innerHTML = "x: " + x + " y: " + y;
canvas.style.left = x + 'px';
canvas.style.top = y + 'px';
}
Also, I've moved the events to hook up only once at the start, just feels a bit neater to me! 另外,我已将事件移动为仅在开始时进行一次连接,对我来说有点整洁!
Update 更新资料
Just for a complete answer, if you want to avoid layerX and layerY which seem to be in the process of being deprecated in webkit, you can calculate them yourself: 仅作一个完整的答案,如果要避免似乎在webkit中不推荐使用的layerX和layerY,可以自己计算:
http://jsfiddle.net/B3TYe/ http://jsfiddle.net/B3TYe/
The change being: 更改为:
var offsetX= 0;
var offsetY= 0;
function onMouseDown(event)
{
var canvas = document.getElementById("myCanvas");
mousedown = true;
var left = (canvas.style.left=="")? 0:parseInt(canvas.style.left);
var top = (canvas.style.top=="")? 0:parseInt(canvas.style.top);
offsetX = event.pageX - left;
offsetY = event.pageY - top;
// Code
drag(event);
}
Andy 安迪
I wouldn't use clientX and layerX properties. 我不会使用clientX和layerX属性。 Here's an example: 这是一个例子:
http://jsfiddle.net/wnxFK/3/ http://jsfiddle.net/wnxFK/3/
function drag(event)
{
var canvas = document.getElementById("myCanvas");
canvas.style.left = event.pageX - 50 + 'px';
canvas.style.top = event.pageY - 50 + 'px';
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.