Группирование фигур и текста в холсте HTML5

Итак, я только начал работать с HTML5 и элементом Canvas. Я работаю над проектом, где я буду создавать карты разума, и я планирую сделать это, используя элемент Canvas рядом с java script.

Мои вопросы: как мне группировать фигуры вместе в холсте? У меня нет проблем с рисованием фигур и текста на холсте, и никаких проблем не тянет их вокруг холста. То, что я хотел бы сделать, - это зафиксировать элемент формы и текста вместе, чтобы, если я перетащил фигуру, текст вместе с ней.

Любые идеи?

Спасибо заранее.

ОТВЕТЫ

Ответ 1

Возможно, вы захотите использовать SVG вместо холста.

  • SVG - это доска, на которую вы вставляете дорожки, группы и т.д., которые вы можете добавлять, изменять и т.д., поскольку они остаются отдельными объектами. Затем вы можете иметь такие вещи, как обработчик onclick на объекте (путь, группа или что-то еще), что делает обработку событий намного проще, чем холст. С SVG проще создавать повторяемый контент. Нарисуйте что-то в Inkscape, а затем вы можете просто скопировать SVG, который он создает, и делать с ним все.

  • Холст - это просто холст для рисования; каждый новый кадр, который вы рисуете поверх предыдущего, вручную - поэтому вместо того, чтобы иметь <ellipse>, вы должны вызывать функции в вашем контексте в холсте 2D для построения каждого кадра. Нет обработчиков событий для этого эллипса - вам нужно вычислить, находится ли мышь над эллипсом вручную: есть только один элемент; штрихи кисти на холсте не сохраняются отдельно. Для карт разума это затруднит работу.

SVG также делает экспорт легким и масштабируемым, что может быть желательно для вашей цели. Холст только даст вам растровое изображение.

Ответ 2

Я немного опаздываю на вечеринку, но fwiw есть очень хорошая библиотека, которая позволяет вам создавать слои, фигуры, группы и даже привязки событий к элементу HTML5 canvas с именем Kinetic.js

http://www.html5canvastutorials.com/kineticjs/

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

Ответ 3

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