javascript - HTML5 中的自定义拖放画布

Question

我做了一个小测试来检查 HTML 5。

在我的测试中，我有一个<canvas>并且想要拖动这个。但我有一个小问题，我的画布有点晃动。

有人可以帮我吗？

小提琴：http: //jsfiddle.net/wnxFK/

Answer 1

在拖动开始时计算 layerX 和 layerY 有助于创建更平滑的效果：

http://jsfiddle.net/jB5YN/

所以一开始你有：

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);
}

当你来拖动时，你有：

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';
}

此外，我已经将事件移动到一开始只连接一次，对我来说感觉更整洁！

更新

只是为了一个完整的答案，如果您想避免似乎在 webkit 中被弃用的 layerX 和 layerY ，您可以自己计算它们：

http://jsfiddle.net/B3TYe/

变化是：

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);
}

安迪

Answer 2

我不会使用 clientX 和 layerX 属性。这是一个例子：

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';
    }​