46311062 2022-11-21 10:26 采纳率: 100%
浏览 5
已结题

#微信小程序##canvas#

微信小程序中每当用户新存入一条数据后我就在画布上绘出相关的记录。
但是canvas总是只能显示到height指定的位置,超出的部分不能显示。
有什么办法可以让canvas内部也可以滑动吗?
运行效果图:

img

  • 写回答

1条回答 默认 最新

  • YF云飞 2022-11-21 15:49
    关注

    方法1.将绘制出的canvas 保存为本地路径的一个img 路径.然后将图片放到 scroll-view 里面,进行滑动.亲测,滑动最流畅
    html:

    <scroll-view class="temp_day_box" scroll-x>
      <view class="canvas_height">
         <image class="canvas_img" src='{{canvasSaveimg}}'></image>
      </view>
    </scroll-view>
    <canvas canvas-id="canvasWeather" class="canvasHigh"></canvas> 
    
    
    

    css:

    .canvasHigh {
        width: 2250rpx;
        height: 270rpx;
        transform: translateX(-200%);
    }
    .canvas_img{
        width: 2250rpx;
        height: 270rpx;
    }
    
    

    这里的canvasHigh的css属性可以用很多其他的方式隐藏,但是这里注意的是一定不能用display:none;或者 标签里面加hidden,wx:if属性,这样保存下来的图片路径是不会显示出来的。

    js:

    //前面的写法这里就不再编写,可以查看相关文档和官方api
    ctx.draw();
    wx.canvasToTempFilePath({
        canvasId: 'canvasWeather',//canvasId和标签里面的id对应
        success: (res) => {
            var shareTempFilePath = res.tempFilePath;
            _this.setData({
                //将获取到的图片临时路径set到canvasSaveimg中
                canvasSaveimg:shareTempFilePath
            })
        }
    }) 
    
    

    方法2.在scroll-view标签中绑定一个滚动时触发的事件,这里就不需要保存为图片,但是动画效果有点小小的僵硬。

    html:

    <scroll-view class="temp_day_box" scroll-x bindscroll='scrollCanvas'> 
      <view class="canvas_height" style='transform: translateX(-{{canvasLen}}px);'>
        <canvas canvas-id="canvasWeather" class="canvasHigh"></canvas> 
      </view>
    </scroll-view>
    
    
    

    js:

    scrollCanvas: function(e) {
        console.log(e);
        var canvasLen = e.detail.scrollLeft;
        this.setData({
            canvasLen: canvasLen
        })
    }
    
    
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论

报告相同问题?

问题事件

  • 系统已结题 11月29日
  • 已采纳回答 11月21日
  • 创建了问题 11月21日

悬赏问题

  • ¥15 如何用最短的时间大致看懂springboot+vue的项目
  • ¥15 (有偿)懂数值分析和含时变参数微分方程的来
  • ¥15 layui父页的数据表格如何用弹窗页提交后的查询数据来更新数据表格内容?
  • ¥15 abaqus随机生成二维颗粒
  • ¥15 安装ansys许可证管理器时出现了这个问题,如何解决?
  • ¥100 高价求算法,利用智能手机传感器计算车辆的三轴g值
  • ¥15 Blazor server 数据库操作异常,如何解决?(语言-c#)
  • ¥15 uni-app开发APP运行到浏览器访问接口跨域
  • ¥100 mfc消息自创建控件
  • ¥15 网页视频跳过后学习进度未增加