Как сделать раскраску на HTML?

Question

[Castro]

Добрый день!

Хотел спросить у хабровчан, если ли какой-либо способ создать приложение типа браузерной детской раскраски используя веб-технологии, чтобы оно работало на Ipad (поддержка android была бы хорошим плюсом)? Идея такой раскраски — закрашивать нужным цветом определенные области. Ребенок выбрал цвет, кликнул на область и область окрасилась.


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

Использования мне кажется будет невозможным по причине сложности формы каждого из полигонов.


Беглое исследование вывело на svg. Форму такого полигона можно нарисовать в векторном редакторе и потом программно управлять цветом, что есть хорошо (про поддержку в Android с версии 4.0 пока не говорим). Но я не нашел информации по поводу обработки кликов по таким областям.


Посему у меня 2 вопроса:

1) Можно ли обрабатывать клики по SVG фрагментам (или целым картинкам) через javascript?

2) Возможно существуют еще какие-то адекватные способы задания фигур сложной формы, изменения их цвета и обработки кликов?

Answer 1

[DROS]

Наверно это спасет отца русской демократии habrahabr.ru/post/123793/

Answer 2

[deleted-mifki]

1. Можно.
2. Canvas.

Comments

[Castro]

1) Как?
2) Есть какой-то адекватный по времени способ взять набор из сотни картинок, например лягушек, и создать на основании их код canvas кривых? Ну не руками же тупо каждую область высчитывать в самом деле. Это ж на месяц работы!

[Shedal]

Области можно рассчитывать динамически, по клику. Например, BFS'ом, попиксельно.

Answer 3

[Сергей Протько]

Самый простой вариант — SVG. Можно спокойно отрисовать нужные контуры и закрашивать их. Полная свобода действий, будет работать на iOS и андроидах. На Canvas реально такое сделать много сложнее. Да и смысла особо нету.
Единственной проблемой может стать формирование этих самых контуров… Но это уже другая задача.

Comments

[Сергей Протько]

По поводу клика по определенным фрагментам — запросто. Возьмите на вооружение библиотеку raphael.js. В документации масса примеров.

[Castro]

Сайт mobilehtml5.org/ говорит, что Андроид поддерживает svg c 3.0 на планшетах и 4.0 на телефонах. Поскольку меня в основном планшеты интересуют, а на 2.* там сплошные китайцы, то svg, похоже, самый удобный вариант. Спасибо

[Castro]

Контуры можно в том же Inskape нарисовать? Я правильно понимаю?

Answer 4

[Николай Васильчук]

Я работал с Raphaël. С помощью этой библиотеки можно сделать раскраску, вот пример карты — вроде почти то, что вам нужно.

Comments

[Николай Васильчук]

А для выбора цвета там и Color Picker есть.

[Игорь Дерябин]

Тоже голосую за Raphael, отличная библиотека

Answer 5

[SerDIDG]

Взять картинку с контурами и полупрозрачными областями, без заливки, поставить ей самый высокий z-index. Обрисовать её area map. Создать множество картинок нужных зон с нужной заливкой. На map повесить событие клика. При клике вставлять картинку с нужной областью и цветом, z-index'ом ниже, чем у главной картинки. Достаточно просто сделать, и будет кроссбраузерно.

Answer 6

[DROS]

Наверно это спасет отца русской демократии habrahabr.ru/post/123793/

Comments

[Castro]

Действительно, заграница нам помогла. Особенно последний пример. Спасибо

Answer 7

[Андрей Нехайчик]

>> Ребенок выбрал цвет, кликнул на область и область окрасилась.
Понимаете, смысл раскраски как бы в тренировке моторики пальцев. Чтобы ребенок учился вовремя останавливать перо, подчёркивать границы.

Answer 8

[karenishe]

можно с SVG сделать.