• 技术文章 >微信小程序 >小程序开发

    介绍微信小程序 canvas开发的注意事项

    coldplay.xixicoldplay.xixi2020-11-26 17:54:29转载1870

    小程序开发教程栏目介绍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-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);
           }
          });

    以上就是介绍微信小程序 canvas开发的注意事项的详细内容,更多请关注php中文网其它相关文章!

    声明:本文转载于:jb51,如有侵犯,请联系admin@php.cn删除
    专题推荐:微信小程序 canvas
    上一篇:微信小程序转换器之 loader设计实现 下一篇:小程序内联h5页面,小程序webview内网页等等方法实现微信支付
    线上培训班

    相关文章推荐

    • 小程序画布canvas隐藏的问题解决• 基于js+canvas实现五子棋小游戏• 使用canvas压缩图片的具体步骤• 通过html5中的canvas来绘制一个圆环形进度条

    全部评论我要评论

  • 取消发布评论发送
  • 1/1

    PHP中文网