CODEWITHSUNDEEP
fabricjs
sara
sara

Reputation: 885

Touch event equivalent to mouse down

I'm trying to use a mouse:down event on canvas like:

canvas.on('mouse:down', function(options) {}

How can I use touchstart event handler?

Upvotes: 0

Views: 3261

Answers (1)

mansim
mansim

Reputation: 727

I hope this helps

// TOUCH EVENTS
canvas.addEventListener("touchstart", function (e) {
  e.preventDefault();
  var mousePos = getTouchPos(canvas, e);
  var touch = e.touches[0];
  // do_mouse_click_logic(mousePos.x, mousePos.y, touch.clientX, touch.clientY);
}, false);

canvas.addEventListener("touchend", function (e) {
  e.preventDefault();
  var mousePos = getTouchPos(canvas, e);
  // do_mouse_up_logic(mousePos.x, mousePos.y);
}, false);

canvas.addEventListener("touchmove", function (e) {
  e.preventDefault();
  var mousePos = getTouchPos(canvas, e);
  var touch = e.touches[0];
  // do_mouse_move_logic(mousePos.x, mousePos.y, touch.clientX, touch.clientY);
}, false);

function getTouchPos(canvasDom, touchEvent) {
  var rect = canvasDom.getBoundingClientRect();
  return {
    x: touchEvent.touches[0].clientX - rect.left,
    y: touchEvent.touches[0].clientY - rect.top
  };
}


// MOUSE EVENTS
canvas.addEventListener('mousedown', function(evt) {
  evt.preventDefault();
  var mousepos = get_mouse_pos(canvas, evt);
  // do_mouse_click_logic(mousepos.x, mousepos.y, evt.pageX, evt.pageY);
}, false);

canvas.addEventListener('mousemove', function(evt) {
    evt.preventDefault();
    var mousepos = get_mouse_pos(canvas, evt);
    // do_mouse_move_logic(mousepos.x, mousepos.y, evt.pageX, evt.pageY);
});

canvas.addEventListener('mouseup', function(evt) {
    evt.preventDefault();
    var mousepos = get_mouse_pos(canvas, evt);
    // do_mouse_up_logic(mousepos.x, mousepos.y);
}, false);

function get_mouse_pos(canvas, evt) {
    var rect = canvas.getBoundingClientRect();
    return {
        x: evt.clientX - rect.left,
        y: evt.clientY - rect.top
    };
}

function do_mouse_click_logic(x, y, page_x, page_y) {
  // Do your stuff
}

function do_mouse_move_logic(x, y, page_x, page_y) {
  // Do your stuff
}

function do_mouse_up_logic(x, y) {
  // Do yuor stuff
}

Upvotes: 1

Related Questions