小程序 批注/笔迹
此章主要介绍小程序里,如何进行笔迹书写/图片批注。
小程序文档介绍
画布: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添加操作。
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· [.NET]调用本地 Deepseek 模型
· 一个费力不讨好的项目,让我损失了近一半的绩效!
· .NET Core 托管堆内存泄露/CPU异常的常见思路
· PostgreSQL 和 SQL Server 在统计信息维护中的关键差异
· C++代码改造为UTF-8编码问题的总结
· CSnakes vs Python.NET:高效嵌入与灵活互通的跨语言方案对比
· DeepSeek “源神”启动!「GitHub 热点速览」
· 我与微信审核的“相爱相杀”看个人小程序副业
· Plotly.NET 一个为 .NET 打造的强大开源交互式图表库
· 上周热点回顾(2.17-2.23)
2017-09-10 列表ListBox、ListView、GridView 排序