0

HTML5をチェックするために少しテストを行いました。

私のテストでは、<canvas>これをドラッグしたいと思います。しかし、私は少し問題があります、私のキャンバスはちょっと揺れています。

誰かが私をplzするのを手伝ってもらえますか？

フィドル： http： //jsfiddle.net/wnxFK/

4

2 に答える 2

1

ドラッグの開始時にlayerXとlayerYを1回計算すると、よりスムーズな効果を作成できます。

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

また、イベントを最初に1回だけフックするように移動しましたが、少しすっきりしています。

アップデート

完全な答えとして、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);
}

アンディ

于 2012-07-18T14:18:57.950 に答える
0

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';
    }​
于 2012-07-18T14:23:31.413 に答える