I have a canvas object which once you mousedown, it will begin "sliding" the content of the canvas until you mouse up. It does not seem like mousemove is triggered for hand-held devices (my Kindle Fire).
I've noticed though that google maps is able to achieve this effect, so how do they do it? What is the accepted method for determining the position of someone dragging their finger across a canvas object?
You want to use the touchmove event. It's supported on iOS and Android.
Related
I've got an library that allows drawing on a canvas. Currently, it supports mouse and touch events. I'd like to add support for pointer events as well.
I'm handling pointerdown, pointermove and pointerup events on the canvas element. Everything works fine in Chrome on my laptop when I use mouse. However, when I try it out on my tablet, I'm only getting a few pointermove events (2-5) before getting pointercancel event followed by pointerout and pointerleave.
I guess the browser is triggering pointercancel, because moving my finger over the canvas triggers scrolling of the whole page as well.
To disable scrolling when using touch events, I'm calling event.preventDefault() in handlers for touchstart and touchmove events, but this solution doesn't seem to be working with pointer events.
How to disable scrolling of the whole page when I draw over the canvas element when using pointer events?
Have you tried the CSS property touch-action: none? It disables any kind of user-agent behavior (like scrolling) on an element.
For more fine grained options checkout the MDN article for touch-action.
I am working on a web app that is being loaded on a mobile device. It currently tracks finger position on a html canvas using touchmove (which works great). However, what doesn't work currently is when my finger is still, but my canvas itself is moving I can't find a way to track my finger's new x,y coordinates relative to the center of the canvas. Is there any way to do this nicely?
Thanks,
Aaron.
Go to any online multitouch javascript demo page; here are some:
mdn (same as jsfiddle.net/Darbicus/z3Xdx/10/) or this. I can only post max 2 links but every online multitouch demo i could find has same behaviour as described here.
Put one finger on canvas and don't move or release it. Now put another finger on canvas and try to draw some shape by moving it (be careful not to make movement with first finger). It doesn't draw shape, touchmove event is not happening for 2nd touch! Don't release any finger yet. Try to move only first finger. Now you get touchmove event for both fingers at once and all events work fine (immediately) for both touches from now on.
I tested it on 2 different tablets with Android 4.2.2. On both tablets i tested it first with Chrome 31 and 32 and then with Firefox 26. Always same result.
Why is touchmove event not firing for second touch if first touch hasn't moved yet? How to solve this?
Google fixed this behaviour in latest Chrome beta version 33 (https://src.chromium.org/viewvc/chrome?revision=244063&view=revision)
Firefox and Opera still have this problem.
I originally wanted to track one-finger panning on mobile webkit (iOS/Android). I found Creating a "sticky" fixed-position item that works on iOS Safari and I saw gesturechange. But as far as I tried, gesturechange only seems to be fired for two-finger move. Then I found touchmove event and it seems I can use that.
What are differences between touchmove and gesturechange?
Is it right to use touchmove for detecting one-finger panning?
1.Touchmove, touchstart, touchend, touchcancel are part of the multi-touch sequence. A multi-touch sequence begins when a finger first touches the surface.
gesturechange, gesturestart, gestureend are still part of multi-touch sequence but they contain more precise objects. Not all devices support gesture events. They contain scaling and rotation information allowing gestures to be combined, if supported by the platform. If not supported, one gesture ends before another starts.
2.So if you are just aiming for one finger such as swipe or slider I would use just use the touchmove. Unless you really want to turn your swipe into a 3d effect or rotate it i would combine touchmove and gesturechange.
GL
source:
https://developer.apple.com/library/safari/documentation/appleapplications/reference/safariwebcontent/HandlingEvents/HandlingEvents.html#//apple_ref/doc/uid/TP40006511-SW1
I am having a redraw issue, when you are scrolling the canvas will not redraw until you release your touch. The problem with that is I depend on "ontouchmove" to move my character around. So until the touch is release, the canvas will not redraw.
Another problem is when ever the canvas is touched it is focus, or activated. It develops a focus ring around it. I tried setting both the :focus and :active pseudo's borders and outlines to nothing. Also I saw "drawFocusRing" for the context of the canvas, however that didn't seem to resolve the issue.
Currently I tested on Android stock browser 2.2 (MyTouch 3G)
I believe the orange focus ring is more in relation to the WebView you are using to view the canvas maybe? I know I had a similar issue with js drawing on a canvas.
myWebView.setFocusable(false)
myWebView.setFocusableInTouchMode(false)
Should solve the focus problem.
I don't know about Android specifically, but in mobile Safari you can prevent scrolling using the event.preventDefault() method. If your application requires scrolling, it might be possible to implement your own scrolling mechanism whilst still preventing the default behaviour, maybe by combining touch events with CSS positioning on a page wrapper div?