如何在fabric.js中触发鼠标事件以模拟鼠标动作?

问题描述

我能够在触发器上获得jquery响应，但是结构画布并未对该事件起作用.

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

我希望这个小提琴会取消选择IText元素:

I expect this fiddle to deselect the IText element:

小提琴

我知道织物画布有触发事件，但是它也无法正常工作.

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);

编辑1

我已经尝试过"mouse:down"和"click"事件，但是该对象没有取消选择:小提琴2

I have tried with both "mouse:down" and "click" event but the object doesn't deselect: fiddle 2

推荐答案

仅通过Fabric的trigger触发事件是不够的. Fabric对象发出的事件不会用于触发内部逻辑，因此触发它们不会有任何好处，除非您想触发自己的事件处理程序.

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.

我不熟悉jQuery的事件，但是您可以使用标准JS MouseEvent构造函数.只要确保您是:

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:

• 触发适当的事件类型(即'mousedown'，而不是'click')
• 在适当的DOM元素(即Fabric的上部画布，可通过canvas.upperCanvasEl访问)上分发它
• 设置事件的clientX/clientY而不是pageX/pageY

• 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>

这篇关于如何在fabric.js中触发鼠标事件以模拟鼠标动作?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！