javascript - 是否可以在 Canvas 内拖动图像并在同一 Canvas 上绘图？

Question

在这里，我尝试在 html5 Canvas 上绘图，并上传一些图像并将它们拖动到 Canvas 内。问题是我可以做其中之一，但不能两者都做。 我意识到，在拖动之前必须清除 Canvas ，但通过这样做，我将清除绘图，如果我不清除它绘制的 Canvas ，但拖动图像会留下痕迹。谁能指出我正确的方向吗？

        function init() {
        canvas = document.getElementById('can');
        ctx = canvas.getContext("2d");
        w = canvas.width;
        h = canvas.height;
        img = document.getElementById("drag");

        canvas.addEventListener("mousemove", function (e) { findxy('move', e) }, false);
        canvas.addEventListener("mousedown", function (e) { findxy('down', e) }, false);
        canvas.addEventListener("mouseup", function (e) {  findxy('up', e) }, false);
        canvas.addEventListener("mouseout", function (e) { findxy('out', e) }, false);

        imageLoader = document.getElementById('imageLoader');
        imageLoader.addEventListener('change', handleImage, false);

        var contexts = [];
        contexts.push(canvas.getContext('2d'));

        function clearAll() {
            ctx.clearRect(0, 0, canvas.width, canvas.height);
        }

       canvas.onclick = function (e) { handleClick(e, 1); };

        function handleClick(e, contextIndex) {
            e.stopPropagation();
            var mouseX = parseInt(e.clientX - e.target.offsetLeft);
            var mouseY = parseInt(e.clientY - e.target.offsetTop);
        //    clearAll();
            for (var i = 0; i < states.length; i++) {

                var state = states[i];
                if (state.dragging) {
                    state.dragging = false;
                    state.draw();
                    continue;
                }

                if (state.contextIndex === contextIndex
                        && mouseX > state.x && mouseX < state.x + state.width
                        && mouseY > state.y && mouseY < state.y + state.height)
                {
                    state.dragging = true;
                    state.offsetX = mouseX - state.x;
                    state.offsetY = mouseY - state.y;
                    state.contextIndex = contextIndex;
                }
                state.draw();
            }
        }
        canvas.onmousemove = function (e) { handleMousemove(e, 1); }

        function handleMousemove(e, contextIndex) {
            e.stopPropagation();

            var mouseX = parseInt(e.clientX - e.target.offsetLeft);
            var mouseY = parseInt(e.clientY - e.target.offsetTop);

        //    clearAll();

            for (var i = 0; i < states.length; i++) {

                var state = states[i];

                if (state.dragging) {
                    state.x = mouseX - state.offsetX;
                    state.y = mouseY - state.offsetY;
                    state.contextIndex = contextIndex;
                }
                state.draw();
            }
        }
       var states = [];
        states.push(addState(0, 0, img));

        function addState(x, y, image) {
            state = {}
            state.dragging = false;
            state.contextIndex = 1;
            state.image = image;
            state.x = x;
            state.y = y;
            state.width = image.width;
            state.height = image.height;
            state.offsetX = 0;
            state.offsetY = 0;
            state.draw = function () {
                var context = contexts[this.contextIndex - 1];
                if (this.dragging) {
                    context.strokeStyle = 'red';
                    context.strokeRect(this.x, this.y, this.width + 5, this.height + 5);
                }
                context.drawImage(this.image, this.x, this.y);
            };
            state.draw();
            return(state);
        }

}//end of init()  

var imgArray = [];
function handleImage(e) {
    var reader = new FileReader();
    reader.onload = function (event) {
        imgArray.push(img);
        for(i = 0; i < imgArray.length; i++){
            img.src = imgArray[i];
            img.setAtX = i * 50;
            img.setAtY = i * 0;
            img.onload = function() {
                ctx.drawImage(this, this.setAtX, this.setAtY);
            };
            img.src = event.target.result;
        }
    };
    reader.readAsDataURL(e.target.files[0]);                
}
    function findxy(res, e) {
        if (res === 'down') {
            prevX = currX;
            prevY = currY;
            currX = e.clientX - canvas.offsetLeft;
            currY = e.clientY - canvas.offsetTop;

            flag = true;
            dot_flag = true;
            if (dot_flag) {
                ctx.beginPath();
                ctx.fillStyle = x;
                ctx.fillRect(currX, currY, 2, 2);
                ctx.closePath();
                dot_flag = false;
            }
        }
        if (res === 'up' || res === "out") {
            flag = false;
        }
        if (res === 'move') {
            if (flag) {
                prevX = currX;
                prevY = currY;
                currX = e.clientX - canvas.offsetLeft;
                currY = e.clientY - canvas.offsetTop;
                draw();
            }
        }
    }

    //Draw lines or text 
    function draw() {
        ctx.beginPath();
        ctx.moveTo(prevX, prevY);
        ctx.lineTo(currX, currY);
        ctx.strokeStyle = x;
        ctx.lineWidth = y;
        ctx.stroke();
        ctx.closePath();           
        ctx.fillStyle = x;           
        ctx.font = "Italic Bold 14pt Times, serif";            
        ctx.fillText(message, prevX, prevY);
    }

Answer 1

这是我链接到的代码和您自己的代码的混搭。

涵盖了与绘制图像并将其在 Canvas 上平移相关的所有参数。

var canvas = document.getElementById("canvas");
var ctx;
var x = 75;
var y = 50;
var WIDTH = 400;
var HEIGHT = 300;
var dragok = false;
var img = document.getElementById("img");
var lines = [{
  x: x,
  y: y
}];

function rect(x, y, w, h) {
  ctx.beginPath();
  ctx.rect(x, y, w, h);
  ctx.closePath();
  ctx.fill();
}

function clear() {
  ctx.clearRect(0, 0, WIDTH, HEIGHT);
}

function init() {
  canvas = document.getElementById("canvas");
  ctx = canvas.getContext("2d");
  return setInterval(draw, 1000/24);
}

function draw() {
  clear();
  ctx.drawImage(img, x - img.width / 2, y - img.height / 2);
  ctx.beginPath();
  ctx.moveTo(lines[0].x,lines[0].y);
  for(var i = 1; i < lines.length; i++) {
    var line = lines[i];
    ctx.lineTo(lines[i].x,lines[i].y);
  }
  ctx.stroke(); 
  ctx.closePath();
  //rect(x - 15, y - 15, 30, 30);
}

function myMove(e) {
  if (dragok) {
    x = e.pageX - canvas.offsetLeft;
    y = e.pageY - canvas.offsetTop;
    lines = lines.slice(lines.length - 100)
    lines.push({
      x: x,
      y: y
    });
  }
}

function myDown(e) {
  if (e.pageX < x + img.width / 2 + canvas.offsetLeft && e.pageX > x - img.width / 2 +
    canvas.offsetLeft && e.pageY < y + img.height / 2 + canvas.offsetTop &&
    e.pageY > y - img.height / 2 + canvas.offsetTop) {
    x = e.pageX - canvas.offsetLeft;
    y = e.pageY - canvas.offsetTop;
    dragok = true;
    canvas.onmousemove = myMove;
  }
}

function myUp() {
  dragok = false;
  canvas.onmousemove = null;
}

init();

canvas.onmousedown = myDown;
canvas.onmouseup = myUp;

//Change image for the heck of it ^^

setInterval(function() {
  img.src = 'https://placeholdit.imgix.net/~text?txtsize=60&txt=' +
    Math.floor(Math.random() * 10) +
    '&w=100&h=100';
}, 3000)

<canvas id="canvas" width="400" height="300">
  This text is displayed if your browser does not support HTML5 Canvas.
</canvas>
<img id="img" src="https://placeholdit.imgix.net/~text?txtsize=60&txt=1&w=100&h=100">

更新了我对画线的回答