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.

回答1:

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.

来源：https://stackoverflow.com/questions/36401107/calculate-absolute-coordinates-in-a-canvas-with-panning-zoom