CODEWITHSUNDEEP
javascriptfabricjs
Taqi Mustafa
Taqi Mustafa

Reputation: 80

Calculate absolute coordinates in a canvas with panning & zoom

How can i calculate a specific position of canvas(e.g. Bottom Center) after changing the viewport position and Zoom Level ?

Right now i am trying something like this. But it only works for viewport.

canvasPoint = {
   left:(canvas.width/2)-canvas.viewportTransform[4],
   top: canvas.height-canvas.viewportTransform[5]
}

When i Zoom Out or Zoom In, i am unable to find the new center-bottom point for canvas.

Upvotes: 3

Views: 1936

Answers (1)

AndreaBogazzi
AndreaBogazzi

Reputation: 14731

You have to use the matrices. Your bottom - center corner has coordinates: 

var p = {x: canvas.width/2, y: canvas.height};

Your Zoom and Panning is represented by the viewportTransfom:

var invertedMatrix = fabric.util.invertTransform(canvas.viewportTransform);
var transformedP = fabric.util.transformPoint(p, invertedMatrix);

And you should be done. transformedP should have the absolutes coordinates of the point that you see as center-bottom in a zoomed and/or panned view.

Upvotes: 3

Related Questions