Fill Game v1.01 - это первый в своём роде скрипт раскраски работающий с вектором, который можно приобрести. Аналогов я найти не смог, даже на чьих-либо сайтах.
Скрипт работает без canvas'a и игровых движков по типу construct 2(3), вся работа приложения идёт с SVG, которые Вам не придётся делать, от слова совсем.
Вмести с клиентским приложением раскраски вы получаете серверное приложение, которое можно запустить на любом vps или shared хостинге(в случае с beget'om).
Что уже готово?
- Очень быстрое приложение, как клиентское, так и серверное
- Генератор векторных изображений из растровых(Трассировка. Данное действие производится на сервере). Векторное изображение всегда будет выглядеть лучше растрового, по крайней мере в данном контексте.
- Меню
- Масштабирование и позиционирование изображения(очень полезно на пк, при работе с анти-стресс раскрасками)
- Встроенные палитры и возможность создать свою для большего удобства.
- Блок для кнопок поделиться
- Возможность скачать/распечатать, как исходник так и раскрашенное изображение
- Отмена действий
- Инструменты: заливка, пипетка
- Горячие клавиши:
- Ctrl+Z - Отмена действия
- Ctrl+S - Сохранение изображения
- Ctrl+P - Печать картинки(не всей страницы)
- Ctrl+Q - Очистка холста
- Запрет на комбинации открытия исходного кода страницы, инспектора и ПКМ
Как установить и настроить?
Всё что вам нужно сделать - это залить папку со скриптом на хостинг и отредактировать файл genSVG.php, указав там адрес вашего сервера.
- Нет возможности поднять сервер?
- Я предоставляю доступ к своему собственному серверу сроком на месяц, абсолютно бесплатно.
Как использовать?
После загрузки скрипта на сайт нужно передать url изображения в параметр link
Например вы загрузили приложение на свой сайт в папке fillgame, тогда url открытия раскраски будет выглядеть следующим образом:
https://site.ru/fillgame/index.html?link=URL
Где URL это относительный или абсолютный путь до изрображения на вашем сайте, в папке с приложением уже есть предустановленные картинки, например вы можете попробовать раскрасить анти-стресс волка https://site.ru/fillgame/index.html?link=img/wolf.png
Как встроить на страницу?
Данное приложение является резиновым, то есть всё что вам нужно это прописать
<iframe src="https://site.ru/fillgame/index.html?link=https://site.ru/fillgame/img/wolf.png" />
На одном из сайтов, которому был продан скрипт реализовывались кастомные поля с изображением и ссылка на изображение подставлялась напрямую из записи, что на выходе даёт готовую страницу с определённой раскраской за минуту.
Готов помочь с встраиванием на ваш сайт.
Демо: https://vk.cc/c3uP1Z
Вы получаете файл app.js без обусфакции.
inst: @sova.moves
tg: @usrb1
mail: pda.eks@gmail.com
Автор публикации
Демка не работает, сайт заблокирован