通过平移&计算画布中的绝对坐标.飞涨 [英] 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.

推荐答案

您必须使用矩阵. 您的底部-中心角具有坐标:

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

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

您的缩放和平移由viewportTransfom表示:

Your Zoom and Panning is represented by the viewportTransfom:

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

您应该完成. TransformationP应该具有在缩放和/或平移视图中您视为中心底部的点的绝对坐标.

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.

这篇关于通过平移&计算画布中的绝对坐标.飞涨的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！