0

我有一个画布区域，我正在向其中添加一些图像，我想让我的画布图像可拖动。我通过 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 ）图像区域中可移动？
这是我的小提琴
谢谢大家的建议。

4

1 回答 1

0

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

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

这是我很久以前做的一个例子（只是代码，对不起）。现在试图找到一些关于它的在线教程。

于 2016-01-09T18:29:36.813 回答