I would like to be able to click on an object, and have it zoomed to its boundingbox in the canvas viewport. How do I accomplish that? See / for what I would like to get working.

Fabricjs' canvas has the zoomToPoint method (about which the docs say: Sets zoom level of this canvas instance, zoom centered around point), but that does not center to the given point, but it does work for zooming with scrolling. See /

I tried several other approaches, like using canvas.setViewportTransform:

// centers a circle positioned at (200, 150)??
canvas.setViewportTransform([2, 0, 0, 2, -250, -150]) 

But I can't find the relation between the last two parameters to setViewportTransform and the position of the object.

(Btw, another problem is with the first example fiddle, that the zooming only works on the first click. Why is that?)

I would like to be able to click on an object, and have it zoomed to its boundingbox in the canvas viewport. How do I accomplish that? See http://jsfiddle.net/tinodb/qv989nzs/8/ for what I would like to get working.

Fabricjs' canvas has the zoomToPoint method (about which the docs say: Sets zoom level of this canvas instance, zoom centered around point), but that does not center to the given point, but it does work for zooming with scrolling. See http://jsfiddle.net/qv989nzs/

I tried several other approaches, like using canvas.setViewportTransform:

// centers a circle positioned at (200, 150)??
canvas.setViewportTransform([2, 0, 0, 2, -250, -150]) 

But I can't find the relation between the last two parameters to setViewportTransform and the position of the object.

(Btw, another problem is with the first example fiddle, that the zooming only works on the first click. Why is that?)

• javascript
• canvas
• fabricjs

• zoomToPoint zooms relative to the given point, like zooming in and out on a map. It doesn't automatically center the given point. That should get you started. Also, you'll probably want to wrap the inner guts of your loop, see what dot references on different object clicks. – Etheryte Commented Aug 25, 2015 at 15:42
• "Relative to the given point", what exactly do you mean by that? If I zoom to a point at (100, 100), does it move the left corner 100 pixels up and left? That does not seem to work. – Tino Commented Aug 25, 2015 at 19:30
• I wrapped the dot creation in a function, but still the second click does not work. zoomToPoint does not do anything when the zoom level is not different than the current level I guess (try changing zoom to 1, then also nothing happens on the first click). – Tino Commented Aug 25, 2015 at 19:32

2 Answers 2

I found a way to do this, which is composed of:

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)

See http://jsfiddle.net/tinodb/4Le8n5xd/ for a working example.

I was unable to get it to work with zoomToPoint and setViewportTransform (the latter of which does strange things, see for example http://jsfiddle.net/qv989nzs/9/ and click the blue circle; it is supposed to put the top left viewport at (25, 25), but it does not)

Here's an example of how to do it with 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]);