www.webdeveloper.com
Results 1 to 12 of 12

Thread: Convert to touch events

  1. #1
    Join Date
    Oct 2012
    Posts
    16

    Convert to touch events

    Hi

    I'm learning javascript and trying to put it also on mobile (android). How can I translate this function on touch events? Thank you

    Code:
    //Draw circle
    function drawCircle(e) {
    
    	var canvasOffset = canvas.offset();
    	var canvasX = Math.floor(e.pageX-canvasOffset.left);
    	var canvasY = Math.floor(e.pageY-canvasOffset.top);
    
    	
    	cb_ctx.beginPath();
     	cb_ctx.arc(canvasX,canvasY,cb_ctx.lineWidth/2,0,Math.PI*2,true);
     	cb_ctx.fillStyle = cb_ctx.strokeStyle;
     	cb_ctx.fill();
    
    }

  2. #2
    Join Date
    Mar 2007
    Location
    U.K.
    Posts
    1,127
    The code that you posted is irrelevant to the question.
    What current event handlers do you want to duplicate?
    Where used, return should be executed unconditionally and always as the last statement in the function.

    That's my signature, it's not part of the damn post!

  3. #3
    Join Date
    Oct 2012
    Posts
    16
    I've got these event handlers and would like to use the mentioned function on touchdown.

    Code:
    	cb_canvas = document.getElementById("cbook");
    
    	cb_lastPoints = Array();
    
    	if (cb_canvas.getContext) {
    		cb_ctx = cb_canvas.getContext('2d');
    		cb_ctx.lineWidth = 14;
    		cb_ctx.strokeStyle = "#0052f8";
    		cb_ctx.lineJoin="round";
    		cb_ctx.lineCap="round"
    		cb_ctx.beginPath();
    
    		cb_canvas.onmousedown = startDraw;
    		cb_canvas.onmouseup = stopDraw;
    		cb_canvas.ontouchstart = startDraw;
    		cb_canvas.ontouchstop = stopDraw;
    		cb_canvas.ontouchmove = drawMouse;
    	}

  4. #4
    Join Date
    Mar 2007
    Location
    U.K.
    Posts
    1,127
    Quote Originally Posted by jumbee View Post

    Code:
    		cb_canvas.ontouchstop = stopDraw;
    That should be ontouchend. Are you saying the other touch handlers aren't working?
    Where used, return should be executed unconditionally and always as the last statement in the function.

    That's my signature, it's not part of the damn post!

  5. #5
    Join Date
    Oct 2012
    Posts
    16
    hi

    all the others are working just fine. also this drawCircle function works fine, but just in a browser. As soon as I export it to my android phone, it stops.

  6. #6
    Join Date
    Oct 2012
    Posts
    16
    I forgot to add also this. I call this drawCirle function here:
    Code:
    function stopDraw(e) {
    	drawCircle(e);
    	e.preventDefault();
    	cb_canvas.onmousemove = null;
    }
    and as I have said, it works fine in a browser, but it doesn't work on the phone.

  7. #7
    Join Date
    Mar 2007
    Location
    U.K.
    Posts
    1,127
    Quote Originally Posted by jumbee View Post
    I forgot to add also this. I call this drawCirle function here:
    Code:
    function stopDraw(e) {
    	drawCircle(e);
    	e.preventDefault();
    	cb_canvas.onmousemove = null;
    }
    and as I have said, it works fine in a browser, but it doesn't work on the phone.
    Did you rename the event handler to ontouchend ?

    Have you determined whether or not stopDraw is being called?
    Where used, return should be executed unconditionally and always as the last statement in the function.

    That's my signature, it's not part of the damn post!

  8. #8
    Join Date
    Oct 2012
    Posts
    16
    StopDraw is being called. I have put on the beginning of the drawCircle function an alert and as I have touched and moved my finger it showed up. I can send you the complete code so you can see

  9. #9
    Join Date
    Mar 2007
    Location
    U.K.
    Posts
    1,127
    Quote Originally Posted by jumbee View Post
    StopDraw is being called. I have put on the beginning of the drawCircle function an alert and as I have touched and moved my finger it showed up.
    From the code you showed, I would expect StopDraw to be called when you lift off.
    Where used, return should be executed unconditionally and always as the last statement in the function.

    That's my signature, it's not part of the damn post!

  10. #10
    Join Date
    Oct 2012
    Posts
    16
    yes it is true. bellow I have pasted the complete code...

    Code:
    	cb_canvas = document.getElementById("cbook");
    
    	cb_lastPoints = Array();
    
    	if (cb_canvas.getContext) {
    		cb_ctx = cb_canvas.getContext('2d');
    		cb_ctx.lineWidth = 14;
    		cb_ctx.strokeStyle = "#0052f8";
    		cb_ctx.lineJoin="round";
    		cb_ctx.lineCap="round"
    		cb_ctx.beginPath();
    
    		cb_canvas.onmousedown = startDraw;
    		cb_canvas.onmouseup = stopDraw;
    		cb_canvas.ontouchstart = startDraw;
    		cb_canvas.ontouchstop = stopDraw;
    		cb_canvas.ontouchmove = drawMouse;
    	}
    
    
    
    	
    	
    function startDraw(e) {
    	if (e.touches) {
    		// Touch event
    		for (var i = 1; i <= e.touches.length; i++) {
    			cb_lastPoints[i] = getCoords(e.touches[i - 1]); // Get info for finger #1
    		}
    	}
    	else {
    		// Mouse event
    		cb_lastPoints[0] = getCoords(e);
    		cb_canvas.onmousemove = drawMouse;
    	}
    	
    	return false;
    }
    
    // Called whenever cursor position changes after drawing has started
    function stopDraw(e) {
    	drawCircle(e);
    	e.preventDefault();
    	cb_canvas.onmousemove = null;
    }
    
    //Draw circle
    function drawCircle(e) {
        var canvasOffset = canvas.offset();
    	var touch = event.touches;
    //	var canvasX = Math.floor(e.pageX-canvasOffset.left);
    //	var canvasY = Math.floor(e.pageY-canvasOffset.top);
    	var canvasX = touch.pageX;
    	var canvasY = touch.pageY;
    
    	
    	cb_ctx.beginPath();
     	cb_ctx.arc(canvasX,canvasY,cb_ctx.lineWidth/2,0,Math.PI*2,true);
     	cb_ctx.fillStyle = cb_ctx.strokeStyle;
     	cb_ctx.fill();
    
    }
    
    
    function drawMouse(e) {
    	cb_ctx.beginPath();
    	if (e.touches) {
    		// Touch Enabled
    		for (var i = 1; i <= e.touches.length; i++) {
    			var p = getCoords(e.touches[i - 1]); // Get info for finger i
    			cb_lastPoints[i] = drawLine(cb_lastPoints[i].x, cb_lastPoints[i].y, p.x, p.y);
    		}
    	}
    	else {
    		// Not touch enabled
    		var p = getCoords(e);
    		cb_lastPoints[0] = drawLine(cb_lastPoints[0].x, cb_lastPoints[0].y, p.x, p.y);
    	}
    	cb_ctx.stroke();
    	cb_ctx.closePath();
    	//cb_ctx.beginPath();
    
    	return false;
    }
    
    // Draw a line on the canvas from (s)tart to (e)nd
    function drawLine(sX, sY, eX, eY) {
    	cb_ctx.moveTo(sX, sY);
    	cb_ctx.lineTo(eX, eY);
    	return { x: eX, y: eY };
    }
    
    // Get the coordinates for a mouse or touch event
    function getCoords(e) {
    	if (e.offsetX) {
    		return { x: e.offsetX, y: e.offsetY };
    	}
    	else if (e.layerX) {
    		return { x: e.layerX, y: e.layerY };
    	}
    	else {
    		return { x: e.pageX - cb_canvas.offsetLeft, y: e.pageY - cb_canvas.offsetTop };
    	}
    }

  11. #11
    Join Date
    Mar 2007
    Location
    U.K.
    Posts
    1,127
    Quote Originally Posted by jumbee View Post
    Code:
    	cb_canvas.ontouchstop = stopDraw;
    For the third time: That needs to be ontouchend

    I'm done with this thread.
    Where used, return should be executed unconditionally and always as the last statement in the function.

    That's my signature, it's not part of the damn post!

  12. #12
    Join Date
    Oct 2012
    Posts
    16
    oh, sooooorry. i was not reading it well. your suggestion helps a bit, but now a funny thing happened. circle is drawn in the top left corner. center coordinates are 0,0. strange...

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles