Хотел спросить у хабровчан, если ли какой-либо способ создать приложение типа браузерной детской раскраски используя веб-технологии, чтобы оно работало на Ipad (поддержка android была бы хорошим плюсом)? Идея такой раскраски — закрашивать нужным цветом определенные области. Ребенок выбрал цвет, кликнул на область и область окрасилась.
Сейчас для меня главной проблемой является то, как нормально хранить закрашиваемые области.
Использования мне кажется будет невозможным по причине сложности формы каждого из полигонов.
Беглое исследование вывело на svg. Форму такого полигона можно нарисовать в векторном редакторе и потом программно управлять цветом, что есть хорошо (про поддержку в Android с версии 4.0 пока не говорим). Но я не нашел информации по поводу обработки кликов по таким областям.
Посему у меня 2 вопроса:
1) Можно ли обрабатывать клики по SVG фрагментам (или целым картинкам) через javascript?
2) Возможно существуют еще какие-то адекватные способы задания фигур сложной формы, изменения их цвета и обработки кликов?
1) Как?
2) Есть какой-то адекватный по времени способ взять набор из сотни картинок, например лягушек, и создать на основании их код canvas кривых? Ну не руками же тупо каждую область высчитывать в самом деле. Это ж на месяц работы!
Самый простой вариант — SVG. Можно спокойно отрисовать нужные контуры и закрашивать их. Полная свобода действий, будет работать на iOS и андроидах. На Canvas реально такое сделать много сложнее. Да и смысла особо нету.
Единственной проблемой может стать формирование этих самых контуров… Но это уже другая задача.
Сайт mobilehtml5.org/ говорит, что Андроид поддерживает svg c 3.0 на планшетах и 4.0 на телефонах. Поскольку меня в основном планшеты интересуют, а на 2.* там сплошные китайцы, то svg, похоже, самый удобный вариант. Спасибо
Взять картинку с контурами и полупрозрачными областями, без заливки, поставить ей самый высокий z-index. Обрисовать её area map. Создать множество картинок нужных зон с нужной заливкой. На map повесить событие клика. При клике вставлять картинку с нужной областью и цветом, z-index'ом ниже, чем у главной картинки. Достаточно просто сделать, и будет кроссбраузерно.
>> Ребенок выбрал цвет, кликнул на область и область окрасилась.
Понимаете, смысл раскраски как бы в тренировке моторики пальцев. Чтобы ребенок учился вовремя останавливать перо, подчёркивать границы.
Средний
