Fabric.js: Canvas zoom/position bug [$5]

Created on 27 May 2016 · 25Comments · Source: fabricjs/fabric.js

Version

1.6.2

Test Case

Expected Behavior

When I initially set the zoom of my canvas (along with the canvas size and background image size) to 1, i add a rectangle. This rectangle acts as a marker for the center of our canvas. When we scale the canvas (and also the background image and canvas size respectfully) I would expect the center of the canvas to remain the same, regardless of the zoom level. This expected result would be the two rectangles centered on the canvas.

Actual Behavior

Instead, what we see is the position of the second rectangle differs when we zoom the canvas to something other than the initial value "1".

NOTES:

Keep in mind, this might also effect other align functions, (i.e. centerObjectH, etc.) other than object.center().

https://api.bountysource.com/badge/issue?issue_id=34629617

bounty bug

Source

HunterMitchell

All 25 comments

i think there is aduplicate for this i will check and in case close.
But yes we should clarify on top of function of what center we are talking about e respect it.

asturur on 27 May 2016

@asturur Would the center function need to be the center at all times regardless of the zoom? Why even have a center function that only centers when the canvas is at only an initial point?

HunterMitchell on 27 May 2016

Because this is a free project. The whole zoom function has been a bounty supported feature. The user that did it did not change the centering functions, or maybe in the old discussion about this something has been said. Maybe someone already pointed out this problem with centering, maybe in the wrong moment when no one had time to listen (not that i have now, but i decided to support fabricjs). There are no so many "BECAUSE" to return to many "WHY". There is what you see now and it can done better probably if the right amount of energy, skill, time and love are mixed in (and sometimes money speed things up).

asturur on 27 May 2016

@asturur Sorry, didn't mean it in that tone. I thought it was a core feature of the canvas (to zoom). I will be glad to help or even throw some money out there to get these issues fixed.

HunterMitchell on 27 May 2016

Your tone was fine. I was not complaining, just explaning what is the situation clearly.

asturur on 27 May 2016

@asturur I submitted a small bounty for my most two recent issues. Ill try to add more later if this doesn't help a tiny bit.

HunterMitchell on 27 May 2016

I was thinking that now fabricjs has clearly a "canvas" and a "viewport". So instead of guessing where we should center what, we should just be able to ask canvas.center(obj) and canvas.viewportCenter(obj);
I think as a long term solution is better than having just one or having something like canvas.center(obj, boolean_to_consider_viewport)

asturur on 29 May 2016

A bit of research shows that it's a combination of the zoom and setting the canvas dimensions - each works fine when used alone. It appears to be due to how the getCenter function works, I think it might need to take into account the viewport transforms. However, that doesn't make much sense.

PlasmaPower on 1 Jun 2016

It looks like this is more of a fundamental issue with coordinates that I'm not prepared to solve. I'm going to stop working on this, at least for now.

PlasmaPower on 1 Jun 2016

Ok, thank you for taking a look at this.

On Tuesday, May 31, 2016, PlasmaPower [email protected] wrote:

It looks like this is more of a fundamental issue with coordinates that
I'm not prepared to solve. I'm going to stop working on this, at least for
now.

—
You are receiving this because you authored the thread.
Reply to this email directly, view it on GitHub
https://github.com/kangax/fabric.js/issues/3015#issuecomment-222866026,
or mute the thread
https://github.com/notifications/unsubscribe/AGlOWI3UsmbAhJpK__l92vqibs9uKWSkks5qHNuygaJpZM4IoaGv
.

HunterMitchell on 1 Jun 2016

There is a PR that will add the methods for this. They will be separate methods. I wrote just one for now, check #3017.

asturur on 1 Jun 2016

@asturur Will this fix an issue with the coords in general? Take this for instance:

function AlignVertical() {
    var object = editor.getActiveObject() || editor.getActiveGroup();
    if(object) {
        object.setTop((editor.getHeight() / 2) - (object.getHeight() / 2));
    }
}

zoom the canvas and then try to use this simple calculation to center the object. The coords are the same, but it does not center correctly?

HunterMitchell on 6 Jun 2016

@asturur To be sure I am correct, here is a fiddle of exatly what I am talking about (i.e. coords).

http://jsfiddle.net/y551Lkdx/

HunterMitchell on 6 Jun 2016

Because you cannot set it like this. To center and object we use setPositionByOrigin where we switch the position to center,center, we place where we want and then we go back to the positioning top,left.
No other way to do this.

asturur on 6 Jun 2016

@asturur Then how would I create a function to position something in the center of the cavas (even when it's zoomed?) I am trying to create Left Align, Right Align, and so on..., but without me being able to calculate the points is there any way I could do this?

Even the function below has the same issues:

function AlignHorizontal() {
    var object = editor.getActiveObject() || editor.getActiveGroup();
    if(object) {
        //object.setLeft((editor.getWidth() / 2) - (object.getWidth() / 2));
        object.setPositionByOrigin(new fabric.Point(editor.getWidth() / 2, object.top), "center", object.originY);
    }
}