[英]mousedown event not firing - fabric.js with vue
我需要綁定面料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 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>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.