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>
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:
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.
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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.