从期末考试结束开始着手做这个小程序，到 2019-01-22 正式上线，今天终于有时间来总结一下这些日子学到的东西，以便日后复习。

成果

这是一款用于图片编辑的工具小程序，(可以操作一波表情包啦)，来认识一下它吧~

源码

image-20220503114239459

它的功能

  1. 你可以从主页面上传手机相册中的图片，上传成功后会自动跳转到图片编辑页面
  2. 你可将底部滚动栏中的挂饰图片添加到你上传的图片上，并可以用手调整挂饰的大小和位置
  3. 点击保存并同意保存权限后小程序就会将编辑好的图片保存在你的相册中啦~

接下来，你可以分享 or 斗图 or … if you like

挂件来源

Notes

  • wxml<->html，wxss<->css
  • 微信小程序默认提供了很多 wxml 组件供我们使用
  • 微信小程序默认提供了很多强大的 API 接口供我们调用，本小程序用到的接口有
Explaination API
上传图片 wx.chooseImage()
获取图片信息 wx.getImageInfo()
创建画布地图 wx.createCanvasContext(“canvasId”)
保存图片到系统相册 wx.saveImageToPhotosAlbum()
当前画布指定区域内容导出生成指定大小的图片 wx.canvasToTempFilePath()
显示消息提示框 wx.showToast()
创建 SelectorQuery 对象实例 wx.createSelectorQuery()

图片等比例缩放原理

  • 图片宽 / 图片高 = 画布宽 / 画布高

图片大小自适应原理

  • 首先wx.createSelectorQuery()得到容器的宽高
  • 然后wx.getImageInfo()得到上传的图片的宽高
  1. 图片瘦高 -> 即：图片高度/图片宽度 > 容器高度/容器宽度，则 -> 画布高 = 容器高，再由等比例缩放原理计算画布宽
  2. 图片胖宽 -> 即：图片高度/图片宽度 < 容器高度/容器宽度，则 -> 画布宽 = 容器宽，再由等比例缩放原理计算画布高

图片拖动原理

其实图片的拖拽和最初电影的原理是一样的，都是由一帧帧的画面连起来形成了一种移动的视觉效果

👉偏移值 x = 触摸点的clientX - 挂饰图片的clientX

👉偏移值 y = 触摸点的clientY - 挂饰图片的clientY

偏移值 x 和偏移值 y 在拖拽过程中保持不变 ！

And then~

拖拽一旦开始，每时每刻我们都能获取到 touchPoint 的 clientX 和 clientY

分别减去对应的偏移值便可得到挂饰图片新位置的 clientX 和 clientY

然后进行实时更新（即在拖拽过程中不停地画新的场景）

图片缩放原理

1
2
// 实时计算缩放比例，然后在缩放过程中不停地画新场景以实现缩放
cfg.scale = cfg.scale + 0.0001 * (cfg.curDistance - cfg.initialDistance);
  • 由勾股定理计算当前两手指之间的距离
  • 可以设置不能无限放大或缩小

BUG 处理

  • 由于缩放结束的一瞬间会触发 touchEnd 事件，相当于又一次触碰到了屏幕，就会触发此函数🌚，为了解决这个问题，设置若离上次结束小于 600ms，则不处理
1
2
3
4
5
6
7
8
9
10
onTouchEnd() {
  var date = new Date();
  cfg.endTime = date.getTime();
}

if (new Date().getTime() - cfg.endTime < 600) {
  return;
} else {
  this.move(event);
}

细节

  1. 触摸事件中，要判断执行的是拖拽操作还是缩放操作，可由触摸点的个数，即 event.touches.length 是否大于 1 来判断
  2. 挂饰图片拖动结束都要记录下来其位置，这样更换挂饰时就会在当前挂饰位置而不会归位
  3. 缩放比例需记录，防止更换挂饰时挂饰大小复原
  4. 由于有可能在拖拽图片前进行了图片缩放，所以需要在获取挂饰图片的原始宽高后由当前的缩放比例计算新的宽高

（完）