微信小程序 canvas开发的注意事项
小程序开发教程栏目介绍canvas开发的注意事项
微信小程序 wxcanvas
测试手机为IPHONE6,开发者工具版本0.10.102800。开发者工具0.11.112301版本也一样
微信小程序里的canvas 非 h5 canvas有很多不一样的地方,以下把微信小程序的canvas叫做wxcanvas
下面全是我一点点测试出的干货,耐心看:
1.wxcanvas,不像h5canvas那样有width和height属性和width和height的style样式。他只有style样式,可以理解为他就是个框吧;
2.wxcanvas不要当成真的H5canvas,就当它是个p就行,画出范围的东西也是存在的,改变width,height就显示出来了,或者说这里有重绘,但具体如何实现的不知道;
3.改变wxcanvas的style的width,height,并不改为原画布上的东西的大小;
4.css transform变换中的变大缩小也无法改变原画布上的东西大小
5.官方说法:context只是一个记录方法调用的容器,用于生成记录绘制行为的actions数组。context跟<canvas/>不存在对应关系,一个context生成画布的绘制动作数组可以应用于多个<canvas/>。
实际上,context.getActions()后,context中的信息会被清空,如果想重复利用,需要var temp=context.getActions()将操作数组保存下来,才可重复用于wx.drawcanvas;
6.注意
wx.drawCanvas({
canvasId: 'target',
actions: context.getActions()
});
默认会清空画布,想不清空需要
wx.drawCanvas({
canvasId: 'target',
actions: context.getActions(),
reserve:true
});
7.《重点》
<canvas disable-scroll="true" catchtouchmove="ccvsMove" bindtouchmove="cvsMove" canvas- style='width:{{width}}px;height:{{height}}px'></canvas>
注意,disable-scroll="true"和bindtouchmove="cvsMove"同时存在时才能避免页面跟着动,catchtouchmove是不行的
上面的写法,ccvsMove和cvsMove会都触发,
ccvsMove返回的是普通touch事件对象,有pageX,clientX等,
cvsMove返回的是canvasTouch事件对象,没有pageX,clientX,只有x,y
8.
wx.drawCanvas({
canvasId: 'target',
actions: [],
reserve:false
});
可以清空画布和画布的状态
9.画布的scale tranlate rotate等状态,在reserve:true时会接着上次的状态
10. context.getActions()返回的数组很有用,打印出来你会发现里面的内容你都能看懂,可以直接修改数组改变画的动作
11.wx.drawCanvas时context.drawImage在手机上可以画出来,在电脑开发工具上画不出来
12.wx.canvasToTempFilePath
官方文档中只有一行,原来
wx.canvasToTempFilePath参数为一个对象包括canvasID,success,fail,complete,和wx.saveFile差不多;
wx.canvasToTempFilePath({
canvasId: 'target',
success: function success(res) {
wx.saveFile({
tempFilePath: res.tempFilePath,
success: function success(res) {
console.log('saved::' res.savedFilePath);
},
complete: function fail(e) {
console.log(e.errMsg);
}
});
},
complete: function complete(e) {
console.log(e.errMsg);
}
});
这篇好文章是转载于:学新通技术网
- 版权申明: 本站部分内容来自互联网,仅供学习及演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,请提供相关证据及您的身份证明,我们将在收到邮件后48小时内删除。
- 本站站名: 学新通技术网
- 本文地址: /boutique/detail/tangbghkb
-
photoshop保存的图片太大微信发不了怎么办
PHP中文网 06-15 -
Android 11 保存文件到外部存储,并分享文件
Luke 10-12 -
word里面弄一个表格后上面的标题会跑到下面怎么办
PHP中文网 06-20 -
《学习通》视频自动暂停处理方法
HelloWorld317 07-05 -
微信公众号没有声音提示怎么办
PHP中文网 03-31 -
photoshop扩展功能面板显示灰色怎么办
PHP中文网 06-14 -
excel下划线不显示怎么办
PHP中文网 06-23 -
excel打印预览压线压字怎么办
PHP中文网 06-22 -
怎样阻止微信小程序自动打开
PHP中文网 06-13 -
photoshop蒙版画笔没反应怎么办
PHP中文网 06-24