Событие mousedown не срабатывает - fabric.js с vue

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

Я показал пример события mousedown для холста, используя 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.info('mouse down clicked.')
  }

}
</script>

javascript typescript vue.js vuejs2 fabricjs

10.05.2019 20:04

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

825

Перейти к ответу Данный вопрос помечен как решенный

Ответы 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>

Проверьте раздел событий руководство.

— 13.05.2019 08:42

10.05.2019 20:44