Fabric js - 在畫布懸停時自由繪圖而不是單擊/鼠標按下

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>

具有覆蓋功能以實現鼠標移動繪圖。

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>