Sample code for iPad with touch?

[craig8128]

Hi all -- I'm very impressed with EaselJS and have managed to do some neat stuff with it Chrome, FF, and Safari.

I'm hitting problems when I try to make things work on the iPad. I've got the latest version of EaselJS (the one which allows one to code

var stage = new Stage( canvas, true );

to enable touch. But I'm having a tough time dealing with touch events. I'm trying to do a simple drawing program that will draw a line as I drag my finger on the iPad screen -- but I can't seem to get any of the events to fire. I attempted to take a clue from the Portal demo at http://gskinner.com/playpen/Portal/diagram.html and do something of this nature:

        STAGE.onPress = function(evt) {

            evt.onMouseUp = onMouseUp;
            evt.onMouseDown = onMouseDown;
            evt.onMouseMove = onMouseMove;
        }
        (where onMouseUp etc are defined elsewhere)

but the onMouse* functions don't get called. I'd appreciate some guidance or sample code. Thanks!

Craig

[philmaker]

Look at:
http://philmaker.x10.bz/projects/navigator/navigator.html (view
source)
http://philmaker.x10.bz/projects/navigator/navigator.js
http://philmaker.x10.bz/projects/navigator/application.js

On May 23, 4:45 pm, craig8128 <craig.bec...@gmail.com> wrote:
> Hi all -- I'm very impressed with EaselJS and have managed to do some neat
> stuff with it Chrome, FF, and Safari.
>
> I'm hitting problems when I try to make things work on the iPad. I've got
> the latest version of EaselJS (the one which allows one to code
>
> var stage = new Stage( canvas, true );
>
> to enable touch. But I'm having a tough time dealing with touch events. I'm
> trying to do a simple drawing program that will draw a line as I drag my
> finger on the iPad screen -- but I can't seem to get any of the events to

> fire. I attempted to take a clue from the Portal demo athttp://gskinner.com/playpen/Portal/diagram.html<http://www.google.com/url?sa=D&q=http://gskinner.com/playpen/Portal/d...>and do something of this nature:

[philmaker]

Correction:

Look at
http://philmaker.x10.bz/projects/navigator/-navigator.html (View
Source)
http://philmaker.x10.bz/projects/navigator/-navigator.js
http://philmaker.x10.bz/projects/navigator/application.js

Philip

[Mike Chambers]

The drag and drop demo included with EaselJS works on the ipad.

mike

[craig8128]

On May 24, 11:32 am, Mike Chambers <mikechamb...@gmail.com> wrote:
> The drag and drop demo included with EaselJS works on the ipad.

Thanks Mike and Philip! The drag and drop demo is very useful for
allowing me to drag / move objects on the Stage. But I'm still unsure
of how I can catch touch events that occur on the Stage. For instance,
I'd like to draw a rubber-band box on the stage. How do I set things
up so that I can do this with touch on the iPad?

Again, thanks!

Craig

[philmaker]

I think you need to provide more information to get a good answer.
Easel current only provides support for single touch - not multi-
touch. If you need multi-touch support you may need to handle it
yourself:

ontouchstart
ontouchmove
ontouchend
ontouchcancel
ongesturestart
ongesturechange
ongestureend

http://developer.apple.com/library/safari/ipad/#documentation/AppleApplications/Reference/SafariWebContent/HandlingEvents/HandlingEvents.html%23//apple_ref/doc/uid/TP40006511-SW1

Philip

[craig8128]

On Jun 7, 11:03 pm, philmaker <philma...@gmail.com> wrote:
> I think you need to provide more information to get a good answer.
> Easel current only provides support for single touch - not multi-
> touch.

Sure, I understand about single touch.

I'm trying to implement something like a sketching program, where I
start with an empty canvas, touch and drag my finger and a rubber-band
line will follow my finger. When I raise my finger, the program draws
a line on the canvas. If I touch the line with my finger, it gets
selected and I can (for example) move it. And I want it to work with a
mouse inside of, say, FF on a PC, and with my finger on the iPad.

That's a really basic outline, and I've got this more or less working.
I'd written mouse Up / Down / Move handlers for a PC browser, then for
the iPad I did the following:

...
canvas.addEventListener( 'touchstart', onTouchDown, false );
canvas.addEventListener( 'touchend', onTouchUp, false );
canvas.addEventListener( 'touchmove', onTouchMove, false );
...
function onTouchDown( e ) {
var tEvent = e.touches.item(0);

onMouseDown( tEvent );
}
function onMouseDown( e ) { ... } // mouse handler for PC browser
...
function onTouchUp( e ) {
var tEvent = e.changedTouches.item(0);

onMouseUp( tEvent );
}
function onMouseUp( e ) { ... } // mouse handler for PC browser
...
function onTouchMove( e ) {
var tEvent = e.touches.item(0);

onMouseMove( tEvent );
}
function onMouseMove( e ) { ... } // mouse handler for PC browser

My question is, basically, is there a better way to do this with
EaselJS? This works, but it is not very responsive. Ie, the rubberband
line noticeably lags my finger motion.

I know that the most recent version of EaselJS has single touch
support, and I've seen how it's used in the drag-and-drop test program
(where handlers are added to each Shape). But I'd like to know if
there's a better way to do what I'm doing by attaching handlers to the
canvas.

Thanks,

Craig