小程序 批注/笔迹

此章主要介绍小程序里，如何进行笔迹书写/图片批注。

小程序文档介绍

画布：Canvas，绘图上下文：CanvasContext

1.在前端创建一个canvas，前端的canvas的canvas-id，使用 wx.createContext 获取绘图上下文context

var context = wx.createCanvasContext('myCanvas')

2.设置属性/样式，以下是最常用的几个

• setStrokeStyle('red') -- 设置线条样式
• setLineWidth(4) -- 设置线条宽度
• setLineCap('round') -- 设置线条端点的样式

3.画图

设置路径：

• context.lineTo(x,y)
• context.moveTo(x,y)
• context.rect(x1,y1,x2,y2)

然后设置样式,就可以画了:

context.setStrokeStyle('red')
context.stroke()
context.draw()

以上是设置样式再绘图stroke()。

多段绘制：

stroke() 描绘的的路径是从 beginPath() 开始计算，所以如果需要绘制多条颜色线段:

需要lineTo()、setStrokeStyle()、stroke()之后，调用context.beginPath()重新开始一段。

如果不重新开始路径的话，是以最后一次设置（setFillStyle、setStrokeStyle、setLineWidth）为准的。

另外，需要注意的是：stroke() 不会将 strokeRect() 包含进去，因为strokeRect（）会立即绘制。

图片批注Demo

index.wxml

多张图片，使用swiper预览。点击进入批注状态后，将当前图片作为画布的背景显示

 1     <view class="body">
 2         <view class="pictureViewer" style="display:{{isInEdit?'none':'flex'}}">
 3             <swiper duration="200" bindchange="onImageChange" indicator-dots="{{true}}" indicator-color="rgba(0, 0, 0, .3)" indicator-active-color="rgba(255, 255, 255, .6)">
 4                 <swiper-item wx:for="{{editImages}}" wx:for-item="image" wx:for-index="index">
 5                     <image class="pictureViewer" src='{{image}}'></image>
 6                 </swiper-item>
 7             </swiper>
 8         </view>
 9         <view class="canvas_area" style="display:{{isInEdit?'flex':'none'}}">
10             <canvas canvas-id='{{canvasId}}' class="myCanvas" disable-scroll="false" bindtouchstart="touchStart" bindtouchmove="touchMove" bindtouchend="touchEnd">
11             </canvas>
12         </view>
13     </view>

index.js

对触摸的开始位置进行记录，触摸移动时直接绘制。一些其它操作，比如：开始批注、撤销、重置、保存，比较简单，详见github的demo。

 1     /**
 2      * 触摸开始
 3      */
 4     touchStart: function (e) {
 5         if (e.changedTouches.length >= 2) return;
 6         //得到触摸点的坐标
 7         this.startX = e.changedTouches[0].x
 8         this.startY = e.changedTouches[0].y
 9         // 设置画笔颜色
10         this.context.strokeStyle = this.data.penColor;
11         // 设置线条宽度
12         this.context.setLineWidth(this.data.lineWidth);
13         // 让线条圆润
14         this.context.setLineCap('round')
15         this.context.beginPath()
16     },
17     /**
18      * 手指触摸后移动
19      */
20     touchMove: function (e) {
21         if (e.changedTouches.length >= 2) return;
22         var startX1 = e.changedTouches[0].x
23         var startY1 = e.changedTouches[0].y
24 
25         this.context.moveTo(this.startX, this.startY)
26         this.context.lineTo(startX1, startY1)
27         this.context.stroke()
28 
29         this.startX = startX1;
30         this.startY = startY1;
31         this.context.draw(true);
32     },
33     /**
34      * 触摸结束
35      */
36     touchEnd: function (e) {
37         this.touchMove(e);
38     },

Demo效果：

 

 demo：https://github.com/Kybs0/wechat_handWriting

其它坑：

如果是使用Taro框架开发的小程序，Canvas的层级会很高，如果需要按钮置顶，可以使用cover-view添加操作。