如何放大和中心的对象与fabricjs

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

本文关键字：对象 fabricjs 何放大 放大      更新时间：2023-09-26

我希望能够点击一个对象，并将其缩放到画布视口中的边界框。我该怎么做呢?请参阅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的后两个参数与对象位置的关系。

(顺便说一句，第一个例子的另一个问题是，缩放只适用于第一次点击。为什么?)

我找到了一种方法来做到这一点，它由:

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

下面是如何使用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]);
相关文章：