Как смоделировать событие мыши вверх Фабри c js - PullRequest
Новая
       67

Как смоделировать событие мыши вверх Фабри c js

0 голосов
/ 13 апреля 2020

Я занимаюсь разработкой проекта, в котором мне нужно смоделировать событие mouseup. Это должно работать следующим образом:

Я нажимаю на холст, чтобы рисовать или перетаскивать объекты, и после тайм-аута хочу обработать событие mouseup. Как мне этого добиться?

Мой код ручки Пример

Спасибо 

var canvas = this.__canvas = new fabric.Canvas('c');
  
canvas.add(new fabric.Rect({ top: 100, left: 100, width: 50, height: 50, fill: '#f55' }),
            new fabric.Circle({ top: 140, left: 130, radius: 75, fill: 'green' }),
            new fabric.Triangle({ top: 100, left: 110, width: 100, height: 100, fill: 'blue' }))

document.addEventListener('keydown', (e) => {

  if (e.code == 'AltLeft') {
    canvas.isDrawingMode = !canvas.isDrawingMode;
  }
});

setTimeout(()=> {
  console.log('Must handle mouseup event here')
},5000)
canvas {
  border: 1px solid black;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/3.6.1/fabric.min.js"> </script>

<canvas id="c" width="300" height="300"></canvas>

1 Ответ

1 голос
/ 13 апреля 2020

Создание программы c Событие мыши описано здесь: https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent

Создайте событие типа mouseup и затем отправьте его на верхний слой холста, который вы можете достичь с помощью canvas.upperCanvasEl. 

var canvas = this.__canvas = new fabric.Canvas('c');
  
canvas.add(new fabric.Rect({ top: 100, left: 100, width: 50, height: 50, fill: '#f55' }),
            new fabric.Circle({ top: 140, left: 130, radius: 75, fill: 'green' }),
            new fabric.Triangle({ top: 100, left: 110, width: 100, height: 100, fill: 'blue' }))

document.addEventListener('keydown', (e) => {

  if (e.code == 'AltLeft') {
    canvas.isDrawingMode = !canvas.isDrawingMode;
  }
});

setTimeout(()=> {
  console.log('Must handle mouseup event here');
  var evt = new MouseEvent("mouseup", {
    bubbles: true,
    cancelable: true,
    view: window
  });
  canvas.upperCanvasEl.dispatchEvent(evt);
},5000)
canvas {
  border: 1px solid black;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/3.6.1/fabric.min.js"> </script>

<canvas id="c" width="300" height="300"></canvas>
...