Answer a question

When hovering on the canvas (Free drawing with Fabric js), I'd like to mimic the mouse down/click event and have the user create their drawing/paths.

Would this at all possible?

Here is more information about working with events with Fabric - https://github.com/fabricjs/fabric.js/wiki/working-with-events#demos-and-examples

I'm using Vuejs but totally open to anything to get to a solution!

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>
复制

Answers

Since event handlers related to isDrawingMode are triggered by mouse up and mouse down, one possible solution is to customize those handlers to make sure that:

• Default mouse down event handler is now triggered only once at the time first mouse move is detected; mouse down handler is removed.
• Mouse up handler is removed to ensure brushing line will not be interrupted.

Here is the original code of fabric.js to handle those events: http://fabricjs.com/docs/fabric.js.html (line 11431 to 11472)

Here is my sample

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>
复制

with override functions to achieve drawing on mouse move.