Limit boundary to image max?

[kuzziemon]

Is it possible to limit zoom and pan to the image resolution?
I want to be able to zoom in and pan as if the boundaries are that of the image itself.

I've tried tinkering with the bounds option to no avail, so if I'm missing something blatantly obvious, please correct me.

[rbonomo]

Is this your problem?
https://codepen.io/rbonomo/pen/QRaRBN

Is this what you want?
https://codepen.io/rbonomo/pen/VOQwWZ
This pen uses the dist js in PR #106

[kuzziemon]

Close, but no cigar. I need the limits of the boundaries to be the max of the ratio of height or width.

In the codepen you posted, it's limited to the size of image, rather than the size of the div. It is definitely one step closer to what I am looking for.

[rbonomo]

Can you post a codepen of what you have and I will get you where you want to go? I'm not understanding "limits of the boundaries to be the max of the ratio of height or width".

[kuzziemon]

https://codepen.io/anon/pen/dEdqBR

Say I need the image to be size of a div that's 500x500 and the image itself is 3000x5000.
I need it to fit to the maximum side(in this case the height), so it will have bars on the side and prevent the panning until the image is zoomed in enough to allow space for panning up and down within the image itself.

[kuzziemon]

The autocenter() function draws it perfectly.
I need whatever autocenter generates as the bounding box, but still allow zooming in and panning within that boundary.

Also, unrelated issue but it seems that there is something wrong with the animate() function when you use scroll wheel. I've noticed the same issue when using smoothZoom. It will get hung up on the animation and cause stuttering effects when used in quick succession.

[rbonomo]

Is this what you're looking for?
https://codepen.io/rbonomo/pen/BexEPR

Just a matter of CSS for that change.

[rbonomo]

@kuzziemon you'll probably have to call the kinetic.cancel() function before using any animate functions to prevent that from happening. Look in the source code.

[kuzziemon]

I see, thanks for your help.
I've opted for another library with a bit more robust features, but this is still good to know as it still does apply.

[rbonomo]

@kuzziemon What library did you go forward with?

[bbugh]

@kuzziemon what library did you use?

[Andrew-web-coder]

The only one I could find is this one - https://fancyapps.com/docs/ui/panzoom/