如何使用fabricjs放大和居中对象？答案

【问题标题】：How to zoom in and center on an object with fabricjs?如何使用fabricjs放大和居中对象？
【发布时间】：2015-11-19 09:23:54
【问题描述】：

我希望能够单击一个对象，并将其缩放到画布视口中的边界框。我该如何做到这一点？请参阅 http://jsfiddle.net/tinodb/qv989nzs/8/ 了解我想要工作的内容。

Fabricjs 的画布具有 zoomToPoint 方法（关于该方法的文档说：Sets zoom level of this canvas instance, zoom centered around point），但这并不以给定点为中心，但它确实适用于滚动缩放。见http://jsfiddle.net/qv989nzs/

我尝试了其他几种方法，例如使用canvas.setViewportTransform：

// centers a circle positioned at (200, 150)??
canvas.setViewportTransform([2, 0, 0, 2, -250, -150])

但我找不到setViewportTransform 的最后两个参数与对象的位置之间的关系。

（顺便说一句，另一个问题是第一个示例小提琴，缩放仅在第一次点击时起作用。为什么会这样？）

【问题讨论】：

zoomToPoint 相对于给定点进行缩放，就像在地图上放大和缩小一样。它不会自动将给定点居中。这应该让你开始。此外，您可能想要包装循环的内部内容，查看不同对象单击时的点引用。
“相对于给定点”，你到底是什么意思？如果我缩放到 (100, 100) 处的某个点，它是否会将左角向上和向左移动 100 像素？这似乎不起作用。
我将点创建包装在一个函数中，但第二次单击仍然不起作用。 zoomToPoint 在缩放级别与我猜想的当前级别没有不同时不执行任何操作（尝试将 zoom 更改为 1，然后在第一次单击时也没有任何反应）。

标签： javascript canvas fabricjs

【解决方案1】：

这是一个如何使用setViewportTransform 的示例：

// first set the zoom, x, and y coordinates
var zoomLevel = 2;
var objectLeft = 250;
var objectTop  = 150;

// then calculate the offset based on canvas size
var newLeft = (-objectLeft * zoomLevel) + canvas.width  / 2;
var newTop  = (-objectTop  * zoomLevel) + canvas.height / 2;

// update the canvas viewport
canvas.setViewportTransform([zoomLevel, 0, 0, zoomLevel, newLeft, newTop]);

【讨论】：

【解决方案2】：

我找到了一种方法，它由以下部分组成：

canvas.setZoom(1)  // reset zoom so pan actions work as expected
vpw = canvas.width / zoom
vph = canvas.height / zoom
x = (object.left - vpw / 2)  // x is the location where the top left of the viewport should be
y = (object.top - vph / 2)  // y idem
canvas.absolutePan({x:x, y:y})
canvas.setZoom(zoom)

有关工作示例，请参阅 http://jsfiddle.net/tinodb/4Le8n5xd/。

我无法让它与zoomToPoint 和setViewportTransform 一起工作（后者会做一些奇怪的事情，例如参见http://jsfiddle.net/qv989nzs/9/ 并单击蓝色圆圈；它应该将左上角的视口放在(25, 25)，但它没有）

【讨论】：

谢谢，它有效，但可能存在更好的性能方式 - 因为在 setZoom() FabricJS 内部有 renderAll() 所以这里我们将所有内容渲染三次。
对于 x 和 y，您可能希望将 object.width/2 和 object.height/2 添加到中心视图，而不是元素角，而是实际中心。
非常感谢@Tino