Fix object centering when canvas zoomed

[sorich87]

closes #1641 ( edited by asturur )

[asturur]

would you mind making a demo of what is failing without this PR (including the other ) i think that we are speaking about canvas absolute center and viewport center differencies. right?

[sorich87]

Yes, see here http://jsfiddle.net/ombydhqf/1/. When canvas is not zoomed, object is properly centered. It's not when it's zoomed.

[asturur]

For this PR and the closed one, i think is a matter of definitions.
What we intend for canvas, if our canvas or the part we see in the doc element.
I think we need to have to access to viewport dimension also.
You zoom the canvas and then you want object.center to center it in the viewport.
Some other use would like to center it in the canvas he is zooming in and out, but wants to have the canvas center fixed.
I would not say we have a bug, probably a possible feature.
i add your other fiddle here http://jsfiddle.net/1vbxh3m7/
Let's wait for @kangax.

[sorich87]

Adding this too http://jsfiddle.net/1vbxh3m7/1/. Same as previous one but with canvas dimensions also changed after zoom.

[kangax]

Whether it's a bug or possible feature, I agree we need to fix it!

[kangax]

I think it would make sense to change this.getCenter() instead, to return coords according to zoom. It would be nice to have a test for it and mention in the docs.

[paulcanning]

Has there been any update on this?

[asturur]

I'm not sure how we should handle this.
We should probably have a boolean to ignore or consider the viewport Transformation when centering.
Other than zoomed , the canvas can also pan in the four directions.

@paulcanning did you get how to use internal zoom functions?

[paulcanning]

I was able to use the canvas.setZoom method, but the centering broke, as well as the alignment guideline library that someone wrote, so I've gone back to the old method of scaling everything down, until this centering issue is fixed and I figure out how to fix the guidelines.

[asturur]

https://github.com/kangax/fabric.js/blob/master/lib/aligning_guidelines.js

check if this aligning library is what you need. I think it is in working state.

[paulcanning]

Yea, just seen it haha! Seems to be ok, and I guess I can work around the centering for now by using the canvas height and width to set the top left coords.

[laverick]

For anyone coming here via search, a number of new viewPortCenter methods were added with #3044

e.g. http://fabricjs.com/docs/fabric.Object.html#viewportCenter

This is available as of Fabric.js Version 1.6.3

[azinkey]

using version 2.3.6 still canvas.centerObject(obj) not centering object when canvas set to custom zoom

[asturur]

please have a look at docs, there are specific method for it on the StaticCanvas class. make a search for viewport

fabricjs.com/docs

[aabjava]

In 2.3.6 what asturur said works.
canvas.viewportCenterObject(object)
It centeres correctly in a zoomed canvas

[sudiptokarmoker]

In 2.3.6 what asturur said works.
canvas.viewportCenterObject(object)
It centeres correctly in a zoomed canvas

This is really fine approach to zoom at center object. Real example :

/*
// here imgInstance is like this //
var imgInstance;
fabric.Image.fromURL(imgUrl, function(img) {
// code //
    imgInstance = img;
    canvas.add(img);
    canvas.renderAll();
});
*/
/* Just below this is the main real world example. So you can use this inside three lines of code where you want to use this. */
$('input[type=range]').on("input change", function() {
    canvas.viewportCenterObject(imgInstance);
    canvas.setZoom(this.value);
    canvas.renderAll();
});

And its Done. Thank You All...........