On Nov 17, 3:27 am, naugem <nau...@gmail.com> wrote:
> Hello,
>
> I have a simple web app that consists of a circle moving around. When
> I do a swipe, the app freezes and the circle stops moving, and I have
> to do another swipe/tap to set it in motion again. This only happens
> in Andoid 2.2 devices (2.3 works OK). Does anyone know why this
> happens? How can I avoid this?
>
> Here's the code:
>
> <!doctype html>
> <html>
> <head>
> <meta charset="UTF-8" />
> <title>Canvas Test</title>
> <script type="text/javascript" src="touch.js"></script>
> </head>
> <body>
> <section>
> <div>
> <canvas id="canvas" width="400" height="300">
> This text is displayed if your browser
> does not support HTML5 Canvas.
> </canvas>
> <canvas id="canvas2" width="400" height="300">
> This text is displayed if your browser
> does not support HTML5 Canvas.
> </canvas>
> </div>
>
> <script type="text/javascript">
> var canvas;
> var ctx;
> var x = 400;
> var y = 300;
> var dx = 2;
> var dy = 4;
> var WIDTH = 400;
> var HEIGHT = 300;
>
> function circle(x,y,r) {
> ctx.beginPath();
> ctx.arc(x, y, r, 0, Math.PI*2, true);
> ctx.fill();
> }
>
> function rect(x,y,w,h) {
> ctx.beginPath();
> ctx.rect(x,y,w,h);
> ctx.closePath();
> ctx.fill();
> }
>
> function clear() {
> ctx.clearRect(0, 0, WIDTH, HEIGHT);
> }
>
> function init() {
>
>
> document.getElementById('canvas').addEventListener('touchstart',
> touchStart);
>
> document.getElementById('canvas').addEventListener('touchmove',
> touchMove);
> document.getElementById('canvas').addEventListener('touchend',
> touchEnd);
>
> canvas = document.getElementById("canvas");
> ctx = canvas.getContext("2d");
> return setInterval(draw, 10);
> }
>
> function draw() {
> clear();
> ctx.fillStyle = "#FAF7F8";
> rect(0,0,WIDTH,HEIGHT);
> ctx.fillStyle = "#444444";
> circle(x, y, 10);
>
> if (x + dx > WIDTH || x + dx < 0)
> dx = -dx;
> if (y + dy > HEIGHT || y + dy < 0)
> dy = -dy;
>
> x += dx;
> y += dy;
> }
>
> init();
> </script>
> </section>
> </body>
> </html>
>
> <<--- touch.js --->>
>
> var triggerElementID = null;
> var fingerCount = 0;
> var startXPosition = 0;
> var startYPosition = 0;
> var currentXPosition = 0;
> var currentYPosition = 0;
> var minLength = 72;
> var swipeLength = 0;
> var swipeDirection = null;
>
> function touchStart(event,passedName) {
> event.preventDefault();
> fingerCount = event.touches.length;
>
> if (fingerCount == 1 ) {
> startXPosition = event.touches[0].pageX;
> startYPosition = event.touches[0].pageY;
> triggerElementID = passedName ? passedName : this.id;
> } else {
> touchCancel(event);
> }
>
> }
>
> function touchMove(event) {
> event.preventDefault();
>
> if (event.touches.length == 1 ) {
> currentXPosition = event.touches[0].pageX;
> currentYPosition = event.touches[0].pageY;
> } else {
> touchCancel(event);
> }
>
> }
>
> function touchEnd(event) {
> try {
> event.preventDefault();
> if ( fingerCount == 1 && currentXPosition != 0 ) {
> currentXPosition = event.touches[0].pageX;
> currentYPosition = event.touches[0].pageY;
>
> swipeLength =
> Math.round(Math.sqrt(Math.pow(currentXPosition -
> startXPosition,2) + Math.pow(currentYPosition - startYPosition,2)));
>
> if ( swipeLength >= minLength ) {
> caluculateAngle();
> }
> }
> } finally {
> touchCancel(event);
> }
>
> }
>
> function touchCancel(event) {
> fingerCount = 0;
> startXPosition = 0;
> startYPosition = 0;
> currentXPosition = 0;
> currentYPosition = 0;
> swipeLength = 0;
> swipeDirection = null;
> triggerElementID = null;
>
> }
>
> Thanks!
--
You received this message because you are subscribed to the Google
Groups "Android Developers" group.
To post to this group, send email to android-developers@googlegroups.com
To unsubscribe from this group, send email to
android-developers+unsubscr...@googlegroups.com
For more options, visit this group at
http://groups.google.com/group/android-developers?hl=en
