I am creating an application that allows users to draw on the screen using the HTML5 Canvas tag.
This works great when using a mouse, and I even got it working on android using jquery touch.
The problem comes when using a windows 7 or 8 tablet. The reason for why it wont work is simple, the browser tries to scroll instead of mousedown and drag.
The reason why it works on android and not windows is due to the fact that android supports ontouchstart and ontouchend while I can't get it to work on windows tablets.
So, is there any way to get the browser to stop trying to scroll and draw on the screen?
Thanks.
Related
Since I´m working on a project where I need to be able to drag objects around my canvas but also to scroll the entire page by dragging the actual canvas 'background' behind my PIXI Sprites, i followed the findings of this guy here:
https://github.com/pixijs/pixi.js/issues/2483 :
By default, the Pixi canvas/display-area cannot be used to scroll the
webpage that contains it. Which is important on touch screens. (eg. If
you use the rest of the web-page to pinch-zoom into the Pixi canvas,
you can become trapped and unable to zoom back out (or pan away),
because there's no non-Pixi-canvas area of the page to "grab" with
your pinch gesture).
To enable this functionality, I use autoPreventDefault. But this comes
with some undesirable side-effects, like scroll/pinch-zoom actions
over the canvas registering "taps" or clicks in a way that doesn't
make sense. (ie. I'm attempting to zoom or scroll the outer page at
that point, not interact with the Pixi canvas)
To work around that, I modify and compile my own custom version of
Pixi where I can apply preventDefault in a more granular way...
To get page-scrolling functionality it seems I only need to
preventDefault in the InteractionManager.prototype.onTouchEnd
function. Whereas autoPreventDefault will also preventDefault on 3
other events. (onMouseDown, onTouchMove, onTouchStart).
Leaving autoPreventDefault = false and applying preventDefault only to
onTouchEnd, gives me the functionality I need. But it'd be nice to not
have to customize and rebuild Pixi in this way every release. (Sorry
if there's something else I'm missing here; I don't completely
understand the event system in Pixi, or what else to do about this
scroll-touch problem)
So i disabled e.preventDefault() on 'onTouchStart' and on 'onMouseMove' but left it as is on 'onTouchEnd'
This works perfect on IOS devices but not on Android, the only exception being a Samsung A7 using Adblock browser (fails on Chrome).
Would really appreciate some help on this.
TLDR:
Disabling PIXI´s e.preventDefault on onTouchStart and onMouseMove works on IOS devices and lets me scroll the page by draggin my canvas around but not on Android devices.
My solution for that was to use
renderer.plugins.interaction.autoPreventDefault = false
This should work on iOS and Android.
Docs for autoPreventDefault reads:
Should the manager automatically prevent default browser actions.
Using PIXI 4.5.6.
Take a look at the docs:
http://pixijs.download/dev/docs/PIXI.CanvasRenderer.html#plugins
http://pixijs.download/dev/docs/PIXI.interaction.InteractionManager.html
Using renderer.plugins.interaction.autoPreventDefault=true should do the trick.
My app uses HTML5 canvas and uses Cordova to build an .apk file.
I have tested my app on 5 devices running varying versions of Android OS and of varying hardware capabilities. The only one which lagged was a Samsung Galaxy Ace 2, running Android 2.3.6 Gingerbread. I believe it is an OS issue because phones tested with similar/worse hardware do not lag.
When the screen is touched and remains touched, the lag is greatly reduced. I noticed that pixels seem smoothed or anti-aliased when the screen is not touched but more pixelated when the screen is touched, I believe this to be causing the lag. I prefer less pretty with no lag than the opposite. My javascript does not cause this to happen, and so I am stuck on how to resolve it.
The following did not solve the problem:
context.imageSmoothingEnabled = false;
and using CSS image-rendering settings did not help.
The javascript has touchstart, touchend and touchmove event listeners so I attempted to hack my way by faking the touchmove event even if the user was not touching the screen, although I couldn't get this working and it's not a very elegant solution anyway.
I have had this problem for weeks and want my apps to work on all devices.
Does anyone have any suggestions?
Thanks, George.
I am working on a website which has an canvas on it. I have an image in the canvas, and what I want to do is pinch to zoom the image (the web page will eventually be on a touch screen). I am using jGestures for detecting pinch event. However, I wonder if there is a way to test on a Mac computer, because when I do pinch on mac trackpad, it zooms the webpage, not the canvas, which means that the pinch on trackpad does not apply to my canvas tag, it zooms my webpage (the font, the width, the height). I also wonder if magic trackpad or magic mouse can do it. Could anyone help?
If you have Xcode you could run the iOS simulator. The simulator would allow you to pinch. Hold down Option key and you should be able to mouse click to zoom in and out.
I got multitouch working on my MacBook's trackpad with npTUIOClient (see article) with an old version of Chrome. Think it was v.10 or so.
The javascript library I have created just translates a single picture and zooms it. Touch events and mouse events are used depending on what device.
I ran this javascript code on Firefox (7.0.1), iPhone 3GS (iOS 5.0) and iPhone 4 (iOS 5.0) all with smooth performance, no problem at all.
Then I ran it on iPad 1 (iOS 5.0) with slow performance though zooming and translating the picture works.
Last test was on iPad 2 (iOS 4.3.3) and here I experienced the same slow performance while zooming as iPad 1 but the translating didnt work at all.
I have no clue what this is about, since iPhone is supposed to be alot weaker than an iPad. I would appreciate any help or comments to get me on the right track.
http://pastebin.com/wZ7e77yq
UPDATE
I just ran it on an iPad 2 (iOS 5.0) and it works flawlessly. I also tried iPhone 3GS (iOS 4.2.1) and it didnt work, same as iOS 4.3.3. This means that my application needs iOS 5.0 to run... is it really true you couldnt translate objects before iOS 5.0?
UPDATE2
I just ran it on three different iPad 1s (iOS 5.0) and it doesnt work very good. What is the big difference in between an iPhone 4 and an iPad 1? Specs are almost identical. Also the translate didnt work because the function event.pageY/X doesnt work prior to iOS 5. This was fixed by using event.touches.pageX/Y instead.
Well I was developing a small game for testing canvas performance without any special game framework so I kept it simple because I was writing it by myself. The program did nothing special, just moving a sprite around the screen with different joystick types, such as keyboard and mouse for desktop click, and touch events for iOS. I discovered the following:
Using taps direct on the canvas results in poor performance compared to touch events.
Touch events worked well with different canvas sizes up to 1024x768.
I didn't try picture zooming, but that should have be fine as well.
event.pageX, event.pageY worked without problems on iPad (iOS5).
I hope that helps.
Seems like perhaps iOS CANVAS support was the issue. iOS5 has full GPU hardware-accelerated CANVAS support, while previous versions supported CANVAS albeit very poorly.
Surprised that it does not work well on iPad 1 even with iOS 5, though. Can you try closing all currently-running apps, close all other browser tabs, and run the test again?
I am updating my scrolling game engine to output HTML5 code for the scrolling maps it generates, so that it can be used not only as a (somewhat-platform-specific) complete game creator, but also as a cross-platform HTML5 scrolling map editor. I got past the challenge of supporting the graphic tinting as described in my earlier question. And I have a nice sample running at http://sgdk2.enigmadream.com/ben/. However I have noticed that the mouse interaction for scrolling the map does not work on FireFox or on an iPod. It looks like iPod may use different events (ontouch etc) according to Native HTML5 Drag and Drop in Mobile Safari (iPad, iPod, iPhone)?. And that doesn't explain why FireFox wouldn't react. Isn't there a more universal way to support mouse or touch interaction? Do the touch events also work for mouse, or are they specific to touch? How would you recommend interacting with this scrolling map in the most cross-platform compatible way?
you need to correctly retrieve your srcElement
var srcEl = e.srcElement? e.srcElement : e.target;
try it
P.S.: see targets