Question

我做了一个测试，看看HTML 5。

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

有人可以帮助我吗？

Answer 1

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

所以一开始你有：

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

在HTML5中自定义拖放画布

2 个答案: