Ткань JS - Freedrawing при наведении холста вместо щелчка / мыши вниз

Question

При наведении курсора на холст («Свободное рисование с помощью Fabric js») я хотел бы имитировать событие мыши / нажатия и попросить пользователя создать свои рисунки / контуры.

Возможно ли это вообще?

Вот дополнительная информация о работе с событиями с Fabric - https://github.com/fabricjs/fabric.js/wiki/working-with-events#demos-and-examples

Я использую Vuejs, но полностью открыт для всего, чтобы найти решение!

var app = new Vue({
  el: '#app',
  data(){
    return {}
  },
  mounted(){
    var canvas = new fabric.Canvas('canvas');
    canvas.isDrawingMode = true
    canvas.setHeight(window.innerHeight)
    canvas.setWidth(window.innerWidth)

    canvas.freeDrawingBrush.color = 'blue'
    canvas.freeDrawingBrush.width = 40
  },
  methods: {}
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.7.6/fabric.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>


<div id="app">
  <!-- Draw as if I've clicked BUT when hovering over canvas -->
  <canvas id="canvas"></canvas>

</div>

Answer 1

Поскольку обработчики событий, связанные с isDrawingMode, запускаются с помощью мыши вверх и вниз, одним из возможных решений является настройка этих обработчиков таким образом, чтобы:

• Обработчик событий нажатия мыши по умолчанию теперь срабатывалтолько один раз в момент обнаружения первого движения мыши;обработчик перетаскивания мыши удален.
• обработчик перетаскивания мыши удален, чтобы гарантировать, что линия очистки не будет прервана.

Вот исходный код fabric.js для обработки этих событий: http://fabricjs.com/docs/fabric.js.html (строки от 11431 до 11472)

Вот мой образец

var enableDrawingMode = false;

var app = new Vue({
  el: '#app',
  mounted(){
    var canvas = new fabric.Canvas('canvas');
    canvas.isDrawingMode = true
    canvas.setHeight(window.innerHeight)
    canvas.setWidth(window.innerWidth)
    
    // set up canvas drawing logic based on original mouse down event
    canvas._isCurrentlyDrawing = true;
    
    canvas. _onMouseDownInDrawingMode = function(e) {
      if (this.getActiveObject()) {
        this.discardActiveObject(e).requestRenderAll();
      }
      if (this.clipTo) {
        fabric.util.clipContext(this, this.contextTop);
      }
      this._handleEvent(e, 'down');
    }
    
    canvas._onMouseMoveInDrawingMode = function(e) {
      var pointer = this.getPointer(e);
      if (!enableDrawingMode) {
        console.log('enable original mouse move event only one')
        enableDrawingMode = true;
        this.freeDrawingBrush.onMouseDown(pointer);
      }
      this.freeDrawingBrush.onMouseMove(pointer);
      this.setCursor(this.freeDrawingCursor);
      this._handleEvent(e, 'move');
    }
    
    canvas._onMouseUpInDrawingMode = function(e) {
      if (this.clipTo) {
        this.contextTop.restore();
      }
      this._handleEvent(e, 'up');
    }
    
    canvas.freeDrawingBrush.color = 'blue'
    canvas.freeDrawingBrush.width = 40
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.7.6/fabric.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>


<div id="app">
  <!-- Draw as if I've clicked BUT when hovering over canvas -->
  <canvas id="canvas"></canvas>

</div>

с функциями переопределения для рисования при перемещении мыши.