I am creating a website with kinetic js + html5 canvas, it display nicely in web but i having problem when the site display in mobile, May i know is there any way to "unlock" the mobile pan and zoom function in kinetic js ?
thanks for help.
I made a KineticJS plugin to make it easy to make pannable and pinchable Layer. Feel free to check/use it: PinchLayer plugin
What you could look for are JavaScript 'gesture' libraries like jGestures which support gestures which would be the pan and zoom functions.
You can also write a function of your own which records touch positions and analyze that to check if it's a 'swipe' and then that could mean pan or zoom.
Otherwise you need to build a button or something which will allow panning or zooming when you touch or drag it.
Add the property listening to false when you create your stage.
var stage = new Kinetic.Stage({
container: 'my_container',
listening: false
});
Related
I'm trying to add the panning & zoom functionality on web & desktop for both trackpad & touch (without a modifier, click or key).
The main issue i'm facing is that the widgets I am using i.e. GestureDetector/onScale, InteractiveViewer(based on onScale)... are always working on desktop as I expect but fail to work on web: On web, zoom is fine but the only way to pan is by a tap + a 2 fingers swipe.
I am not sure if this is a limitation of browsers/js, flutter implementation or If I am missing something.
Do you have any approach to implement this?
Relevant links:
https://github.com/flutter/engine/pull/36342
https://kenneth.io/post/detecting-multi-touch-trackpad-gestures-in-javascript
I have both behaviors implemented via onPointerSignal but it only works because I make a difference between panning & zooming by pressing a specific key on top of a simple scroll event.
onPointerPanZoomStart from Listener is trackpad-specific but only works on windows.
Web/js seems to be using the ctrlKey attached to a mouse event to filter pan zoom & zoom trackpad event.
At the moment i'm exploring MultiTapGestureRecognizer and if supported by web and not touch specific, will allow me to get different pointer ids and calculate proper deltas.
My goal is to have a container of some sort, that I can zoom and pan via gestures, but also need to be able to zoom and pan to a specific location in the container via a button. I've tried all sorts of combinations of GestureDetector's mixed with Matrix4Transform and MatrixGestureDetector but am not having any luck allowing both hand and function initiated gestures to work together. Does anyone have something like this already working, and if so could you share any hints? Thanks
Take a look at this package: photo_view.
i am using cordova-plugin-googlemaps(1.4.1) in ionic(3.4.0) and i am looking for a way to rotate the map with one finger.The plugin's documentation doesn't have any events for drag.
I found some custom code for android here How can I rotate on Google Maps API(android) with only 1 finger? but i am not very familiar with java, i'll still be missing IOS functionality and this means i have to modify base plugin(i think). So I need something for Ionic's google maps plugin.
Thanks!
I would like to follow my finger movement on an iPhone screen. However this results in rubber banding and scrolling and therefore I have to turn off the default behaviours.
As explained on this website
https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariWebContent/HandlingEvents/HandlingEvents.html
I've added eventlisteners, like so
document.addEventListener('touchmove', touchMove, false);
document.addEventListener('gesturechange', gestureChange, false);
and disabled the default behaviour, like so
function touchMove(event){event.preventDefault(); //other code here}
function gestureChange(event){event.preventDefault(); //other code here}
Now, I can do what I intended to, but I can not scale the page anymore. I'm still able to retrieve the touchstart coordinates and retrieve a zoom factor from gesturechange. Logically, I would like to use those to programmatically change the page zoom. How to do that with javascript?
So far I have some success with applying the eventlistener to a div (instead of the document) and turn oft the touchmove call using a boolean once gesturestart is detected. Actually this works pretty good. I can zoom, pan and double tap on the whole document and zoom and double tap on the div. But a pan on the div executes a function to pass the coordinates (and does not pan).
How do I recreate the easing/friction for touch events in Mobile Safari? For example, if I have a scroller and drag the contents it will bounce back when you go past the top or past the bottom?
I tried messing with the cubic-bezier easing function but couldn't emulate the friction in Mobile Safari on an iPhone/iPod. I want to make the HTML page as similar to an app as possible.
Thanks!
This is not possible with pure CSS3, since scroll easing incorporates momentum physics, not a pure CSS3 easing function.
You should look at my answer to the following question -
How to implement easeOutBack easing in css transform animation