2

I'm working on a project to display some CAD drawings in a browser. The website works perfectly for desktop browsers, now I need to enable mobile use (for tablets).

My drawing is created from data by canvas drawing calls (context.lineTo, ...), I do the dragging by detecting onMouseDown/onMouseMove/onMouseUp JS events and the zooming by mousewheel events.

On mobile devices, none of that works (probably because they don't fire the events I'm catching). What's an easy way to implement touchscreen swiping as dragging and pinching as zooming?

Thanks for your help!

leosh
  • 878
  • 9
  • 22
  • On mobile devices you don't have `mousedown/mousemove/mouseup` events, but there are *touch events*. Check this link: https://developer.mozilla.org/en-US/docs/Web/Guide/DOM/Events/Touch_events – Inferpse May 31 '13 at 09:48
  • Using a library like Fabric.js is the simplest way. Or manually observe touchstart/touchmove/touchend events instead of mousedown/mousemove/mouseup ones. – kangax Jun 02 '13 at 01:17

2 Answers2

1

You should should check out KineticJS (http://kineticjs.com). It has drag/drop canvas support for mobile devices as well.

See the link below for a tutorial:

http://www.html5canvastutorials.com/kineticjs/html5-canvas-mobile-events/

Robbert
  • 182
  • 1
  • 4
1

If you want to use existing jQuery plugin's, you should check out Hammer.js. It's a very nice library to work with. However if you prefer pure Javascript solutions, you may want to check out this one: https://github.com/rombdn/img-touch-canvas I found it very useful for drag and zoom images on canvas using touch events.

Besides, here is my solutions, it's very simple and easy but it's a draggable only solution for using pure Javascript:

HTML:

<canvas id="canvas"></canvas>

JS:

var can = document.getElementById("canvas");
can.addEventListener("touchstart", ctxTouchStart, false);
can.addEventListener("touchmove", ctxTouchMove, false);
can.addEventListener("touchend", ctxTouchEnd, false);

var oX, oY, dX, dY, iX, iY;
iX = 0; iY = 0;

function ctxTouchStart(e) {
    if (!e)
        var e = event;
    e.preventDefault();

    mouseIsDown = 0;
    oX = e.targetTouches[0].pageX - canvas.offsetLeft;
    oY = e.targetTouches[0].pageY - canvas.offsetTop;
}
function ctxTouchMove(e) {
    if (!e)
        var e = event;
    e.preventDefault();
    var canX = e.targetTouches[0].pageX - canvas.offsetLeft;
    var canY = e.targetTouches[0].pageY - canvas.offsetTop;
    dX = canX - oX;
    dY = canY - oY;

    /*   redraw img on canvas
     *   where -(iX + dX) is the startX 
     *   and -(iY + dY) is the startY 
     */
    reDrawImageOnCanvas(can, img, -(iX + dX), -(iY + dY));
}
function ctxTouchEnd(e) {
    if (!e)
        var e = event;
    e.preventDefault();
    iX += dX;
    iY += dY;
}

By doing so your image can be dragged through the canvas smoothly. However I didn't figured out how to do the zooming part so I searched online and found https://github.com/rombdn/img-touch-canvas useful and switched to use this one instead. Hope my answer helps.

TonyJohn
  • 71
  • 4