258资源分享网

个人制作，该文章主要讲解最近基于 uni-app 框架编写的集图文拖拽等多方位编辑、油墨电子签名、开放式海报于一体的小程序的制作思路和实现代码。

目录

1、完整源码链接

2、实现思路

3、核心代码

3-1、图文多方位编辑

3-2、油墨电子签名

3-3、开放式海报

3-4、小结

4.效果展示和体验

1、完整源码链接：

完整代码：https://github.com/TensionMax/mini-ps

其中演示的文字编辑、图片编辑、油墨电子签名、开放式海报可单独食用，含文档说明。

2、实现思路

该工具主要由五个不同组件模块：文字编辑、图片编辑，油墨电子签名、控制、开放式海报

1、文字编辑模块设置好的文字参数对象插入到文字队列中。

2、图片编辑模块设置好的图片参数对象插入到图片队列中。

3、油墨电子签名模块完成绘制后转为利用 canvasToTempFilePath 转成临时图片，获取参数后插入图片队列中，也可以直接导出。

4、利用控制模块调整/文字队列和图片队列的参数。

5、开放式海报模块，利用控制台的参数将PS画板上的效果绘制到canvas上来实现的效果，接着再利用 canvasToTempFilePath 转成图片导出。

3、核心代码 3-1、文字/图片编辑模块

文字/图片编辑模块主要是实现移动/缩放功能，其他附带的属于甜品，

由于两个模块功能类似，该篇仅讲解图片编辑模块。

HTML <img style="position: absolute" :style="{ left: item.x+'px', top: item.y+'px', width: item.w+'px', height: item.h+'px', }" @touchstart='touchStart($event,item,index)' @longpress='longPress($event,item,index)' @touchmove.stop='touchMove($event,item,index)' @touchcancel="touchEnd($event,item,index)" @touchend='touchEnd($event,item,index)' v-for="(item,index) of imagelist" :key="index" :src="item.src" />

在 imageList 的数组标签中，每个绑定的事件中用 $event 来调用事件本身的参数，其中 $event 的 touches 或 changedTouches 包含我们需要的位置参数，示例如下：

touches:[{ clientX: 14 //与显示区域(不含顶部栏)左上角的水平距离 clientY: 16 //与显示区域(不含顶部栏)左上角的垂直距离 pageX: 14 //与整个页面(不含顶部栏)左上角的水平距离 pageY: 16 //与整个页面(不含顶部栏)左上角的垂直距离 }, { clientX: 14 clientY: 16 pageX: 14 pageY: 16 }]

touches 长度为2代表双指触碰，通过判定双指触摸点的变化方向可实现双指缩放效果。因为每个标签都设置为 style="position: absolute" 所以只需要根据位置参数来更新 x、y、w、h 即可

题外话-性能问题

一次移动多次操作DOM影响性能

—— 虚拟DOM了解一下

为何不用事件委派

—— 不必要，Vue已经帮我们做了优化，在非常影响性能时再考虑

图片编辑Demo

3-2、油墨电子签名板

由于 touchmove 事件在小程序真机的触发频率和精确度很迷，不太好根据速度来判定绘制的线宽，我只好用其他方式去实现，虽然效果不完美。

其实现思路是通过多次的循环绘制以达到油墨效果，每次循环绘制的长度和宽度都不相同。

HTML <canvas canvas-id="canvas" @touchstart.stop="touchStart" @touchmove.stop="touchMove" @touchend.stop="touchEnd" > </canvas> JAVASCRIPT export default { data() { return { lineWidth0: 5, //初始线宽 建议1~5 ctx: null, x0: 0, //初始横坐标或上一段touchmove事件中触摸点的横坐标 y0: 0, //初始纵坐标或上一段touchmove事件中触摸点的纵坐标 t0: 0, //初始时间或上一段touchmove事件发生时间 v0: 0, //初始速率或touchmove事件间发生速率 lineWidth: 0, //动态线宽 keenness: 5, //油墨程度 建议0~5 k: 0.3, //油墨因子，即每次绘制线条时线宽的变化程度 } }, onReady() { this.ctx = uni.createCanvasContext('canvas', this); this.ctx.setLineCap('round') }, methods: { //设置初始值 touchStart(e) { this.lineWidth = this.lineWidth0 this.t0 = new Date().getTime() this.v0 = 0 this.x0 = e.touches[0].clientX this.y0 = e.touches[0].clientY }, touchMove(e) { let dx = e.touches[0].clientX - this.x0, dy = e.touches[0].clientY - this.y0, ds = Math.pow(dx * dx + dy * dy, 0.5), dt = (new Date().getTime()) - this.t0, v1 = ds / dt; //同 this.v0 初始速率或touchmove事件间发生速率 if (this.keenness === 0) { //油墨为0时 this.ctx.moveTo(this.x0, this.y0) this.ctx.lineTo(this.x0 + dx, this.y0 + dy) this.ctx.setLineWidth(this.lineWidth) this.ctx.stroke() this.ctx.draw(true) } else { //由于touchMove的触发频率问题，这里采用for循环绘制，原理如图所示 //这里的k因为 let a = this.keenness if (this.keenness > 5) { a = 5 } for (let i = 0; i < a; i++) { this.ctx.moveTo(this.x0 + dx * i / a, this.y0 + dy * i / a) this.ctx.lineTo(this.x0 + dx * (i + 1) / a, this.y0 + dy * (i + 1) / a) //此时touchmove事件间发生与上一个事件的发生的速率比较 if (v1 < this.v0) { this.lineWidth -= this.k if (this.lineWidth < this.lineWidth * 0.25) this.lineWidth = this.lineWidth * 0.25 } else { this.lineWidth += this.k if (this.lineWidth > this.lineWidth * 1.5) this.lineWidth = this.lineWidth * 1.5 } this.ctx.setLineWidth(this.lineWidth) this.ctx.stroke() this.ctx.draw(true) } } this.x0 = e.touches[0].clientX this.y0 = e.touches[0].clientY this.t0 = new Date().getTime() this.v0 = v1 }, touchEnd(e) { this.x0 = 0 this.y0 = 0 this.t0 = 0 this.v0 = 0 } } }

使用的大部分是canvas的基础api，注意绘制单位都为px。

油墨电子签名Demo

3-3、开放式海报模块

如果说微信小程序是银色金滩，那么截至2020年1月6日或者未来，小程序的canvas就是金滩上充斥着未知数个的玻璃块的那一片 ——

鲁迅