Компонент генерации изображений мини-программы

Апплет WeChat
Компонент генерации изображений мини-программы

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

Вот некоторые подводные камни Canvas в маленькой программе:

1. Рисование на холсте использует px, а в небольших программах мы обычно используем rpx для относительной компоновки.

2. В методе апплета drawCanvas можно напрямую задать сетевую картинку для отрисовки в IDE, но задавать сетевую картинку на реальной машине бесполезно.

3. В методе canvasContext.clip есть ошибка в WeChat версии 6.6.6 и ниже на устройствах iOS, которая приводит к сбою метода восстановления, используемого для клипа.

Программа художника

Я думаю, что в небольших программах существует такое большое количество потребностей в генерации изображений, а метод генерации Canvas настолько сложен в использовании и глуп. Потом мы подумали о том, можем ли мы сделать библиотеку, которая сможет легко генерировать картинки, а также заблокировать те ямки, которые напрямую используют Canvas. Итак, мы запустили «проект painter — динамический рендеринг и отрисовка картинок через данные json». Общая архитектура библиотеки Painter выглядит следующим образом:

整体架构

Во-первых, мы определяем набор спецификаций рисования JSON.Разработчики могут создать палитру (цветовую палитру), которая генерирует изображения в соответствии с их потребностями, а затем передать палитру рисовальщику (рисовальщику) в процессе работы программы. Painter вызовет Pen (кисть), нарисует соответствующую картинку в соответствии с содержимым Palette и вернется.

How To Use

запустить пример

Потому что проект — это субмодульный метод управления. Когда вы клонируете код в первый раз, вам нужно добавить--recursiveпараметр.

git clone https://github.com/Kujiale-Mobile/Painter.git --recursive
скопировать код

После загрузки кода его можно использовать, открыв его с помощью апплета IDE.

Использование художника

  1. код импорта

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

    git submodule add https://github.com/Kujiale-Mobile/PainterCore.git painter
скопировать код

  2. Представленный как пользовательский компонент, обратите внимание, что каталог — это каталог, в котором находится код, представленный на первом шаге.

    "usingComponents":{
  "painter":"/components/painter/painter"
}
скопировать код

  3. компонент получаетpaletteВ качестве источника данных чертежа используется поле, а данные шаблона существуют в виде json. Для передачи рекомендуется использовать метод «шаблон скина». Пример кода выглядит следующим образом:

    <painter palette="{{data}}" bind:imgOK="onImgOK" />
скопировать код

  4. После входящих данных он автоматически наносится. После завершения рисунка вы можете привести к успеху или неудачу снимков, полученных путем связывания события IMGOK или Onimgerr.

    bind:imgOK="onImgOK"
bind:imgErr="onImgErr"
скопировать код

Спецификация палитры

Если вы используете спецификацию wxss + wxml для рисования, Painter должен рисовать изображения в соответствии с определенными спецификациями. Конечно, спецификация рисования в Painter намного проще, чем в wxml.

Свойства палитры

Сначала палитре необходимо придать некоторые общие свойства.

background: 可以是颜色值，也可以为网络图片的链接，默认为白色
width: 宽度
height: 高度
borderRadius: 边框的圆角（该属性也同样适用于子 view）
views: 里面承载子 view
скопировать код

Свойства дочернего вида

Когда мы создаем общие свойства палитры, мы можем добавить дополнительные представления для рисования.

type content description собственный css
image url Указывает адрес ресурса изображения, локальный или сетевой
text text содержание текста fontSize: размер текста, color: цвет шрифта (по умолчанию черный)
rect без прямоугольник цвет: цвет
qrcode content Нарисуйте QR-код background: цвет фона (по умолчанию прозрачный),

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

Вышеупомянутый вид, в дополнение к собственным специальным свойствам, также имеет следующие общие свойства макета.

Атрибуты значимость
rotate Вращение, в зависимости от степени вращения по часовой стрелке, по умолчанию не вращается
borderRadius Степень границы наклоняется, если это квадратный макет, свойство является циркулярным, когда это половина или высокая.
сверху, справа, снизу, слева Например, когда макет в css абсолютный, верхнее и левое значения по умолчанию равны 0.

размер другой

1. В настоящее время Painter поддерживает две единицы размера, px и rpx, которые представляют то же значение, что и в апплете, поэтому я не буду здесь говорить больше.

2. В настоящее время свойство css дочернего представления поддерживает объект или массив. Таким образом, это означает, что вы можете извлечь свойства css, общие для нескольких подпредставлений. Сделайте это, чтобы сделать палитру более лаконичной.

3, потому что наша палитра является носителем json js, а это означает, что вы можете легко добавить свою собственную логику в каждое свойство. Некоторые свойства также могут быть извлечены отдельно, так что множество общей палитры, поэтому модульная.

взять каштан

{
  background: '#eee',
  width: '654rpx',
  height: '400rpx',
  borderRadius: '20rpx',
  views: [
  {
    type: 'image',
    url: 'https://qhyxpicoss.kujiale.com/r/2017/12/04/L3D123I45VHNYULVSAEYCV3P3X6888_3200x2400.jpg@!70q',
    css: {
      top: '48rpx',
      right: '48rpx',
      width: '192rpx',
      height: '192rpx',
    },
  }
  ],
}
скопировать код

Эффект рисования следующий

License

Copyright (c) 2018 Kujiale

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

    http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
скопировать код
Категории