search

CreateJS / EaselJS

The Easel Javascript library provides a full, hierarchical display list, a core interaction model, and helper classes to make working with the HTML5 Canvas element much easier.
http://createjs.com/
MIT License
8.14k stars 1.97k forks source link

Event Listener in iphone/ipad causes stage.mouseX & Y to return 0. #292

Open edwardball opened 11 years ago

edwardball commented 11 years ago

Here is a jsFiddle http://jsfiddle.net/G7SJn/6 of the basic painting example in the file CurveTo.html. I've added a very simple "clear" button which clears the canvas when it is clicked.

This works absolutely fine in all desktop browsers I've tried, but on the iPad/iPhone, once the clear button has been clicked, the demo no longer works. Even when I remove the callback function, but keep the event listener, it still breaks.

Having done a bit of debugging, it seems that Easel is still correctly detecting the mouse clicks and drags, but stage.mouseX and stage.mouseY are always returning zero, so no paint is appearing on the canvas.

As I say, this problem only seems to affect the ipad/iphone.

gskinner commented 10 years ago

I'm able to reproduce this, including on iOS8. I'll take a look at it soon and see if I can figure out what's going on.

gskinner commented 9 years ago

Further testing reveals that this is an issue with identifying the primary touch after hitting the clear button.

gskinner commented 9 years ago

Ok. So the issue here is that Stage is capturing the MouseUp event from the clear button. It sees it as a proper mouse event, so it decides that the mouse is now the permanent primary pointer.

Since Stage.mouseX/Y are updated only by the primary pointer, subsequent touches stop updating these values.

Really, the example should allow for multi-touch, but I have also added a fix that prevents any event other than a press from re-assigning the primary pointer id. I will push that shortly.

I think this is something we should re-evaluate when we have more time to do deeper changes. It really requires some testing on a Windows 8 device where we have a mouse and touch to figure out what the ideal outcomes are.

I'm going to leave this open until I have a chance to file a more specific issue for it.

Updated example: http://jsfiddle.net/G7SJn/14/

bopeterson commented 9 years ago

I have this problem now on Anroid and Chrome. I also started with the curveto demo and added crayons to change color. If I tap heavily on the crayons (shapes with eventlisteners), after a while stage.mouseX and Y always returns the same values. Not zero, but the coordintates of the tapped crayon. I use the latest release,

easeljs-0.8.0.min.js tweenjs-0.6.0.min.js

Can a fix for iOS have caused problems for Android?

bopeterson commented 9 years ago

Update: it is not rapid tappid but off canvas tapping that stops stageX from updating. I don't have any elements off canvas, just a gray background, and after tapping it, stageX and Y won't update.

TheJasonReynolds commented 9 years ago

I'm experiencing similar behavior on Android with stage.mouseX/Y becoming stuck, any info/updates on this?