Подробное объяснение идей реализации мини-программы WeChat «Шапка Санты».

За последние два дня круг друзей был наводнен шляпами Санты. Даже представители WeChat выступили с опровержением слухов об этой небольшой программе. Это еще один феномен уровня. С точки зрения продукта это, несомненно, очень успешно, но с технической точки зрения это действительно обыденность, и креативность очень важна! Давайте вкратце поговорим об идее: получите аватар, нарисуйте аватар в Canvas, затем нарисуйте шляпу в Canvas, настройте параметры шляпы (положение, размер, поворот) и, наконец, сохраните ее как картинку.

Давайте сначала посмотрим на эффект

 wx.getUserInfo({ успех: функция (рез) {вар userInfo = res.userInfo вар avatarUrl = userInfo.avatarUrl }})

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

 wx.downloadFile({ url: userInfo.avatarUrl, Success: function (res) { if (res.statusCode === 200) { avatarUrl = res.tempFilePath // Адрес здесь указывает на локальное изображение} } })

Для получения аватара удобнее использовать готовый API WeChat.

Здесь инкапсулированы часто используемые методы. avatarImg.w и avatarImg.h ниже относятся к размеру аватара.

 drawAvatar: function (img) { ctx.drawImage(img, 0, 0, avatarImg.w, avatarImg.h)}

Рисуйте изображения с помощью функции drawImage.

Прежде чем рисовать шляпу, я определил объект для сохранения параметров шляпы.

 var Hat = { url: ../res/hat01.png, w: 40, h: 40, x: 100, y: 100, b: 1, // Масштаб увеличения, поворот: 0 // Угол поворота}

Далее приступаем к рисованию шляпы.

 drawHat: function (hat) { ctx.translate(hat.x, Hat.y) ctx.scale(hat.b, Hat.b) ctx.rotate(hat.rotate * Math.PI / 180) ctx.drawImage(hat .url, -hat.w/2, -hat.h/2, шляпа.w, шляпа.h) }

Позвольте мне немного объяснить здесь. Это масштабирование и вращение с центральной точкой шляпы в качестве начала координат.

 ctx.translate(hat.x, Hat.y) //translate перемещает центральную точку холста в указанные координаты

В это время начало координат переместилось из (0, 0) в (x, y), что является центральной точкой шляпы, пересечением половины длины и половины ширины шляпы.

 ctx.drawImage(hat.url, -hat.w / 2, -hat.h / 2, шляпа.w, шляпа.h)

Ключом к рисованию шляпы является перемещение x и y за пределы начала координат. Схематическая диаграмма выглядит следующим образом:

Движущаяся шляпа:

 moveHat: function (e) { Hat.x = e.touches[0].x Hat.y = e.touches[0].y that.drawA() }

Спиновая шляпа:

 RotateHat: function (e) { Hat.rotate = e.detail.value //Мне здесь лениво, используйте компонент ползунка, чтобы сдвинуть значение that.drawA() }

Зум-шапка:

 ScaleHat: function (e) { Hat.b = e.detail.value Hat.w = 40 * Hat.b Hat.h = 40 * Hat.b that.drawA() ////Здесь используется компонент слайдера для значение слайда}

Измените стиль шляпы:

 ChangeHat: function (e) { Hat.url = e.currentTarget.dataset.url //Изменяем стиль шляпы that.drawA() }

Все эти методы имеют метод drawA(), который в основном перерисовывает холст каждый раз, когда он перемещается, вращается, масштабируется или меняет параметры.

Официальный представитель WeChat предоставляет соответствующий API

 saveToPhoto: function () { wx.canvasToTempFilePath({ x: 0, y: 0, ширина: 240, высота: 240, destWidth: 240, destHeight: 240, CanvasId: 'ctx', успех: функция (res) { // Холст для изображения успешного обратного вызова} })}

Наконец сохраните в альбом

 wx.saveImageToPhotosAlbum({ filePath: res.tempFilePath,}) wx.showToast({title: 'Сохранить успешно'})

Выше приведена идея реализации рождественской шапки апплета WeChat, представленная редактором. Надеюсь, она будет вам полезна. Если у вас есть какие-либо вопросы, оставьте мне сообщение, и редактор ответит вам вовремя. Я также хотел бы поблагодарить всех за поддержку сайта боевых искусств VeVb!