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

Question

I would like to be able to create a movable canvas by dragging it, but being able to place objects onto the canvas that will stay in place relative to where they were placed. How would I go about doing that?

For example, I place 4 images in different places onto the canvas. Then I drag on an empty space on the canvas and all the objects move based on the movement of the mouse. Creating an illusion that the canvas has infinite space (because I would like to be able to place several objects beyond what the screen is showing).

Would I have to keep track of the objects themselves, and when I drag an empty space, make all the objects move? How will this affect memory if I had say a couple hundred of said objects onto the canvas (being out of view but being able to be brought back into view using this dragging method)?

Answer 1

The main idea is that I translate the canvas context relative to the mouse movement. Please read the comments in the code.

In this example I'm drawing some circles. You can draw anything else.

 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 = {} ox = (1 - Math.random() )* 3 * cw; oy = Math.random() * ch; or = (Math.random() * 20) + 10; o.color = color; o.draw = function(){ ctx.fillStyle = o.color; ctx.beginPath(); ctx.arc(ox,oy,or,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); dx = last_m.x - mx; dy = last_m.y - my; // the total dragged distance on mouse up Dx += dx; Dy += dy; }) canvas.addEventListener("mousemove",(evt)=>{ if(dragging){ last_m = oMousePos(canvas, evt); dx = last_m.x - mx + Dx; dy = last_m.y - my + Dy; // clear the context ctx.clearRect(-cw,0, 2*cw,ch); ctx.save(); //translate the context ctx.translate(dx, dy); //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>