CODEWITHSUNDEEP
javascriptcsshtmlcanvas
mca-surround
mca-surround

Reputation: 87

Canvas Panning All Elements Including Minimap

I am currently adding a mini map onto my canvas which basically displays and follows what it is shown on the main canvas. My main canvas has a zoom and pan feature. I've drawn a rect for the minimap and it display what is shown on the canvas. However, when I pan it or zoom it, it also does the same for the minimap.

The code below is my draw method which draws on the canvas and the minimap.

    redraw();
    context.save();
    context.translate(canvas.width / 2, canvas.height / 2);
    canvas.style.border = "red 1px solid";
    object.mPosition = new Vector(0,0);
    object.draw(context);
    context.restore();
    requestAnimationFrame(draw);
    context.save();
    context.beginPath();
    context.lineWidth = 3;
    context.strokeStyle="black";
    context.scale(0.25,0.25);
    context.rect(0,0,canvas.width,canvas.height);
    context.fillStyle="white";
    context.fillRect(0,0,canvas.width,canvas.height);
    context.stroke();
    context.clip();
    context.translate(canvas.width / 2, canvas.height / 2);
    object.draw(context);
    context.closePath();
    context.restore();

The code below shows the code for panning.

function OnMouseMove(event) {
    var mousePosition = new Vector(event.clientX, event.clientY);
    if(leftMouseButton) {
        context.translate(mousePosition.getX() - previousMousePosition.getX(), mousePosition.getY() - previousMousePosition.getY());
    }
    previousMousePosition = mousePosition;
}

How do I make it stop panning the minimap and just apply the panning feature on the actual canvas and any drawings on it?

Upvotes: 0

Views: 1226

Answers (1)

user1693593
user1693593

Reputation:

Technique 1

  • reset all transformations (ctx.setTransform(1,0,0,1,0,0);)
  • draw mini-map at (0,0)
  • apply translation
  • draw items

Acculumate translate in its own variable, ie. x/y, and use that with translate.

Technique 2

  • Draw the mini-map once

  • Set canvas as its own CSS background:

    canvas.style.background = "url(" + canvas.toDataURL() + ")";

  • clear and draw items each update with no worries about the mini-map (just repeat two first steps if you need to change it).

Technique 3

  • Store x/y of current translation (book-keep using variables)
  • Clear and draw mini-map after first translating canvas negative of x/y (which will result in position (0,0). ctx.translate(-x, -y);
  • reapply translation and draw items

Technique 4

  • Book-keep current translation in x/y
  • Draw mini-map at (0,0)
  • Draw all items offset with x/y

This require more code as you are in effect manually translating each item. I would not recommend this one since translate is available, but I include it here for completeness.

Technique 5

  • Draw all items to a large enough off-screen canvas to hold them all
  • Draw mini-map
  • Draw item canvas (as an image) on top, offset with translation or just use x/y in this case

This could be combined with #2, but it would also be most likely the technique using most memory. For that reason not recommended but, it depends of course on how large the canvases would be in total.

Upvotes: 1

Related Questions