亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

mousedown事件未觸發-具有vue的fabric.js

mousedown事件未觸發-具有vue的fabric.js

慕婉清6462132 2021-04-28 13:16:26
我需要綁定織物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";@Componentexport default class CanvasComponent extends Vue {  public mounted() {      const canvas = new fabric.Canvas('c');  }  public mousedown(e: any) {    debugger;    console.log('mouse down clicked.')  }}</script>
查看完整描述

1 回答

?
智慧大石

TA貢獻1946條經驗 獲得超3個贊

似乎織物正在改變畫布的結構。它圍繞著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>


查看完整回答
反對 回復 2021-05-27
  • 1 回答
  • 0 關注
  • 494 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號