Раскраска веб-приложения для Android: заливка изображения по клику - PullRequest
Новая
       26

Раскраска веб-приложения для Android: заливка изображения по клику

0 голосов
/ 26 января 2019

Первый пост, так что прости меня, если я потерплю неудачу в каком-то этикете. Я относительно новичок в программировании, хотя я понимаю некоторые основы и знаю свой путь в андроид-студии. В настоящее время я работаю над веб-приложением, которое будет отображаться через веб-браузеры в Android. Приложение представляет собой простое приложение для раскрашивания / раскрашивания. Он использует черно-белое изображение в качестве шаблона для пользователей, чтобы заполнить области по щелчку после выбора из палитры цветов. Пользователи смогут:

  • Создание, просмотр и сохранение собственных цветовых схем в шаблонах
  • Загрузка сохраненных цветных шаблонов для их редактирования
  • всплывающие подсказки над областями для инструктирования пользователей, которые в данный момент выбраны

В настоящее время я пытаюсь реализовать это приложение с помощью Imagemaps. Я понимаю, что могу использовать Jquery и Imagemapmaster, чтобы реализовать использование заливки по щелчку для каждой области, но я теряю голову от ее фактической реализации и просто не могу заставить ее работать. Если бы кто-то мог помочь мне и просто подробно описать, как я мог бы передать цвет от своего средства выбора цвета функции заполнения заливки, я был бы очень рад. HTML выглядит следующим образом: 

    <!DOCTYPE html>

<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href='spectrum.css' />
  <script src="jquery-3.3.1.min.js"></script>
    <script type="text/javascript" src="jquery.imagemapmaster.js"></script>
  <script type="text/javascript" src="spectrum.js"></script>
</head>

<body>

  <img style="display: block; margin-left: auto;
  margin-right: auto"  src="swatches.jpg" alt="Swatches image" usemap="#swatches"/>

  <map name="swatches">
  <area target="" alt="area1" title="area1" href="" coords="46,62,145,231" shape="rect">
   <area target="" alt="area2" title="area2" href="" coords="145,63,245,230" shape="rect">
    <area target="" alt="area3" title="area3" href="" coords="246,62,343,232" shape="rect">
    <area target="" alt="quad1" title="quad1" href="" coords="93,295,189,392" shape="rect">
    <area target="" alt="quad2" title="quad2" href="" coords="190,294,287,393" shape="rect">
    <area target="" alt="quad3" title="quad3" href="" coords="92,392,189,490" shape="rect">
    <area target="" alt="quad4" title="quad4" href="" coords="190,394,287,489" shape="rect">
  </map>


<input type='text' id="custom" />
<script>
$("#custom").spectrum({
    color: "#f00"
});
</script>

<script>
$('img').mapster();
</script>




</body>

</html>

Спасибо за вашу помощь. Если вы думаете о других способах, которыми я мог бы реализовать это проще, я бы хотел услышать

...