Drawn Picture — онлайн-рисовалка анимации

[drawn_picture]

Первый скрипт — это плагин для WordPress, который добавляет на сайт **онлайн-рисовалку**. Ты вставляешь в запись или на страницу короткий шорткод `[drawn_picture]`, и на этом месте появляется холст, на котором любой посетитель может рисовать мышкой или пальцем.

Выглядит это так. Сверху идёт панель управления: цвет и палитра из готовых оттенков, толщина кисти ползунком, размер текста числом, выбор фона (прозрачный, белый, чёрный, светло-серый, тёмно-синий, голубой, жёлтый, зелёный, красный, сиреневый и свой цвет пикером). Рядом кнопки «Отменить», «Вернуть», «Очистить» и три кнопки экспорта: «Скачать PNG», «Скопировать скрипт» и «Открыть в новом окне». Ниже — ряд инструментов: Кисть, Ластик, Фигуры, Текст. Если выбрать «Фигуры», появляется дополнительный ряд: Линия, Прямоугольник, Круг, Треугольник, Звезда, Стрелка, Сердце и кнопка «Заливка». Если выбрать «Текст», появляется подсказка, что кликнуть по холсту. Под всеми панелями — сам холст с шахматным фоном, который показывает прозрачность. Внизу строка статуса, куда пишутся короткие сообщения вроде «PNG сохранён» или «Текст добавлен», и подсказка про инструменты.

Как это работает внутри. Плагин написан на PHP, он состоит из одного класса. В конструкторе класса регистрируется шорткод `drawn_picture`, и подключается функция, которая при загрузке страницы проверяет: есть ли в тексте записи этот шорткод. Если есть — добавляются стили и скрипт. Стили описывают внешний вид всех панелей, кнопок, свотчей, холста, модалки и поля ввода текста. Скрипт — это один большой самовызывающийся блок на JavaScript.

Когда шорткод срабатывает, он создаёт пустой div с классом `drawn-picture-app` и передаёт ему параметр высоты (по умолчанию 520 пикселей). Скрипт находит этот div, строит внутри него панели, кнопки и холст, а потом запускает логику рисования.

Что скрипт умеет:

Кисть — рисуешь мышкой или пальцем, линия тянется за курсором. Толщина и цвет задаются в панели. Координаты каждой точки сохраняются в виде долей от ширины и высоты, чтобы рисунок корректно выглядел на любом экране.
Ластик — то же самое, но вместо закрашивания пикселей стирает их через режим `destination-out`, то есть делает прозрачным.
Фигуры — тянешь мышкой от угла к углу, и фигура растягивается вместе с курсором. Прямоугольник, круг (эллипс), треугольник, звезда, стрелка, сердце. Если включена кнопка «Заливка», фигура рисуется залитой цветом, если выключена — только контуром.
Текст — ты кликаешь по холсту в нужном месте, и там появляется поле ввода. Пишешь, нажимаешь Enter — текст встаёт на холст. Shift+Enter делает перенос строки, Esc отменяет. Размер шрифта берётся из поля в панели.
Отмена и возврат — стек объектов. «Отменить» убирает последний элемент, «Вернуть» возвращает его обратно.
Очистить — удаляет все элементы с подтверждением.

Экспорт:

Скачать PNG — холст превращается в картинку и скачивается файлом `drawing-…png`.
Скопировать скрипт — открывается окно с готовым кодом `<div>` и `<script>`, в котором уже вшиты все твои штрихи, фигуры и текст. Этот код можно вставить на любой сайт в блок «Произвольный HTML», и там появится точно такой же рисунок. Работает без сервера, без базы и без твоего плагина — просто один HTML-блок.
Открыть в новом окне — открывается чистая страница с твоим рисунком без панелей. Удобно сохранить как картинку или показать кому-то.

Ещё скрипт следит за изменением размера окна: если посетитель повернул телефон или сузил браузер, холст автоматически перерисовывается под новый размер, сохраняя пропорции.

Особенность скрипта в том, что он **не перехватывает клики по сайту снаружи** — работает только там, где стоит шорткод. Пока открыто поле ввода текста, холст перестаёт реагировать на клики, чтобы ты случайно не нарисовал лишний штрих. А настройки каждого элемента хранятся как отдельные объекты: у штриха это цвет, толщина, признак ластика и массив точек; у фигуры — тип, цвет, толщина, признак заливки и две крайние точки; у текста — цвет, размер, сам текст и координата. Из этого набора данных и собирается экспортируемый скрипт.

Если совсем коротко: первый скрипт — это рисовалка-плагин для WordPress, вставляется шорткодом, даёт кисть, ластик, фигуры и текст, позволяет отменять, очищать, скачивать PNG и копировать готовый скрипт с твоим рисунком.