公告列表
公告列表
收藏
回答

canvas隐藏功能如何实现呢？谢谢！

使用canvas画图的时候，要生成一张图片，需要把 canvas隐藏。使用属性hidden=‘true’；（使用接口：wx:canvasToTempFilePath）

真机测试：

安卓:成功生成图片；

iphone 6s：走fail路径，errMsg：‘canvasTo TempFilePath:fail fail’

怎样可以兼容隐藏呢？

回答关注问题邀请回答
收藏

8 个回答

  • 心心情
    心心情
    2017-05-19

    发现一个很好的隐藏canvas的方法~~只需要更改css的属性就可以了。

    position:fixed;left:100%;

    简直崩溃啊~

    2017-05-19
    有用 40
    回复 35
    • 口
      口
      2020-05-28
      必须给你点个赞
      2020-05-28
      赞
      回复
    • Daisy
      Daisy
      2020-06-15
      这个真的是太棒了，忍不住要夸你
      2020-06-15
      赞
      回复
    • 心心情
      心心情
      2020-06-15回复Daisy
      哈哈哈
      2020-06-15
      赞
      回复
    • Leiith
      Leiith
      2020-07-04
      你他娘的还真是个天才
      2020-07-04
      赞 1
      回复
    • RelaxAir
      RelaxAir
      2020-09-09
      u1s1，2020年了，还是发现你这个方法最好用，你真skr天才！！！！！
      2020-09-09
      赞
      回复
    查看更多(30)
  • 前往悬崖下寻宝的神三算
    前往悬崖下寻宝的神三算
    2023-08-03

    点个赞，顺便fvck微信团队

    2023-08-03
    有用
    回复
  • Hi.
    Hi.
    2022-09-29

    为啥我设置position:fixed;left:100%;还是不行，页面左边会多一块白色的canvas布局。

    2022-09-29
    有用
    回复
  • -_-#
    -_-#
    2020-09-27

    我试了使用position: fixed;left: 9999px;但是只有加载时才有用, 如果初始化left为100px 切换left为0时canvas还在原来的位置上

    2020-09-27
    有用
    回复
  • Fidelity
    Fidelity
    2019-09-10

    我好崩溃, 以前用 hidden 隐藏 Canvas 完全好好的,没问题, 线上跑了那么久都能生成. 今天发现突然不能用了, 花了我一天的时间, 从后端到前端都排查了一遍. hidden 了 canvas 图片就是显示不出来....终于解决了

    2019-09-10
    有用
    回复
  • SH😜W
    SH😜W
    2017-05-19

    我试了一下，还真的会销毁canvas哦！

    那你绘图动作麻不麻烦，如果不麻烦，可以在设置show参数变量值的时候，再重绘一次嘛。

    <!--index.wxml-->
    <canvas canvas-id="myCanvas" style="height:100%;width:100%;" wx:if="{{show==true}}"></canvas>
    <button bindtap="show">显示与隐藏</button>
    Page({
      data: {
        show: true,
      },
     
      onShow: function () {
        this.drawImage();
      },
     
      drawImage: function () {
     
        var context = wx.createCanvasContext('myCanvas')
     
        context.setLineWidth(5);//设置线条宽度
        context.setStrokeStyle("#F465c6");//设置线条样式
        context.setLineCap('round');//设置线条的端点样式 round:圆角
        context.setLineJoin('round');//设置线条的交点样式 round:圆角
     
        context.moveTo(10, 10);
        context.lineTo(100, 100);
        context.stroke();
        context.draw();
     
      },
     
      show: function () {
        this.setData({
          show: !this.data.show,
        });
     
        if (this.data.show) {
          this.drawImage();
        }
      },
     
    })


    2017-05-19
    有用
    回复
  • 心心情
    心心情
    2017-05-19

    wx:if会让canvas销毁，而不是隐藏~~我希望这个组件只是隐藏起来了，但是还是存在的。

    2017-05-19
    有用
    回复
  • SH😜W
    SH😜W
    2017-05-19

    我不太明白隐藏画布canvas跟调用wx:canvasToTempFilePath有什么关系。。。

    我查了一下canvas，没发现有你说的那个hidden属性，你是不是对canvas使用了CSS样式？其文档最下边的 Bug & Tip 第3条【css 动画对 canvas 组件无效】，或许CSS样式对canvas组件还是有点问题。

    至于你想实现隐藏目的，可以换个思路，使用条件控制，比如：

    <canvas canvas-id="myCanvas" wx:if="{{hidden==true}}"></canvas>

    在js页面中控制hidden这个参数变量的值来使得canvas组件出现或隐藏。

    要注意的是在设置hidden值的时候，只能使用setData()方法，因为setData()用于将数据从逻辑层发送到视图层，同时改变对应的 this.data 的值，直接修改 this.data 而不调用 this.setData() 是无法改变页面的状态的，还会造成数据不一致。

    2017-05-19
    有用
    回复
请 登录 后发表内容
相关问题
相关文档