Canvas: События мыши

Question

Я знаю, что нельзя добавлять обработчики событий в определенные круги или прямоугольники в холсте. Но есть некоторые хорошие рамки, такие как EaselJS, KineticJS, Paper.js, Fabric.js, которые поддерживают обработку событий по конкретным элементам.

Может кто-нибудь объяснить мне, как они работают?

Я думаю, что есть только два решения.
1. Создайте для каждого элемента новую область холста и поместите их друг на друга. Таким образом вы можете дать каждому региону обработчик событий.
2. У вас есть только одна область холста и один обработчик событий. Таким образом, вам нужно выполнить сложные математические вычисления, чтобы выяснить, был ли выбран конкретный элемент. Если у вас есть только круги или прямоугольники, это решение может быть простым. Но если у вас есть путь с множеством кривых, это решение довольно сложно.

Я не хочу использовать библиотеки. Так что было бы неплохо, если кто-то может мне помочь.

Answer 1

Вот краткое изложение того, как холст рисунок библиотеки работы

неизмененном холст просто большой растровый. Когда вы рисуете фигуры на холсте, они становятся недоступными, забытыми пикселями.

Библиотеки рисования холста хранят все ваши фигуры в «сохраненных» объектах. Каждый объект формы имеет достаточную информацию о себе, чтобы позволить библиотеке рисования при необходимости перерисовывать ее.

Библиотеки рисования холста являются «контроллерами» для объектов. В библиотеках есть алгоритмы, необходимые для отслеживания, манипулирования и перерисовки всех фигурных объектов по мере необходимости.

Следующая информация сохраняется о каждом объекте формы:

Базовая идентификация

• идентификатор
• Имя Форма
• Родитель или контейнер

неотъемлемые свойства формы :

• Прямоугольные формы (прямоугольник, изображение, текст) знают ширину и высоту.
• Круговые формы (круги, элипсы, правильные многоугольники, звезды) знают радиус и боковую часть.
• Линии знают длину.
• Изогнутые формы (дуги, безье, пути) знают опорные точки и контрольные точки.
• Текст также знает ... ну, текст!
• Изображение также знает, что их пиксельные данные (обычно хранятся в JavaScript изображения объектов)

трансформационной информация:

• Запуск X/Y координат
• Переводов накопившегося движения пусковых координат.
• Вращающиеся обороты этой формы (обычно в радианах).
• окалина-аккумулированные resizings
• Другие преобразования (реже) являются перекосы и перекосов
• Расслоение информацией текущего Z-индекс

Стайлинг информация:

• StrokeColor,
• StrokeWidth,
• FillColor,
• Непрозрачность
• IsVisible,
• lineCaps,
• cornerRadius

Отслеживание способности:

• ограничивающего параллелепипеда-наименьший прямоугольник, который полностью содержит эту форму
• Это используется для «тестирования ударов», чтобы увидеть, находится ли мышь внутри этого объекта (для выбора и перетаскивания)

Answer 2

Если вы не хотите использовать библиотеку, вы можете найти мой ответ in this thread. Как отмечает MarkE, как только холст записан, нет способа отслеживать эти данные (если вам не нужно прокручивать каждый отдельный пиксель и проверять его цвет, хотя это действительно полезно для обнаружения столкновений на уровне пикселей).