[英]Fabric js - Freedrawing on hover of canvas instead of click/mouse down
当悬停在画布上时(使用 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>
由于与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>
具有覆盖功能以实现鼠标移动绘图。
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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.