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

Question

我希望能够单击一个对象,并将其缩放到画布视口中的边界框.我该如何做到这一点？请参阅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与对象位置之间的关系.

(顺便说一句,另一个问题是第一个示例小提琴,缩放仅适用于第一次点击.为什么会这样？)

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/,然后点击蓝色的圆圈,它应该放在左上视在(25,25),但它没有)