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