Comments (5)
Sorry I didn't have time to look at this issue yet. Did you get it working?
from panzoom.
Yes thanks I removed "draggable" on #panzoom, used "contain: invert" instead of my own "reposition()", and removed one div under #panzoom that for some reason was causing a problem.
Now I only have your code handling the pan and zoom on my puzzle background and it works great ( www.puzzstory.com/world-history-puzzle.html ), last things I need to figure out is (1) how to set focus in the middle of #panzoom's parent when users click on browser's buttons and (2) how to set the focus in the middle of pinch gesture (these are issues #4 and #5). I have a big image and for some reasons it is going up and left on pinch zoom gesture...
from panzoom.
Have a look at the focal option on the zoom method and let me know if you have trouble. By the way, the focus should be the middle of a pinch gesture by default.
from panzoom.
Yes the default focus looks good in all your demos without setting any focal option so I still have a problem with my html structure...
from panzoom.
I tried
var centerPoint;
var zscale;
centerPoint.clientX = screenw/2;
centerPoint.clientY = screenh/2;
var fitScale = largestSide/backgroundSize;
$("#panzoom").panzoom(
{
maxScale: 1.2,
minScale: fitScale,
increment: 0.05,
contain: "invert",
onZoom: function( e, panzoom, scale )
{
zscale = scale;
}
}).panzoom("zoom",fitScale,{focal: centerPoint});
But it's not working, see code and everything on the page above. I even set focal to (0,0) but no change, seems like focal stays stuck in the middle of #panzoom? and I'm pretty sure this is also the problem of my pinch gesture...
Do you mind have a look at the page because I have been working on this for a while and I am running out of ideas.
from panzoom.
Related Issues (20)
- 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
- Feature: Two-finger panning on Mac trackpad HOT 2
- Saving zoom/translate state to apply to a sequence of images on load defaults to translate 0. 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.