событие mousedown не запускается - fabric.js с vue - PullRequest
Новая
       23

событие mousedown не запускается - fabric.js с vue

0 голосов
/ 10 мая 2019

Мне нужно связать события мыши из ткани js canvas.

Я показал пример события mousedown для canvas, используя vue в fabric js.

Я пробовал с .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>

1 Ответ

0 голосов
/ 10 мая 2019

Кажется, что ткань меняет структуру холста.это окружающие 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>
...