收藏
回答

关于canvas组件

问题模块 框架类型 问题类型 API/组件名称 终端类型 微信版本 基础库版本
API和组件 小程序 Bug canvas 工具 6.7.3 2.3.0

 

function drawCanvas2(ePage, path, name, index, width,height) {

//  path为可用的图片链,width和height为计算出的适应图片的宽高

     ePage.setData({

       width:width,

       height:height

     })   // 此处是对canvas标签的宽高进行适应性改变,每次根据传入的大小动态改变canvas组件宽高

console.log(ePage.data.width,ePage.data.height)

           index = parseInt(index)

 

           const ctx = wx.createCanvasContext(name, ePage)

           ctx.clearRect(0, 0, width, height)

            ctx.save()

     

           ctx.drawImage(path, 0, 0, width, height)

           // const pattern = ctx.createPattern(path, 'no-repeat')


           // ctx.fillStyle = pattern

           // ctx.fillRect(0, 0, width * 0.15, width * 0.15)

......

           ctx.save()

            ctx.draw()

        wx.canvasToTempFilePath({ ....// 此处为保存图片或者将绘画好的图片链接赋值到image标签})


}

"当只运行一次上述方法时,在开发者工具上显示正确的,然而在真机上canvas的宽高为上一次定义的大小";

假如:width =800 height = 800 为默认值,现在传入width=500 height=500 ;当在真机上进行上述方法运行wx.canvasToTempFilePath时保存的图是在width=800 height=800 上绘画的效果, 再次运行,传入width=600 height=600  canvas绘制的大小是width=500 height=500 上的,

 进行代码适应上述改变:在方法执行前执行以下代码:

const ctx = wx.createCanvasContext(name, ePage)

           ctx.clearRect(0, 0, width, height)

ctx.draw();

注:先进行一次绘画使得宽高改变为想要的值再运行主方法,在真机上效果实现了,然而变的稍微卡了点,在开发者工具中无法将图片的链接赋值到image标签进行显示

开发者工具输出显示如下图,未运行至箭头处,ctx.draw()无输出 未执行,


然而在真机上运行正确,代码如下图



 


最后一次编辑于  2018-11-08
回答关注问题邀请回答
收藏

2 个回答

  • 熊熊波
    熊熊波
    2018-11-08

    https://developers.weixin.qq.com/s/qHv5XLmz7c3v

    求解

    2018-11-08
    赞同
    回复 6
    • 卢霄霄
      卢霄霄
      2018-11-08

      https://developers.weixin.qq.com/s/jOwqTLm4783Q

      你试试,正常了吗?

      2018-11-08
      回复
    • 熊熊波
      熊熊波
      2018-11-08回复卢霄霄

      哇,可以了耶

      2018-11-08
      回复
    • 卢霄霄
      卢霄霄
      2018-11-08回复熊熊波

      this.setData是异步渲染,放在this.setData回调里才能保证canvas的宽高被设上了哦

      2018-11-08
      回复
    • 熊熊波
      熊熊波
      2018-11-08回复卢霄霄

      为什么不能那样啊

      2018-11-08
      回复
    • 熊熊波
      熊熊波
      2018-11-08回复卢霄霄

      写在方法里和外面什么区别啊

      2018-11-08
      回复
    查看更多(1)
  • 卢霄霄
    卢霄霄
    2018-11-08

    说了一大堆。。没太理解。。要不做个代码片段吧。。

    或者。。你不是要setData设置canvas的宽高吗?把后面的代码放到 this.setData({},()=>{}) 这个回调方法里试试

    2018-11-08
    赞同
    回复 8
    • ==
      ==
      2018-11-08

      我也没理解~~   !!看的一脸懵,,

      2018-11-08
      回复
    • 卢霄霄
      卢霄霄
      2018-11-08回复==

      学习小程序的同时,锻炼了推理能力。。

      2018-11-08
      回复
    • ==
      ==
      2018-11-08回复卢霄霄

      柯南??

      2018-11-08
      回复
    • 卢霄霄
      卢霄霄
      2018-11-08回复==

      咦。。你也要看吗?明天上映新的剧场版

      2018-11-08
      回复
    • ==
      ==
      2018-11-08回复卢霄霄

      约???

      2018-11-08
      回复
    查看更多(3)
登录 后发表内容