小麦进城演员表,特种兵之火凤凰剧情分集介绍,超级银河兄妹
微信小程序 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,就当它是个div就行,画出范围的东西也是存在的,改变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-id="target" id="target" 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); } });
感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!
如对本文有疑问,请在下面进行留言讨论,广大热心网友会与你互动!! 点击进行留言回复
Android apk 项目一键打包并上传到蒲公英的实现方法
Android 自定义LineLayout实现满屏任意拖动功能的示例代码
android 限制某个操作每天只能操作指定的次数(示例代码详解)
Android 集成 google 登录并获取性别等隐私信息的实现代码
网友评论