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

Question

我希望能够单击一个对象，并将其缩放到 Canvas 视口(viewport)中的边界框。我如何做到这一点？参见 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 一起工作(后者会做一些奇怪的事情，例如参见 http://jsfiddle.net/qv989nzs/9/ 并单击蓝色圆圈；它应该将左上视口(viewport)放在 (25, 25)，但它没有)