Как вызвать события мыши в fabric.js для имитации действий мыши? - PullRequest
Новая
       14

Как вызвать события мыши в fabric.js для имитации действий мыши?

0 голосов
/ 30 ноября 2018

Я могу получить ответ jquery на срабатывание, но полотно полотна не воздействует на событие.

Я ожидаю, что эта скрипка отменит выбор элемента IText:

fiddle

Я знаю, что холст ткани получил событие триггера, но он тоже не работает. 

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 ", но объект не отменяет выбор: fiddle 2

Ответы [ 2 ]

0 голосов
/ 06 декабря 2018

Недостаточно просто запускать события через trigger Fabric.События, которые излучают объекты Fabric, не используются для запуска внутренней логики, поэтому их запуск не принесет никакой пользы, если вы не захотите запускать свои собственные обработчики событий.

Я не знаком с событиями jQuery, но выможно сделать то же самое со стандартным конструктором JS MouseEvent .Просто убедитесь, что вы:

  • запускаете соответствующий тип события (т. Е. 'mousedown', а не 'click')
  • , отправляя его на соответствующий элемент DOM (т. Е. Верхний холст Fabricдоступный через canvas.upperCanvasEl)
  • , устанавливающий clientX / clientY события вместо 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>
0 голосов
/ 01 декабря 2018

Вот рабочая ветвь вашей скрипки: https://jsfiddle.net/y74h38av/

Основная проблема в вашем существующем коде состоит в том, что вы путаете API события jQuery с API события Fabric.Объект Fabric canvas не принимает объект события jQuery.Также обратите внимание на синтаксические различия между двумя API.jQuery использует mousedown, а Fabric - mouse:down.Вы получаете доступ к API событий Fabric с помощью метода event непосредственно в объекте Fabric.Если вы попытаетесь обернуть объект Fabric в объект jQuery, как здесь, jQuery(test).trigger(e);, он не будет работать.

Надеюсь, это поможет!

...