欢迎光临
我的个人博客网站

小程序 批注/笔迹

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

小程序文档介绍

画布: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()重新开始一段。

如果不重新开始路径的话,是以最后一次设置(setFillStylesetStrokeStylesetLineWidth)为准的。

另外,需要注意的是: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添加操作。

赞(0) 打赏
未经允许不得转载:张拓的天空 » 小程序 批注/笔迹
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

专业的IT技术经验分享 更专业 更方便

联系我们本站主机

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏