Как вы перемещаете объекты, перетаскивая фон в 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>