Comments (8)
Thanks for opening an issue. It would be a big help if you could provide a test case on http://codepen.io or http://jsbin.com.
from panzoom.
If you click on the panzoom in this code pen, you can see (click on one of the intersections for clearest illustration) that the zoom is offset and not directly under the mouse:
http://codepen.io/rogerlos/pen/hrKxE
Edited to add: I know I could pass the mouse event instead of finding the x,y, but I have other code in my app which requires me to do it this way. Also, thanks!
from panzoom.
@rogerlos I've forked your codepen and passed the real clientX/clientY to the focal option and that seems to work correctly:
http://codepen.io/timmywil/pen/tnkrf
Does that work for you too?
from panzoom.
I think that works, it was essentially what I came up with, too. Many thanks for looking into it.
from panzoom.
I'm also having issues with this: http://codepen.io/adrianosmond/pen/KjJCH
If I set the initial size of the tiger image to be 450x450 (the size of my container) the focal zooming works, but when I make the tiger start at 900x900 zooming happens in the wrong place. Is this due to me misunderstanding "Should either be a jQuery event or an object containing clientX/clientY to specify the point's position relative to the parent."? Or is this a bug?
Also, I contain invert doesn't calculate and enforce the minimum zoom for you in order to ensure that the whole image isn't smaller than its parent? I'm wanting to use this on a responsive site, so I have pretty much no control over the size of the parent element.
Really nice work though, thanks!
from panzoom.
@adrianosmond I believe the first is an issue with focal point zooming when the container is smaller than the image. I'll look into this.
I will also take a look at enforcing inverted containment. Thus far, I've only had use cases where I could simply set the minScale to enforce it, but that could be calculated.
As far as a responsive parent container, all dimensions are cached on initialization in order to facilitate fast panning and zooming. These cached dimensions need to be reset whenever they change. You could do this with a resize event:
$(window).resize(function() {
$panzoom.panzoom('resetDimensions');
});
from panzoom.
Hi,
Im trying to make a zoom tool with panzoom on one image. But when image isn't fix in container (with "contain: invert") focal zoom doesnt work correct.
When the container size is 100% of width and height focal zoom work perfect, but when width of image is 100%, height isnt 100%, zoom isnt work (like img size - 400x600, img container - 400x400 on scale 1).
I tried with resetDimensions, but doesnt work. Can I do something to fix this?
from panzoom.
@pensionera Thanks for letting me know. There does seem to be an issue with focal point zooming. You can track the bug with this open issue, which I hope to fix sometime this week.
from panzoom.
Related Issues (20)
- Feature (Epic?): Improve Panzoom for nested content use case (list of components, etc.) HOT 2
- Feature: adjust the zoom rate to increase with element size HOT 9
- Feature: option to pan on wheel event HOT 2
- Cannot find name '.....' in typescript files HOT 1
- Nested CSS scale causes unexpected pinch midpoint and translation behaviors HOT 2
- Feature: disable one axis scaling HOT 1
- Jitter on touch devices when zooming out 'beyond the limit'. HOT 2
- Feature: Infinite horizontal scroll, for a map HOT 2
- Incorrect pan position after zooming with a single pointer.
- Panning and Zooming to centre of a selected element HOT 2
- Pinch And Pan not much precise - at least with Canvas
- cant seem to make sense out of focal
- Feature: adapt proportionally - scale element to fit container HOT 1
- False zoom location with zoomWithWheel when having a large panzoom element HOT 2
- disablePan not working? HOT 3
- Was something like a smart option added? HOT 1
- Logitech smooth scrolling causes wheel to zoom into full min and full max HOT 1
- Pinch in Firefox does not work correctly
- How to avoid triggering the click event of a child element while moving? HOT 1
- How can I change to annotation mode when viewing mode default is for Pan/Zoom? MouseDown event override HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from panzoom.