Внедрение схемы генерации изображений для обмена моментами программы WeChat Mini

внешний интерфейс JavaScript Апплет WeChat Canvas

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

Поэтому мы подготовили набор инструментов под названием Painter, чтобы предоставить разработчикам простое и практичное решение для «рисования» изображений, чтобы разработчики могли свободно создавать файлы изображений, которые они хотят.

Портал на гитхабе:GitHub.com/Ku добавил -моб…

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

Яма холста

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

  1. В некоторых моделях iOS WeChat версии 6.6.6 метод холста clip() не может быть восстановлен. В результате на этих моделях невозможно выполнить операцию скругления углов. У нас не было другого выбора, кроме как отказаться от этих моделей во время разработки, и мы использовали оператор if, чтобы кастрировать функцию округления этих машин. . .
  2. Холст апплета предоставляет метод MeasureText(), который временно поддерживает только измерение ширины текста и не может знать конкретную высоту текста. Поэтому некоторые требования к выравниванию элементов невозможно выполнить красиво.
  3. При рисовании картины есть шанс, что произойдет очень волшебное действие, то есть общее положение холста при рисовании отклонится, в результате чего итоговая сгенерированная картинка будет неполной. Это происходит в большинстве случаев, когда рисовальщик вызывается в onLoad. Мы справляемся с этим, определяя соотношение ширины и высоты изображения и перерисовывая его, как только возникает аномалия.
  4. Canvas не может рисовать сетевые изображения. Метод canvas.drawImage(url), который передает сетевую ссылку на URL-адрес, отлично работает на симуляторе, но не может быть отрисован на реальной машине. Мы внедрили набор собственного механизма отрисовки сетевых картинок после загрузки в Painter, а также добавили в него механизм управления хранилищем LRU.
  5. Canvas — это нативный компонент, который всегда находится в верхней части представления, и настройка z-index на него не влияет. Не так много, чтобы сказать об этом. . На него должно было наступить много людей.
  6. Для рисования холста компонент холста должен быть фактически написан на странице, а его wx:if не может быть ложным. Однако допускается размещение компонента холста за пределами экрана, например установка position:fixed;left:750rpx;. Этот метод является черной технологией, которая может решить две проблемы 5 и 6.

Особенности художника

как показано на рисунке

Через правую часть похожую на css и немного похожую на json, но по сути это несколько строчек js кода, слева рисуем график, включающий четыре часто используемых элемента: фоновое изображение, текст, изображение и QR-код. .

После того, как Painter прочитает код и нарисует картинку, он вернет нам ссылку на картинку. На этом этапе мы можем загрузить изображение, сохранить его локально или отобразить на экране.

Он может легко настроить нужные вам изображения, и вы можете свободно и динамично менять стиль изображений.

Кроме того, метод canvas.drawImage() апплета не может рисовать сетевые изображения на реальной машине. И Painter может решить эту проблему, если у вас есть необходимость рисовать сетевые картинки, вы также можете рассмотреть возможность использования Painter.

Другие преимущества Painter

  1. Художник может загружать сетевые изображения на локальный компьютер и выполнять управление LRU с сетевым содержимым, загруженным на локальный компьютер. В настоящее время максимальное локальное хранилище, разрешенное апплетом, составляет 10 м. По умолчанию локальное хранилище, которое могут использовать художники, составляет 6 м. Когда оно превышается, локальное хранилище будет очищено. Если вам нужно настроить, вы можете изменить свойство MAX_SPACE_IN_B в /painter/lib/downloader.js.

  2. В настоящее время свойства css дочерних представлений поддерживают объект или массив. Позволяет извлекать свойства css, общие для нескольких представлений.

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

использовать

демо скачать

Демонстрационный проект управляется подмодулем, поэтому его нужно запускать при клонировании.

git clone https://github.com/Kujiale-Mobile/Painter.git --recursive

Вы можете увидеть каталог после завершения клонирования. Среди них примеры использования хранятся в /pages/example, а /components/painter — это функциональный компонент, который мы представили. Кроме того, есть каталог палитр, в котором хранится нужный нам код рисования. В реальной работе художник вызовет информацию в card.js и нарисует соответствующую графику на картинке, точно так же, как модулированная кисть и погруженная в краску на палитре, а затем созданная на холсте.

Внедрите Painter в свои собственные проекты

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

git submodule add https://github.com/Kujiale-Mobile/PainterCore.git painter

Это поместит инструмент Painter в ваш текущий каталог. Мы рекомендуем размещать его под вашими компонентами.

импортные компоненты

Как и другие компоненты, добавьте на страницу файл .json, который необходимо импортировать в Painter:

"usingComponents":{
  "painter":"/components/painter/painter"
}

вызов компонента

Вызовите компонент рисования в XML-файле страницы и передайте данные правила палитры и обратного вызова после завершения рисования.

<painter palette="{{data}}" bind:imgOK="onImgOK" bind:imgErr="onImgErr"/>

палитра — это данные нашей палитры, созданные в формате json в соответствии с определенными спецификациями.Подробнее см. ниже.

отрисовка обратного вызова

bind:imgOK="onImgOK"
bind:imgErr="onImgErr"

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

Pallette

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

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

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

Он находится в самом внешнем слое всего файла json и должен указать следующие свойства:

Атрибуты объяснять
background Фон, который может быть значением цвета или ссылкой на изображение, поддерживает локальные ссылки на изображения и сетевые ссылки на изображения.
width ширина
height высокий
borderRadius закругленные углы
views Другие элементы, которые необходимо нарисовать на диаграмме, могут быть пустыми, но не могут быть опущены.

Образец кода:

{
      background: 'https://qhyxpicoss.kujiale.com/2018/06/12/LMPUSDAKAEBKKOASAAAAAAY8_981x600.png',
      width: '654rpx',
      height: '400rpx',
      borderRadius: '20rpx',
      views: []
 }

просмотреть недвижимость

После рисования общих свойств палитры пришло время добавить некоторые элементы к представлениям. Элемент поддерживает четыре типа, которые классифицируются по полю типа. Различные типы представлений требуют разных данных, например, элемент изображения должен предоставить свой URL-адрес, а текстовый элемент должен предоставить текстовое содержимое:

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

В дополнение к частным свойствам каждого представления, представление имеет некоторые общедоступные свойства, которые можно установить:

Атрибуты эффект
left, top, right, bottom положение элемента
rotate Угол поворота, в градусах 360 градусов
borderRadius Закругленные углы, если вам нужно установить исходную форму изображения, установите для этого свойства половину ширины или высоты.
align Выравнивание элементов по горизонтали, используемое совместно с левым, может быть установлено по левому краю, по центру, по правому краю, по умолчанию — по левому краю.
rotate

Вращение элемента управления, как показано на рисунке ниже, поворачивает строку текста на 6 градусов по часовой стрелке.

{
    type: 'text',
    text: '酷家乐 移动前端',
    css: {
     left: '20rpx',
     top: '50rpx',
     fontSize: '40rpx'
   },
},

Эффект:

borderRadius

Код (обведите):

        {
          type: 'image',
          url: this.cardInfo.avatar,
          css: {
            top: '48rpx',
            left: '448rpx',
            width: '192rpx',
            height: '192rpx',
            borderRadius:'96rpx',
          },
        },

Квадратный угол --> закругленный угол 8rpx --> круглый

align

Интересно значение этого свойства, оно используется для установки выравнивания элемента в горизонтальном направлении относительно настройки положения.

Что это обозначает?

Например, если для левого края элемента установлено значение 100rpx, а для свойства align установлено значение left, то левый конец элемента выравнивается по 100rpx; если для align установлено значение center, центральная ось элемента выравнивается по 100 рпкс.

В следующем примере левая из трех строк текста имеет размер 230 rpx, а выравнивание — по левому краю, по центру и правому краю соответственно. Красная линия — это ось с абсциссой 230 rpx.

То есть, когда установлено свойство align, левое значение выражает позицию align в свойстве элемента.

Код:

		{
          type: 'text',
          text: '酷家乐 移动前端',
          css: {
            left: '330rpx',
            top: '100rpx',
            fontSize: '40rpx',
          },
        },
        {
          type: 'text',
          text: '酷家乐 移动前端',
          css: {
            left: '330rpx',
            top: '200rpx',
            fontSize: '40rpx',
            align: 'center'
          },
        },
        {
          type: 'text',
          text: '酷家乐 移动前端',
          css: {
            left: '330rpx',
            top: '300rpx',
            fontSize: '40rpx',
            align: 'right'
          },
        },

С помощью этого свойства вы можете установить выравнивание элемента и выполнить следующие требования к макету:

Примечание. Используйте свойство align в сочетании со свойством left. Установка правильного значения вызовет ошибку.

выровнять и повернуть

Когда атрибуты выравнивания и атрибута поворота существуют одновременно, вращение элемента центрируется в центральной точке элемента.

измерительное устройство

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

сохранить демонстрационное изображение

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

  onImgOK(e) {
    this.imagePath = e.detail.path;
  },

  saveImage() {
    wx.saveImageToPhotosAlbum({
      filePath: this.imagePath,
    })
  },

Кнопка привязана к методу saveImage, нажмите, чтобы сохранить:

Создайте круг друзей, обменивающихся фотографиями

Наконец, с помощью инструмента Painter вы можете генерировать разные стили обмена картинками в кругу друзей (на картинке ниже скриншот онлайн-версии визитной карточки Kuka апплета WeChat)

Эпилог

Painter – это набор инструментов, созданных фронтендом Kujiale для фактической разработки небольших программ. В настоящее время он используется для обмена моментами, замены шаблонов скинов и т. д. Открытый исходный код, чтобы поделиться со всеми. Если это может кому-то помочь, мы очень рады; мы также очень рады и благодарны за упоминание issure или pr, чтобы рассказать нам что-то, о чем мы не можем думать сами, или помочь решить большие и маленькие дыры в Painter:

снова портал:GitHub.com/Ku добавил -моб…

Категории