Предположим, у меня есть приложение html5/canvas, в котором я могу размещать объекты на холсте рисования. Какой-то редактор диаграмм, что-то вроде Visio (но гораздо проще)Узнайте, какой объект был нажат на html5 Canvas
Есть ли фреймворк, который помогает мне найти, какой объект щелкнул/одели?
Опцион является захват клик-событие и перебирать все мои объекты (в полу-умному) и проверить, если она нажата/потащило, но я ненавижу изобретать колесо :)
К сожалению, нет объектной модели для вещей, которые вы оказываете на холст. Вам нужно будет отслеживать все, что вы нарисовали, и запускать отдельные события, когда вы обнаруживаете клики, мышь, мышь, перетаскивание. Это означало бы создание обертки для всех контекстных методов, сохранение линий/изображений и их атрибутов в COM (модель объекта холста :) и события стрельбы для каждой из линий/изображений
Я ничего не видел там это делается. Это может быть лот работы. Я прибегал к написанию пользовательского кода каждый раз, когда мне нужно было добавить интерактивность к холсту.
Для приложения стиля Visio или чего-либо, где важна интерактивность с нарисованными объектами, лучше с SVG. Уже есть some open source projects, который вы можете использовать в качестве отправной точки. Проблема с SVG, как и с любым тяжелым материалом DOM, может резко ухудшиться, если у вас есть большое количество объектов для управления.
Короткий вариант заключается в том, что Canvas сам не отслеживает ничто из этого.
Если вы не хотите изобретать велосипед, начните с моего образца кода из учебника "Making and Moving Selectable Shapes on an HTML5 Canvas: A Simple Example." Он обеспечивает хорошее введение и платформу для перетаскивания и перетаскивания.
KineticJS ваш друг: http://www.kineticjs.com
Посмотрите, как легко это: http://www.html5canvastutorials.com/kineticjs/html5-canvas-drag-and-drop-tutorial/
Что такое 'большое число'? 100? 10,000? – Dribbel
Я получаю вялую производительность при построении более 10 000 точек с помощью excanvas –
@Dribbel. Это будет варьироваться в зависимости от браузера и спецификации компьютера, если ваша цель - настольные компьютеры с современными браузерами, а затем более 10 000, если вы на телефонах, то, возможно, больше нравится 1000, если вы пытаетесь заставить вещи работать в IE с VML, может быть, несколько сотен. – robertc