1

キャンバス内での画像のドラッグを実装したい。そのための最も単純なコードが必要です。これまで多くの例を見てきましたが、それらは複雑な実装方法を使用していました。学習と実装が簡単な例が必要です。

4

3 に答える 3

2

それはかなり難しいです。最初に、特定の要素がクリックされたことを検出できる関数を作成する必要があります。ただし、それを行う前に、「要素」の意味を定義する必要があります。単一の描画命令 (長方形や円弧など) の結果なのか、それとも複雑なものなのか? (猫を描いて、猫全体を 1 つのユニットとしてドラッグできるようにしたいと想像してください。)

キャンバスはピクセルの集まりに他なりません。プログラムに「形状」または「ユニットとして扱われる形状のコレクション」の概念を持たせたい場合は、キャンバス自体の外部のデータ構造としてそれらを自分で実装する必要があります。それができたら、onmousedownクリックされた x/y ポイントを取得し、クリックがどの形状 (存在する場合) の内側にあるかを判断するハンドラーを作成できます (また、複数の形状の内側にある場合は、Z インデックスが最も大きいものを確認します)。 . onmousemove次に、形状データ オブジェクトの情報に基づいて、キャンバス上の形状を消去および再描画するハンドラーを追加します。

これは中程度に難しい問題で、非常に難しい前提条件の問題 (さまざまな形状や形状のコレクションを記述できるデータ構造の作成) があります。これらの問題を解決済みのキャンバス描画ライブラリを使用することを強くお勧めします。私はCake.jsを使用していますが、利用可能なオプションがたくさんあります。

于 2012-07-12T14:20:19.517 に答える
0

HTML5 キャンバスを使用する必要がない場合は、jQuery UI の方がはるかに単純です。

HTML:

<img class="drag-me" src="http://www.google.com/images/srpr/logo3w.png">​

JavaScript:

$(function() {

    $('.drag-me').draggable();
});

実際に見てみましょう:

http://jsfiddle.net/flackend/TQzSe/

jQuery UI API には、希望どおりに動作させるための多くのオプションもあります: http://jqueryui.com/demos/draggable/

さらに、それが必要なことを行わない場合は、自分で簡単に実装できます。ヘルプが必要な場合は、ここに投稿してください。

于 2012-07-12T13:32:08.383 に答える
0

jsfiddle.net/Zevan/QZejF/5 これはあなたを助けるかもしれません。

<html>
<head>
<title>Test Page</title>
<script type="text/javascript" src="jquery.js"></script>
</head>
<body>

<canvas id="c" width = "500" height = "500" ></canvas>


<script type="text/javascript">
var canvas = $("#c");
var c = canvas[0].getContext("2d");

//var path = "http://wonderfl.net/images/icon/e/ec/ec3c/ec3c37ba9594a7b47f1126b2561efd35df2251bfm";
var path = "blue.jpg";
var path2 = "purple.jpg";
var image1 = new DragImage(path, 200, 100);
var image2 = new DragImage(path2, 300, 100);

var loop = setInterval(function() {

    c.fillStyle = "gray";
    c.fillRect(0, 0, 500, 500);

    image1.update();
    image2.update();
}, 30);

var mouseX = 0,
    mouseY = 0;
var mousePressed = false;
var dragging = false;
canvas.mousemove(function(e) {
    mouseX = e.offsetX;
    mouseY = e.offsetY;
})

$(document).mousedown(function() {
    mousePressed = true;
}).mouseup(function() {
    mousePressed = false;
    dragging = false;
});

function DragImage(src, x, y) {
    var that = this;
    var startX = 0,
        startY = 0;
    var drag = false;

    this.x = x;
    this.y = y;
    var img = new Image();
    img.src = src;
    this.update = function() {
        if (mousePressed ) {

                var left = that.x;
                var right = that.x + img.width;
                var top = that.y;
                var bottom = that.y + img.height;
                if (!drag) {
                    startX = mouseX - that.x;
                    startY = mouseY - that.y;
                }
                if (mouseX < right && mouseX > left && mouseY < bottom && mouseY > top) {
                    if (!dragging){
            dragging = true;
                        drag = true;
                    }

                }

        } else {

            drag = false;
        }
        if (drag) {
            that.x = mouseX - startX;
            that.y = mouseY - startY;
        }
        c.drawImage(img, that.x, that.y);
    }
}
</script>
</body>
</html>
于 2013-08-19T12:47:17.783 に答える