mousedown 事件未触发 - fabric.js with vue

Question

我需要绑定 fabric js canvas 鼠标事件。

我已经在 fabric js 中使用 vue 向 canvas 展示了 mousedown 事件示例。

我试过使用 .native 和不使用 .native。 None 个正在工作。

我的代码如下。

<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

似乎 fabric 正在改变 canvas 的结构。它围绕着 div，并且还附加了一个 canvas。

所以他们可能会先删除这个 canvas 然后再添加，这可能不是深层复制。因此，事件正在被删除。如果我们通过他们的 API 绑定，那么它工作得很好。所以下面的事件绑定是有效的。

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

他们用给定的 canvas 替换的结构如下。

<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>

mousedown 事件未触发 - fabric.js with vue

mousedown event not firing - fabric.js with vue

javascript

fabricjs

typescript

vue.js

vuejs2