Javascript mousedown事件未触发-fabric.js与vue
我需要绑定fabric js canvas鼠标事件 我已经在fabric js中使用vue向画布展示了mousedown事件示例 我试过了。本地和非本地。本地。他们都没有工作Javascript mousedown事件未触发-fabric.js与vue,javascript,typescript,vue.js,vuejs2,fabricjs,Javascript,Typescript,Vue.js,Vuejs2,Fabricjs,我需要绑定fabric js canvas鼠标事件 我已经在fabric js中使用vue向画布展示了mousedown事件示例 我试过了。本地和非本地。本地。他们都没有工作 canvas.on('mouse:down', (e) => this.mouseDown(e)); 我的代码如下 <template> <div class="container"> <div ref="rootDiv"> <canvas
canvas.on('mouse:down', (e) => this.mouseDown(e));
我的代码如下
<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>
似乎织物正在改变画布的结构。它是围绕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>
检查事件部分。