Fabric js - 在画布悬停时自由绘图而不是单击/鼠标按下

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>

Answer 1

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.

Answer 2

 let canvas = new fabric.Canvas('canvas'); canvas.isDrawingMode = true; canvas.on('mouse:move', function (event) { this._onMouseDownInDrawingMode(event); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/451/fabric.min.js"></script> <canvas id="canvas" style="border: 1px solid #000"></canvas>