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>

- Kyle Mac

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>

使用重写函数来实现鼠标移动时的绘图。最初的回答中包含了此内容。

- blaz

---

这太完美了，非常感谢你的帮助！ - Kyle Mac

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>

- Ostap Brehin