Question

我有一个画布区域，我正在添加一些图像，我很想让我的画布图像可拖动。我通过addEventListener创建了鼠标事件来处理鼠标点击但我的问题是，我能够制作可拖动的所有画布上下文，而不仅仅是我的图像。

html代码：

<canvas></canvas>

JS代码的一部分：

var canvas = document.getElementsByTagName('canvas')[0];
var gkhead = new Image;
var ball   = new Image;
ctx.drawImage(gkhead,0,0,1000, 200);
ctx.drawImage(ball,0,0,100,100);

canvas.addEventListener('mousedown',function(evt){
        document.body.style.mozUserSelect = document.body.style.webkitUserSelect = document.body.style.userSelect = 'none';
        lastX = evt.offsetX || (evt.pageX - canvas.offsetLeft);
        lastY = evt.offsetY || (evt.pageY - canvas.offsetTop);
        dragStart = ctx.transformedPoint(lastX,lastY);
        dragged = false;
    },false);

canvas.addEventListener('mousemove',function(evt){
        lastX = evt.offsetX || (evt.pageX - canvas.offsetLeft);
        lastY = evt.offsetY || (evt.pageY - canvas.offsetTop);
        dragged = true;
        if (dragStart){
            var pt = ctx.transformedPoint(lastX,lastY);
            ctx.translate(pt.x-dragStart.x,pt.y-dragStart.y);
            redraw();
        }
    },false);

canvas.addEventListener('mouseup',function(evt){
        dragStart = null;
        if (!dragged) zoom(evt.shiftKey ? -1 : 1 );
    },false);

是否有可能使第一张图像（gkhead）在画布区域内可以抓取，第二张（球）图像可以在第一张（gkhead）图像的区域内移动？
HERE is my fiddle
谢谢大家的建议。

Answer 1

为了提高效率，您可以设置两个相同大小的单独画布层。一个在其上绘制所有画布对象，另一个是空白临时画布，您可以在其中实际移动对象。

您还需要将图像存储在某种容器中，例如JSON-y对象。因此，您将有一些参考，如x和y坐标，图像源，图像的宽度，图像的高度，以及可能的图像的z-index。您将创建某种点击检测，检查所有图像，如果用户点击图像，则从主画布中删除该图像。在临时画布上的完全相同的位置绘制图像。在临时画布上进行所有拖动（以节省绘画时间和处理所需）。然后，在删除时，擦除临时画布并再次在主画布上绘制它。

这是我很久以前做过的一个例子（just code，对不起）。试着找一些关于它的在线教程。

使画布图像可移动（可拖动）

1 个答案: