canvasで画像をマウスのドラッグ&ドロップをしてみる

canvasを利用するので最初にセットを用意する

キャンバスでは最初の設定は下記のようにする

var canvas = document.getElementById("canvas");
var ctx=canvas.getContext("2d");
function init(){

}

今回はmouse系のイベントを用意する。

また、canvas内で利用をする画像は次のように設定をしておく

var image = new Image();
image.src="sample.jpg";

画像の位置データでは、変数がいくつか必要なのでオブジェクトを用意をしておく

var imageObject = {
    x:0,
    y:0,
    width:100,
    height:100
};

画像の描画はdrawImageを利用して次のようにできる

ctx.drawImage(image,imageObject.x,imageObject.y,imageObject.width,imageObject.height);

予めドラッグの状態を取得するように用意しておく

var imageDrag = false;

マウスのドラッグの部分で、ドラッグした場合に、画像の中か外かも判別する

canvas.addEventListener("mousedown",function(e){
    var x = e.clientX;
    var y = e.clientY;
    if(x > imageObject.x && x < imageObject.x+imageObject.width && y > imageObject.y && y < imageObject.y+imageObject.height){
        imageDrag = true;
        startX = x;
        startY = y;
    }
});

で次にマウス動いた場合に、同時に描画も再描画する

canvas.addEventListener("mousemove", function(e){
    //マウスの移動
    var x = e.clientX;
    var y = e.clientY;
    if(imageDrag){
        ctx.fillStyle = "white";
        ctx.fillRect(0,0,600,480);
        ctx.drawImage(image,imageObject.x +x-startX,imageObject.y +y-startY,imageObject.width,imageObject.height);
    }
});

で再描画の際に一度全体を白いRectで上書きをする必要があります。

canvas.addEventListener("mouseup",function(e){
    if(imageDrag){
        var x = e.clientX;
        var y = e.clientY;
        imageObject.x += x-startX;
        imageObject.y += y-startY;
        imageDrag = false;
    }
});

のように最後に画像の現在地を保存しておくと、画像のドラッグ&ドロップができました。

最後に全体のソースを

var canvas = document.getElementById("canvas");
var ctx=canvas.getContext("2d");
var image = new Image();
image.src="sample.jpg";
var imageDrag = false;

var imageObject = {
    x:0,
    y:0,
    width:100,
    height:100
};

function init(){
    ctx.drawImage(image,imageObject.x,imageObject.y,imageObject.width,imageObject.height);
    canvas.addEventListener("mousemove", function(e){
        //マウスの移動
        var x = e.clientX;
        var y = e.clientY;
        if(imageDrag){
            ctx.fillStyle = "white";
            ctx.fillRect(0,0,480,600);
            ctx.drawImage(image,imageObject.x +x-startX,imageObject.y +y-startY,imageObject.width,imageObject.height);
        }
    });     
    canvas.addEventListener("mouseup",function(e){
        if(imageDrag){
            var x = e.clientX;
            var y = e.clientY;
            imageObject.x += x-startX;
            imageObject.y += y-startY;
            imageDrag = false;
        }
    });
    canvas.addEventListener("mousedown",function(e){
        var x = e.clientX;
        var y = e.clientY;
        if(x > imageObject.x && x < imageObject.x+imageObject.width && y > imageObject.y && y < imageObject.y+imageObject.height){
            imageDrag = true;
            startX = x;
            startY = y;
        }
    });
    canvas.addEventListener("mouseleave",function(){
        imageDrag = false;
    });
    
}
var startX = -1;
var startY = -1;
var mouseX = -1;
var mouseY = -1;
  • written on 2012.11.07
  • category : canvas

Next / Prev

前の記事:

次の記事:

Same Category

Page top↑