Лучшая идея реализации небольшого плаката программы, визуальное редактирование напрямую генерирует код для использования.

Прямо в точку

Адрес инструментаНажмите на меня прямо >>художник-на заказ-плакат
Поскольку он установлен на странице github, скорость открытия будет ниже, пожалуйста, терпеливо подождите или решите проблему со скоростью сети git самостоятельно.

задний план

При создании мини-программ у нас часто возникает необходимость поделиться мини-программами с моментами, но моменты не позволяют напрямую делиться мини-программами, поэтому есть ли у нас другие решения?Ответ определенно да, а именно Canvas создает персонализированные плакаты для обмена изображениями с Моменты

анализировать

В апплете много нужно генерировать картинки, но люди, которые использовали холст, столкнутся с некоторыми непредвиденными проблемами.>>Яма апплета
Рисование графики прямо на холсте, для обычных разработчиков код будет особенно грязным и сложным в обслуживании, а оптимизация кода часто занимает много времени.
Различные проблемы с рендерингом среды, например, инструменты разработчика выглядят хорошо, но при достижении реального Android-устройства изображение не отображается, положение не соответствует и т. д.

решить

Можем ли мы разработать библиотеку плагинов для создания плакатов?

Во-первых, вам нужно только предоставить простой файл конфигурации параметров
Решите некоторые большие и маленькие ямы, с которыми столкнулся апплет Canvas
Существуют ссылки на тщательное тестирование для решения проблем, возникающих в различных средах и различных моделях, и предоставления стабильной онлайн-версии.
Долгосрочное техническое обслуживание и специальный персонал для обновления и повторения новых функций.

Вышеуказанные требования конечно возможны.Раньше я хотел попробовать разработать один, но отказался после того, как попробовал несколько готовых инструментов.Ведь колесо нужно постоянно обслуживать и обновлять.Кроме того, есть так много отличных готовых плагинов, почему я должен много работать, чтобы написать их? не было бы более красивым, чтобы внести свой код? Вот некоторые из моих коллекций

Апплет генерирует библиотеку изображений и легко рисует картинку, которую можно отправить в круг друзей через json.>>Painter
Компонент мини-программы - Компонент плаката мини-программы>>wxa-plugin-canvas
WECHAT APPLET: JSON, чтобы помочь вам завершить общий круг круга круга>>mp_canvas_drawer

что я хочу сделать

После стольких болтаний кажется, что я не имею никакого отношения к тому, чтобы снабжать вас плагинами... Невозможно уйти Для того, чтобы иметь возможность сделать более крутой постер, я долго думал Хотя с плагином вам нужно только предоставить код конфигурации для создания плаката, но я обнаружил, что все еще есть некоторые проблемы.

Эффективность изготовления плакатов пока еще недостаточно высока, для тонкой настройки размера и положения элемента нужно постоянно модифицировать и сохранять код, ждать некоторое время и проверять эффект, что очень раздражает.
Небольшую регулировку положения, возможно, придется регулировать бесчисленное количество раз.Этот простейший механизированный труд невозможен в этой жизни.
Возьмите идеальный набросок и покажите его дизайнеру, эта позиция неправильная, эта линия слишком толстая, этот цвет слишком тяжелый... Верьте или нет, я вас убью
Для некоторых красивых и сложных плакатов это действительно нереально реализовать

Тогда что мне нужно сделать, пожалуйста, нажмите на эту ссылку опыт.>>painter-custom-posterНажмите на любой пример в примере слева, а затем импортируйте код, чтобы увидеть рендеринг, теперь вы должны быть в состоянии угадать, что я думаю

Как добиться

В начале я хотел использовать простые html и css с функцией перетаскивания, после простой попытки я отказался, потому что эта функция действительно слишком сложная, а простых инструментов явно недостаточно.
Посередине этот план долгое время стоял на месте и однажды был заброшен
пока не нашел эту библиотекуfabric.js, Это действительно отлично, слов похвалы нет слов, единственный недостаток - слишком мало китайских учебников, вы должны читать английский и Google Translate
С введением ткани вы можете легко создавать любые простые формы, сложные формы, изображения; добавлять их на холст и изменять их любым удобным для вас способом: положение, размер, угол, цвет, штрих, отсутствие прозрачности и т. д.

How To Use

Инструмент в настоящее время разделен на 4 части

Пример дисплея

Используется для отображения некоторых красивых плакатов, разработанных пользователями, путем нажатия на соответствующий пример и импорта кода на холст.

площадь холста

Отображение реального эффекта плаката, элементы, добавленные на холст, можно напрямую перетаскивать, вращать и масштабировать с помощью мыши.

Операционная зона

Четыре кнопки в первом ряду

Скопировать код Преобразование эффекта отображения холста в код конфигурации json, необходимый для библиотеки плагинов Mini Program Poster. В настоящее время я использую библиотеку Painter, которая по умолчанию будет преобразована в код конфигурации этого плагина. Скопируйте код непосредственно в карта.js.
Посмотреть код Неважно, используется эта функция или нет, вы можете визуально увидеть сгенерированный код
Экспортируйте json, чтобы преобразовать холст в код json, необходимый для ткани, чтобы сохранить разработанный вами код плаката.
Импорт json Импортируйте код json, экспортированный на шаге 3, и разработанный стиль плаката будет отображаться на холсте.

Пять кнопок во втором ряду

Canvas Параметры атрибутов холста Подробнее см. ниже
Параметры атрибута текста для добавления текста Подробнее см. ниже
Прямоугольный, чтобы добавить прямоугольный параметр атрибута, подробно описанный ниже.
Изображение Добавить параметры атрибута изображения см. Ниже подробности
QR-код Добавить параметры атрибута QR-кода Подробнее см. ниже

третий ряд

Детальная настройка параметров различных элементов

активная область

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

горячая клавиша

' ←' сдвинуться на один пиксель влево
'→' переместиться на один пиксель вправо
'↑' перейти на один пиксель вверх
'↓' спуститься на один пиксель вниз
'ctrl + z', чтобы отменить
'ctrl + y' для восстановления
'удалить' удалить
'[' поднять уровень элемента
']' понижает уровень элемента

свойства макета

Общие свойства макета

Атрибуты	иллюстрировать	По умолчанию
rotate	Повернуть, в градусах по часовой стрелке	0
ширина высота	ширина и высота вида
верхний левый	Например, роль абсолютного макета в css.	0
background	фоновый цвет	RGBA(0, 0, 0, 0)
borderRadius	округлые границы	0
borderWidth	ширина рамки	0
borderColor	цвет границы	#000000
shadow	тень	''

shadow

Вы можете изменять изображение, прямоугольник, текст и т. д. одновременно. Это эквивалентно text-shadow при изменении текста; эквивалентно box-shadow при изменении изображения и прямоугольника.

Инструкции:

shadow: 'h-shadow v-shadow blur color';
h-shadow: 必需。水平阴影的位置。允许负值。
v-shadow: 必需。垂直阴影的位置。允许负值。
blur: 必需。模糊的距离。
color: 必需。阴影的颜色。
举例: shadow:10 10 5 #888888

Поддержка градиента

Вы можете использовать следующие методы для реализации цвета градиента CSS 3 в свойстве фона холста, где центр градиента радиального градиента является средней точкой, а радиус — самой длинной стороной.В настоящее время не поддерживается установка это сами.

linear-gradient(-135deg, blue 0%, rgba(18, 52, 86, 1) 20%, #987 80%)

radial-gradient(rgba(0, 0, 0, 0) 5%, #0ff 15%, #f0f 60%)

! ! ! Примечание: Процент после цвета должен быть написан.

Свойства холста

Атрибуты	иллюстрировать	По умолчанию
times	Управляйте шириной сгенерированного кода плагина, например, ширина холста равна 100, время равно 2, а сгенерированное значение равно 200.	1

текстовый атрибут

Имя свойства	иллюстрировать	По умолчанию
text	содержимое шрифта	Не говори мне о чувствах, разговоры о чувствах вредят деньгам.
maxLines	максимальное количество строк	Без ограничений, в зависимости от ширины
lineHeight	Высота строки (расстояние между верхней и нижней строками базовой линии текста)	1.3
fontSize	размер шрифта	30
color	Цвет шрифта	#000000
fontWeight	Вес шрифта. Поддерживает только обычный, полужирный	normal
textDecoration	Оформление текста, поддержка без подчеркивания, надчеркивания, зачеркивания	none
textStyle	заливка: стиль заливки, обводка: полый стиль	fill
fontFamily	шрифт	sans-serif
textAlign	Выравнивание текста, разделенное на левое, центральное, правое	left

Примечание:

FontFamily, первый пример в инструменте поддерживает текстовые шрифты, но почему импортировать апплет не видеть его?Как загрузить веб-шрифты на официальном сайте апплета >> Руководство по загрузке шрифтов >>
Высота текста вычисляется по полям maxLines lineHeight2 вместе

свойства изображения

Атрибуты	иллюстрировать	По умолчанию
url	путь изображения
mode	Обрезка изображения и режим масштабирования	aspectFill

Подробное объяснение параметра режима

ScaleToFill масштабирует изображение до фиксированной ширины и высоты.
Обрезка изображения aspectFill для отображения соответствующей ширины и высоты
авто автоматическое заполнение ширина полная высота дисплея адаптивный центральный дисплей

Советы (обязательно посмотрите~)

Этот инструмент не учитывает совместимость, если вы обнаружите несовместимость, используйте браузер Google.
Сейчас Painter поддерживает только эти виды графики, поэтому он не поддерживает круги, линии и т. д.
Если элемент заблокирован и не может работать во время редактирования, выберите объект и используйте ярлык [ ] для повышения и понижения уровня элемента.
Если вам нужно добиться эффекта многострочного текста в 1 столбец, установите ширину текста на тот же размер, что и размер шрифта, в противном случае возникнет проблема неполного отображения текста.Эта проблема вызвана реализацией Painter
Текст не поддерживает операции прямого масштабирования, так как размер текста и высоту элемента вычислить непросто, вы можете динамически изменить элемент, изменив в активном столбце значение maxLines lineHeight fontSize.
Если вы обнаружите, что один элемент экспортируемого кода заблокирован другим элементом, отрегулируйте положение элемента вручную.Чем дальше элементы в json-массиве, тем выше отображается уровень.Поскольку рисовальщик не предоставляет уровень параметры, это единственный способ сделать это в настоящее время.
Код экспорта этого инструмента весь в px, почему он не поддерживает rpx, потому что рисовальщик в rpx, ширина тени и границы будут иметь проблемы с расчетом размера, потому что исходный пример не предоставляет схему изображения генерации px, вы можно скачать мою модифицированную версию здесь демо>>Painterможно решить
Ширина текста динамически меняется в зависимости от количества символов. Если вы хотите добавить значок после текста и расположить его в соответствии с длиной текстовой области, обратитесь к руководству по документу Painter, чтобы напрямую изменить исходный код.
Поскольку разработка этого инструмента немного сложна, если есть ошибки, предложения или проблемы в использовании, отправьте сообщение о проблеме, адрес исходного кода.>>painter-custom-poster

вклад кода постера

Если плакат, который вы разработали, красив и вы готовы внести свой вклад в открытый исходный код, вы можете предоставить свой код плаката и миниатюры. Примеры файлов кода в примере расположены по порядку. Например, пример в библиотеке: example2.js , то вы добавляете картинку example3.js и example3.jpg, пример можете ссылаться на исходный код в папке, а потом экспортировать его в index.js

код экспорта

Не форматируйте код, он сообщит об ошибке, пожалуйста, скопируйте его в поле json как есть

генерировать миниатюры

Сначала я хотел генерировать изображения прямо в этом инструменте, но отчет об ошибке не выдавался из-за междоменной проблемы изображений браузера.
Поэтому перейдите в апплет, чтобы сгенерировать и сохранить изображение, установите качество изображения на 0,2 и перейдите кtinypngСжать изображение, чтобы максимально уменьшить размер изображения.
Найдите painter.js, замените метод ниже, вы можете создавать изображения качества 0,2, код выглядит следующим образом

  saveImgToLocal() {
      const that = this;
      setTimeout(() => {
        wx.canvasToTempFilePath(
          {
            canvasId: 'k-canvas',
            fileType: 'jpg',
            quality: 0.2,
            success: function(res) {
              that.getImageInfo(res.tempFilePath);
            },
            fail: function(error) {
              console.error(`canvasToTempFilePath failed, ${JSON.stringify(error)}`);
              that.triggerEvent('imgErr', { error: error });
            }
          },
          this
        );
      }, 300);
    }

Сохраните изображение и поместите его в соответствующую папку, отправьте код для слияния

TODO

Выбор цветного значения Поддерживает инструмент палитры
Поддержка заполнения текста
Оптимизация проблемы отскока положения при увеличении
Оптимизация взаимодействия макета
Если спрос велик, поддержите создание нескольких других кодов подключаемых библиотек.

~ Это не просто создать, если вам это поможет, пожалуйста, поставьте звезду✨✨ Спасибо ~