выбираемые и подвижные фигуры в html5

Question

Я создаю динамическую, интерактивную сетевую диаграмму с php, javascript и Canvas или SVG

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

Я ничего не знаю о SVG.

Будет ли SVG лучше служить цели? или что такое решение для холста.

Answer 1

Одним из преимуществ SVG является то, что он имеет конкретные объекты DOM, представляющие фигуры на чертеже, поэтому вы автоматически получаете много обработок событий мыши и всплывающих событий.

В качестве альтернативы вы можете использовать EaselJS, который обеспечивает довольно надежный список отображения, освобождая вас от управления скрытыми холстами.

Answer 2

Я предполагаю, что под "скрытым холстом" вы подразумеваете мой урок. Он по-прежнему будет работать с несколькими объектами и несколькими слоями, вам просто нужно нарисовать их в правильном z-порядке.

Конечно, есть более быстрые (но более сложные) способы.

Если вы не хотите иметь с этим дело, в SVG встроен весь выбор объектов. Попробуйте Рафаэля, как предлагает Златев. Если производительность становится слишком плохой (слишком много объектов), вам придется переключиться на холст, так что это действительно зависит от количества узлов / ссылок в ваших диаграммах.

Вы должны будете сами позаботиться об отправке данных на ваш сервер (любым удобным для вас способом). В SVG / Canvas / Raphael нет ничего, что могло бы сделать это за вас.

Answer 3

Уже есть несколько проектов для построения диаграмм и графики.Вы можете попробовать Raphaël , который основан на svg, так что он должен быть тоже совместим.