Как сделать свой элемент управления и взаимодействовать с ним?

На просторах интернета ну очень много информации по Javascript и первая сотня страниц в поиске дает хлам если честно.

Я так и не смог ответить на вопрос — а как же делать свои элементы управления и взаимодействовать с ними?


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


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


Короче — хочется интерактивно взаимодействовать с тем что я нарисую. И вот тут встал вопрос — что я не нашел урока как такое сделать даже самого простого ( То ли не то ввожу в поиске, то ли не там ищу. Как рисовать что угодно и через canvas и иными способами я уже более менее понял, как подменить кнопку на что то свое нарисованное — тоже в общем то… Но все это не имеет отношения к интерактивности.


В общем подскажите пример как сделать нарисовать что то — и потом с этим взаимодействовать? Скажем пусть будет кривая безье — чтобы можно было ткнуть в точку и потягать за нее меняя кривую… Ну или пусть будет диаграмма в которой вытягивать мышкой столбцы… Думаю это достаточно простые примеры и может даже где то описано как и что. Но не нашел сам…


Ну или хотя бы напишите последовательность действий как такое делается… А то совсем не понимаю откуда ноги растут в таких вещах…
  • Вопрос задан
  • 3051 просмотр
Пригласить эксперта
Ответы на вопрос 2
KEKSOV
@KEKSOV
Боюсь, что в рамках короткого ответа этого не описать. В приведенной Вами задачке соединяются вместе несколько технологий, каждая из которых — свой огромный мир. В какой пропорции их соединить зависит от очень большого числа факторов. Перечислю в порядке возрастания сложности эти технологии со ссылками на учебные материалы:

1. HTML
2. CSS3
3. HTML DOM
4. JavaScript
5. Писать многие вещи с нуля на голом JS интересно будет только для целей самообразования. В большинстве случаев, можно и нужно воспользоваться готовыми фреймворками. Один из таких популярных пакетов — JQuery

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

Альтернативный вариант, это взять что-нибудь готовое и допилить под свои нужды. Полезно покопаться в чужом коде и подсмотреть как оно там работает. Отличный кандидат для вскрытия по Вашей задачке это Raphaël
Ответ написан
Suvitruf
@Suvitruf
Java/node.js/game-dev
В общем подскажите пример как сделать нарисовать что то — и потом с этим взаимодействовать? Скажем пусть будет кривая безье — чтобы можно было ткнуть в точку и потягать за нее меняя кривую…


Canvas.
1) Рисуете кривую.
2) Обрабатываете события мыши и перерисовываете кривую.
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы