How do i trigger mouse events in fabric.js to simulate mouse actions?

I’m able to get the jquery response on the triggering but the fabric canvas is not acting on the event.

I expect this fiddle to deselect the IText element:

fiddle

I know the fabric canvas got a trigger event, but it’s not working too.

var canvas = new fabric.Canvas("c");
var test = jQuery("#c");

test.on("mouse:down", function (){
    alert("you clicked me");
  canvas.renderAll();
  debugger;
});

canvas.on({"mousedown": function() {
  alert("you clicked me too");
}});

$("#testClick").click(function() {
  var e = jQuery.Event("mouse:down", {
    pageX: 10,
    pageY: 10
  });
  jQuery(canvas).trigger(e);//Missed - not jquery
  jQuery(jQuery("#c")).trigger(e);
  jQuery(test).trigger(e);
});

/*************** TEXT ****************/
 var text = new fabric.IText('FaBric.js', {
  fontSize: 40,
  textAlign: 'center',
  fontWeight: 'bold',
  left: 128,
  top: 128,
  angle: 30,
  originX: 'center',
  originY: 'center',
  shadow: 'blue -5px 6px 5px',
  styles: {
    0: {
      0: {
        fontSize: 60,
        fontFamily: 'Impact',
        fontWeight: 'normal',
        fill: 'orange'
      }
    }
  }

});

text.setSelectionStyles({
  fontStyle: 'italic',
  fill: '',
  stroke: 'red',
  strokeWidth: 2
}, 1, 5);
canvas.add(text);
canvas.setActiveObject(text);

EDIT 1

I have tried with both “mouse:down” and “click” event but the object doesn’t deselect: fiddle 2

Answer

It won’t be enough to just trigger events via Fabric’s trigger. The events that Fabric objects emit are not used to trigger internal logic, so firing them won’t do any good unless you want to trigger your own event handlers.

I’m not familiar with jQuery’s events, but you can do just as well with the standard JS MouseEvent constructor. Just make sure you’re:

  • firing the appropriate event type (i.e. 'mousedown', not 'click')
  • dispatching it on the appropriate DOM element (i.e. Fabric’s upper canvas, accessible via canvas.upperCanvasEl)
  • setting the event’s clientX/clientY instead of pageX/pageY

var canvas = new fabric.Canvas("c");

canvas.on({"mouse:down": function(e) {
  console.log("Mouse down", e.e.clientX, e.e.clientY);
  canvas.renderAll();
}});

document.querySelector('#testClick').onclick = function() {
  var evt = new MouseEvent("mousedown", {
    clientX: 15,
    clientY: 15
  });
  canvas.upperCanvasEl.dispatchEvent(evt);
  // same as:
  //document.querySelector(".upper-canvas").dispatchEvent(evt);
}


/*************** TEXT ****************/

var text = new fabric.IText('FaBric.js', {
  fontSize: 40,
  textAlign: 'center',
  fontWeight: 'bold',
  left: 128,
  top: 128,
  angle: 30,
  originX: 'center',
  originY: 'center',
  shadow: 'blue -5px 6px 5px',
  styles: {
    0: {
      0: {
        fontSize: 60,
        fontFamily: 'Impact',
        fontWeight: 'normal',
        fill: 'orange'
      }
    }
  }

});

text.setSelectionStyles({
  fontStyle: 'italic',
  fill: '',
  stroke: 'red',
  strokeWidth: 2
}, 1, 5);
canvas.add(text);
canvas.setActiveObject(text);
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.7.20/fabric.js"></script>
<canvas id="c" width="300" height="200"></canvas>
<button id="testClick">Deselect</button>

Leave a Reply

Your email address will not be published. Required fields are marked *