mousedown事件未触发-具有vue的fabric.js

Question

我需要绑定织物js画布鼠标事件。

我已经在fabric js中使用vue在画布上显示了mousedown事件示例。

我尝试了有.native没有.native。他们都没有工作。

我的代码如下。

<template>

  <div class="container">

    <div ref="rootDiv">

      <canvas

        :id="'c'"

        @mousedown.native="mousedown"

      ></canvas>

    </div>

  </div>

</template>

<script>

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

似乎织物正在改变画布的结构。它围绕着div，并且还附加了一个画布。因此，他们可能先删除此画布，然后再添加，但可能不是深层副本。因此，事件已被删除。如果我们通过他们的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>