javascript - 可拖动图像未进入 Canvas

Question

<强> Fiddle

$(document).ready(function () {
        var d_canvas = document.getElementById('canvas');
        var context = d_canvas.getContext('2d');
        var background = document.getElementById('background');
        var ballon = document.getElementById('ballon')
        context.drawImage(background, 0, 0);

        $('#ballon').draggable();
    });

当我尝试拖动图像时，它不像在 Canvas 中那样。行为不像 Google map 拖动

Answer 1

我正在回答你之前的问题。您应该使用 drawImage 在 Canvas 上绘制图像，然后在 Canvas 上添加拖动事件的EventListener。

jsfiddle

var drag, canvas, ctx;
var posX = 0, posY = 0;
var lastX, lastY;
$(document).ready(function(){
    canvas=document.getElementById("canvas");
    ctx=canvas.getContext("2d");
    var image=document.createElement("img");
    image.onload=function(){
        canvas.width = 800;
        canvas.height = 400;
        ctx.drawImage(image,posX,posY);
        init();
    }

    image.src="http://peach.blender.org/wp-content/uploads/poster_rodents_big.jpg";

    function init(){
        canvas.addEventListener('mousedown', function(){
            drag = true;
            lastX=null;
            lastY=null;
        });

        document.addEventListener('mouseup', function(){
            drag = false;
        });

        document.addEventListener('mousemove', function(evt) {
            if(drag){
                var mousePos = getMousePos(canvas, evt);
                var x = mousePos.x;
                var y = mousePos.y;
                ctx.clearRect(0,0,canvas.width,canvas.height);
                if(lastX && lastY){
                    posX += x-lastX;
                    posY += y-lastY;
                    if(posX>0) posX=0;
                    if(posY>0) posY=0;
                    if(posX<-image.width+canvas.width) posX = -image.width+canvas.width;
                    if(posY<-image.height+canvas.height) posY = -image.height+canvas.height;
                    ctx.drawImage(image,posX,posY);
                }
                lastX=x;
                lastY=y;
            }
        }, false);
    }

    function getMousePos(canvas, evt) {
        var rect = canvas.getBoundingClientRect();
        return {
            x: evt.clientX - rect.left,
            y: evt.clientY - rect.top
        };
    }
});