Mousedown事件不发射 - 带有Vue的Fabric.js

Question

我需要绑定织物JS帆布鼠标事件。

我已经在织物JS中使用VUE向画布展示了穆斯多斯的事件示例。

我尝试使用.native，没有.native。他们都没有工作。

我的代码如下。

<template>
  <div class="container">
    <div ref="rootDiv">
      <canvas
        :id="'c'"
        @mousedown.native="mousedown"
      ></canvas>
    </div>
  </div>
</template>
<script lang="ts">
import Vue from "vue";
import { Component } from "vue-property-decorator";
import { fabric } from "fabric";
@Component
export default class CanvasComponent extends Vue {
  public mounted() {
      const canvas = new fabric.Canvas('c');
  }
  public mousedown(e: any) {
    debugger;
    console.log('mouse down clicked.')
  }
}
</script>

Answer 1

似乎面料正在改变画布的结构。它是周围的divs，还附加了一个画布。

因此，他们可能首先要删除此画布，然后再添加，这可能不是深副本。并且由于事件被删除。如果我们通过它们的API绑定，那么它的工作正常。因此，以下事件绑定正在起作用。

canvas.on('mouse:down', (e) => this.mouseDown(e));

结构它们用给定画布替换为以下。

<div class="canvas-container" style="width: 299px; height: 429.058px; position: relative; user-select: none;">
<canvas id="1" class="lower-canvas" width="299" height="429" style="position: absolute; width: 299px; height: 429.058px; left: 0px; top: 0px; touch-action: none; user-select: none;"></canvas>
<canvas class="upper-canvas " width="299" height="429" style="position: absolute; width: 299px; height: 429.058px; left: 0px; top: 0px; touch-action: none; user-select: none; cursor: default;"></canvas>
</div>