View Single Post
  #4 (permalink)  
Old April 14th, 2013, 12:50 AM
WilliamDoane WilliamDoane is offline
Registered User
Points: 30, Level: 1
Points: 30, Level: 1 Points: 30, Level: 1 Points: 30, Level: 1
Activity: 0%
Activity: 0% Activity: 0% Activity: 0%
 
Join Date: Apr 2013
Posts: 6
Thanks: 0
Thanked 1 Time in 1 Post
Default One potential solution

Quote:
Originally Posted by Akira71 View Post
Quite possibly, but the book seemed to read as though it would be possible to test this in Safari at the least. It sure doesn't seem like it and since the events never get called, what you linked to makes perfect sense.

I would like to know if there is a better way to do this then. Suspect there isn't quite one.
As was noted, desktop Safari doesn't generate touch events, so the existing code sample's events never fire.

You're right that the author is vague in some places (and seems to be misleading in others [chapter 4 node installation]) about whether a given example should work on the desktop only, mobile only, sim only, or some combination there of.

Of course, this is meant to be a mobil web app book, so it's understandable that example code is best run in the sim or on a mobile device.

Regardless (and regardless that it's been over a year since you posted your missive.... sorry it took me so long to find this book!), here's one possible solution that hooks mouse events into the existing touch events:

Code:
    // included just to be able to orient oneself
    canvas.ontouchmove = function(event) {
        event.preventDefault();
        var newx = event.touches[0].clientX;
        var newy = event.touches[0].clientY - canvastop;
        line(lastx, lasty, newx, newy);
        lastx = newx;
        lasty = newy;
    }

    // new code here
    var mouseDown = 0;
    canvas.onmousedown = function(event) {
        ++mouseDown;
        event.preventDefault();
        event.touches = [ {} ];
        event.touches[0].clientX = event.clientX;
        event.touches[0].clientY = event.clientY;
        canvas.ontouchstart(event)
    }
    
    canvas.onmouseup = function(event) {
        --mouseDown;
    }
    
    canvas.onmousemove = function(event) {
        if (mouseDown) {
            event.preventDefault();
            event.touches = [ {} ];
            event.touches[0].clientX = event.clientX;
            event.touches[0].clientY = event.clientY;
            canvas.ontouchmove(event)
        }
    }
        
    var clearButton = document.getElementById('clear');
Reply With Quote