Question

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

Fabricjs＆＃39; 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的最后两个参数与对象位置之间的关系。

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

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），但它没有）

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放大和居中对象？

2 个答案: