如何使用 fabricjs 放大并居中对象？

Question

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

Fabricjs 的 canvas 有 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的最后两个参数和对象位置的关系。

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

Answer 1

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

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 一起工作（后者会做一些奇怪的事情，例如参见 [=14=] 并单击蓝色圆圈；它是应该将左上视口放在 (25, 25)，但它没有）

Answer 2

下面是如何使用 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]);

如何使用 fabricjs 放大并居中对象？

How to zoom in and center on an object with fabricjs?

javascript

canvas

fabricjs