Fabric.js — добавление обработчика событий к объекту не работает

Когда я нажимаю rect, консоль печатает только щелчок по холсту, а не по прямоугольнику. Есть ли какое-нибудь решение?

var canvas = window._canvas = new fabric.Canvas('c');

var rect = new fabric.Rect({
    left: 100,
    top: 100,
    fill: 'red',
    width: 100,
    height: 100
  });

canvas.add(rect);


rect.on('mouse:down', function(options){
    console.info("click the rect");
    })

canvas.on('mouse:down',function(options){
    console.info("click the canvas");
})

<script src = "https://cdnjs.cloudflare.com/ajax/libs/fabric.js/5.3.1/fabric.min.js"></script>
<canvas id = "c" width = "600" height = "600"></canvas>

rect.on('selected', function(options) { console.info("нажмите на прямоугольник"); }); Эта модификация может работать, но она все равно печатает «щелкните по холсту».

— 16.06.2024 04:43

Отвечает ли это на ваш вопрос? Обнаружение щелчка по ткани. Прямоугольный холст

— 16.06.2024 07:33

Да спасибо.

— 17.06.2024 22:48

javascript fabricjs

16.06.2024 03:52

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

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

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

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

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

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

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

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

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

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

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

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

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

Ответы 1

Ответ принят как подходящий

«mouse:down» — это тип события Fabric.Canvas, но не событие Fabric.Rect.

Проверить, поэкспериментировав с мероприятием, можно на официальном сайте по ссылке ниже. http://fabricjs.com/events

Я не уверен, что именно будет делать квадрат, когда вы нажмете на него. Однако если вы хотите запустить функцию, когда прямоугольник выбран или отменен, напишите код следующим образом.

var canvas = window._canvas = new fabric.Canvas('c');

var rect = new fabric.Rect({
    left: 100,
    top: 100,
    fill: 'red',
    width: 100,
    height: 100
  });

canvas.add(rect);

rect.on('selected', function(options){
    console.info("select the rect");
})

rect.on('deselected', function(options){
    console.info("deselect the rect");
})

canvas.on('mouse:down',function(options){
    console.info("click the canvas");
})

Я надеюсь, что это было полезно для вас. Спасибо :)

Спасибо, это полезно. Но у меня другой вопрос по выбору объектов. Если это возможно, не могли бы вы мне помочь? Большое спасибо. ссылка

— 17.06.2024 22:46

17.06.2024 03:47