如何通过在 html5/canvas 中的背景上拖动来移动对象

Question

我希望能够通过拖动来创建可移动的画布，但能够将对象放置在画布上，这些对象将相对于放置它们的位置保持原位。我该怎么做呢？

例如，我将 4 张图像放置在画布上的不同位置。然后我在画布上拖动一个空白区域，所有对象都会根据鼠标的移动移动而移动。创造一种画布具有无限空间的错觉(因为我希望能够在屏幕显示之外放置多个对象(。

我是否必须跟踪对象本身，并在拖动空白区域时使所有对象移动？如果我在画布上说几百个所述对象(不在视野中，但可以使用这种拖动方法重新进入视野(，这将如何影响记忆？

Answer 1

主要思想是我相对于鼠标移动来翻译画布上下文。请阅读代码中的注释。

在这个例子中，我画了一些圆圈。你可以画其他任何东西。

const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");
let cw = canvas.width = window.innerWidth,
  cx = cw / 2;
let ch = canvas.height = window.innerHeight,
  cy = ch / 2;
//the mouse
let m = {x:0,y:0};//mouse coords on mouse down
let last_m = {x:0,y:0}//mouse coords on dragging
//distance
let d = {x:0,y:0};// distance while dragging
let D = {x:0,y:0};// distance on mouse up

// draw some circles
let circles = [];
let dragging = false;
function drawCircle(color){
  let o = {}
  o.x = (1 - Math.random() )* 3 * cw;
  o.y = Math.random() * ch;
  o.r = (Math.random() * 20) + 10;
  o.color = color;
  o.draw = function(){
    ctx.fillStyle = o.color;
    ctx.beginPath();
    ctx.arc(o.x,o.y,o.r,0,2*Math.PI);
    ctx.fill();
  }
  circles.push(o)
}
for(let i = 0; i < 70; i++){
drawCircle(`hsl(${i * 12},80%,60%)`)
}
for(let i = 0; i < circles.length; i++){circles[i].draw()}
//events
canvas.addEventListener("mousedown",(evt)=>{
  dragging = true;
  //the mouse position
  m = oMousePos(canvas, evt);
})
canvas.addEventListener("mouseup",(evt)=>{
  dragging = false;
  last_m = oMousePos(canvas, evt);
  d.x = last_m.x - m.x;
  d.y = last_m.y - m.y;
  // the total dragged distance on mouse up
  D.x += d.x;
  D.y += d.y;
})
canvas.addEventListener("mousemove",(evt)=>{
  
  if(dragging){
    
    last_m = oMousePos(canvas, evt);
    
    d.x = last_m.x - m.x + D.x;
    d.y = last_m.y - m.y + D.y;
    
    // clear the context
    ctx.clearRect(-cw,0, 2*cw,ch);
    
    ctx.save();
    
    //translate the context
    ctx.translate(d.x, d.y);
    //repaint everithing
    for(let i = 0; i < circles.length; i++){circles[i].draw()}
    
    ctx.restore()
  }
                              
})
// a function to detect the mouse position on the canvas
function oMousePos(canvas, evt) {
  var ClientRect = canvas.getBoundingClientRect();
  return { //objeto
    x: Math.round(evt.clientX - ClientRect.left),
    y: Math.round(evt.clientY - ClientRect.top)
  }
}

*{margin:0;padding:0;}
body {
  overflow: hidden;
}
canvas {
  background-color: #000;
}

<canvas id="canvas"></canvas>