Fabric.js: Scrollbars for zooming

[virror]

Would it be possible to support scrollbars for a zoomed canvas?

[asturur]

I have the same need
Either you create a big canvas and you put in a container and you do not use the translation effect
(drawing and clearing more than necessary)
Or you draw fake scroll bars over the canvas.

If have a third option, please tell me

[virror]

No, those two are the only ones i can think of as well.
Not sure which one are the cheapest, i guess the second one?
The fake scrollbar would catch the scroll event and then use that info to translate the zoomed canvas i guess?

[asturur]

yes exactly.

[virror]

Faking a scrollbar seems a bit complicated, not sure im up to that, especially not something with high enough quality to go into fabric : /

[asturur]

i do not think is so bad.
Imagine a rect.
locked to move just on X axis ( function available )
no borders no controls ( function available )
onMoving event ( function available ) => change viewport transform.

only problem here is that "do not select on multiselection" bug that is still around

I do not think is so complicated / so much code to justify an insertion on the library

Consider also on the kitchensink demo there is a drag to pan demo.

[virror]

Posted a $10 bounty on bountysource if anyone want to give it a go.

[virror]

https://www.bountysource.com/issues/36887503-scrollbars-for-zooming

[awehring]

I solved the problem with a container, that holds the canvas. If the size of the canvas becomes bigger (by zooming), the container creates automatically the scrollbars (CSS overflow: auto;).

Like this (I simplified my code to the essence) :

HTML:
<div id="my-canvas-container"></div>

JavaScript:

// Add mycanvas to DOM
$("#my-canvas-container").append('<canvas id="mycanvas"  width="' + CANVAS_WIDTH + '" height="' + CANVAS_HEIGHT + '" ></canvas>');

canvas = new fabric.Canvas("mycanvas", {
    // some settings, whatever is needed
    perPixelTargetFind: true,               
    targetFindTolerance: 4,                 
    preserveObjectStacking: true            
});

// Set canvas size according to my initial zoom_value
canvas.setZoom(zoom_value);
canvas.setWidth(CANVAS_WIDTH * zoom_value);
canvas.setHeight(CANVAS_HEIGHT * zoom_value);

Appears easier to me than a fake fabric.js scrollbar.
I don't see any need for additional drawing and clearing. You just work at the canvas as if it is completely visible.

[asturur]

the problem us the zoom level.
if you zoom 10x and get from 1000x700 to 10.000 x7000 how are performance?

[butch2k]

Actually it's not that bad, it's the method I used before the viewport transforms were implemented. It really depends on the navigator though. IIRC FF was a bit sluggish. 

On Fri, Aug 19, 2016 at 11:36 PM +0200, "Andrea Bogazzi" [email protected] wrote:

the problem us the zoom level.

if you zoom 10x and get from 1000x700 to 10.000 x7000 how are performance?

—
You are receiving this because you are subscribed to this thread.
Reply to this email directly, view it on GitHub, or mute the thread.

[awehring]

Isn't the speed mainly dependent on the number / complexity of objects?

It's a drawing application I'm working on. My max zoom level is 500%.

A simple test shows a beginning slugishness with 500 circles. For the drawing app thats no problem, for a game it might be.
The zoomed canvas is 3000 x 2000. The zoom level seems to have no effect on speed.

(IE 11 / Win 7 / Notebook with i7-4702 MQ, 2.2 GHz)

[butch2k]

What seems to matter is the size of the background picture if you have one, as far as I remember. 

On Sat, Aug 20, 2016 at 11:34 AM +0200, "awehring" [email protected] wrote:

Isn't the speed mainly dependent on the number / complexity of objects?

It's a drawing application I'm working on. My max zoom level is 500%.

A simple test shows a beginning slugishness with 500 circles. For the drawing app thats no problem, for a game it might be.

The zoomed canvas is 3000 x 2000. The zoom level seems to have no effect on speed.

(IE 11 / Win 7 / Notebook with i7-4702 MQ, 2.2 GHz)

—
You are receiving this because you commented.
Reply to this email directly, view it on GitHub, or mute the thread.

[asturur]

3000x2000 is a fine canvas yet.
But imagine you user has a macbook with a retina screen, it goes up to 6000x4000 automatically.
For what i remember ie, at least 10, can t go over 5000 as dimension.
Other than background picture ( if static it can be behind canvas and zoomed differently ) you have to count that every frame you clear all the canvas and the top canvas.
Itext has been improved recently to clear just the part of screen that has the blinkin cursor, otherwise before was clearing all top canvas.

Also you use chrome and firefox, but lot of people uses IE yet that is slower on canvas.

Both impementation are fine, i belive that using the built in viewport is more perfomant.

@virror i need to build some scrollbars i ll show you a demo. But unless i found a super simple way to pull in library i won t pull them. Maybe an official extension.

[asturur]

3000x2000 is a fine canvas yet.
But imagine you user has a macbook with a retina screen, it goes up to 6000x4000 automatically.
For what i remember ie, at least 10, can t go over 5000 as dimension.
Other than background picture ( if static it can be behind canvas and zoomed differently ) you have to count that every frame you clear all the canvas and the top canvas.
Itext has been improved recently to clear just the part of screen that has the blinkin cursor, otherwise before was clearing all top canvas.

Also you use chrome and firefox, but lot of people uses IE yet that is slower on canvas.

Both impementation are fine, i belive that using the built in viewport is more perfomant.

@virror i need to build some scrollbars i ll show you a demo. But unless i found a super simple way to pull in library i won t pull them. Maybe an official extension.

[virror]

@awehring I tried this method and its working fine as long as i zoom i around the top left corner. if i zoom around the center as an example the canvas grows right/bottom. Is there any way of controlling how the canvas grows or to move it without moving the content inside?

[awehring]

Yes, try zoomToPoint().

[virror]

Thats what im using. The issue is that i use it to zoom in around the mouse cursor, so i need some logic to get the canvas to grow in the correct directions depending on where i zoom around : /

[awehring]

I do not really understand your problem. Your context seems to be different from mine.

[Rad1calDreamer]

i need to build some scrollbars i ll show you a demo. But unless i found a super simple way to pull in library i won t pull them. Maybe an official extension.

any progress or may be some demo?

[duyhung85]

I was looking for a solution and come across this thread. In my application, I did setZoom() then set width and height of the canvas and its really laggy when the canvas getting bigger. I see shutterstock editor successfully implements this scroll inside canvas so the canvas size remains the same hence no laggy. I am not sure know how they did it, maybe just like @asturur suggested?

[asturur]

basic viewport usage.
i m updating the website with the current beta as it is, to ease transition.

one of the thing is add a complete viewport demo.

[DangerD256]

Hi, any demo? Need to add scrollbars. Currently zooming in by mouse wheel and moving viewport with ALT+MouseDown, but i have issues with that and it's not convenient and need to add some help info to user.

[asturur]

So scrollbars needs custom coding, i have no problem providing an example on how to build them, but i m a bit busy right now

[ravi2519]

From last comment of @asturur i guess we don't have any working example as of now.
Can anyone please guide me if it is fine to use 'relativePan' for this purpose?
I am trying to scroll horizontally and vertically using following utilities:

canvas.relativePan( new fabric.Point( -100, 0 ) ); // scroll horizontally by 100 px
canvas.relativePan( new fabric.Point( 0, -100 ) ); // scroll vertically by 100px

[ravi2519]

Here is the workaround that i have implemented.
I am using jQuery UI Slider elements as my horizontal and vertical slider.
But they can be implemented as you wish.
As posted above i am using 'relativePan' utility from fabric, since if found that it was already doing the transform.

https://jsfiddle.net/ravi2519/zpqecqrL/

Hope this work

[TheMangoTrain]

Some additional input...

I lean towards handling everything within , rather than trying to juggle duties between the HTML container and canvas. Sure it's nice to not have to re-build scrollbars, but in my experience if it works in one browser, it fails in another. Across the spectrum of devices/browser/os's, scrollbars aren't consistent. Second, with regard to touch gestures, what happens if gesturing occurs across the threshold between canvas and html real estate?

[asturur]

i'll reopen it later.