请问canvas内容自适应怎么实现的

孙金苗
  • 27

canvas的宽度变小,里面的内容也跟着缩放。
难道都是用百分比计算出来的位置?
有没有类似小程序rpx的技术?
图中是百度的echart

回复
阅读 755
6 个回答

window.onresize的时候重新绘制canvas,echarts也是提供了resize方法的

resize,此api需要手动调用来改变图表大小

window.onresize = function () {
  myChart.resize();
};

在线示例

这个有比较多的方案,比如图像计算中引入一个放缩变量(控制)系数(如果是等比例放缩,这个系数只需要一个,如果允许拉伸,则还需要有scX和scY的区别),这样在resize的处理中,先计算出这个系数,再在所有需要的地方计算则可以很快获取正确的结果。

或者先统一计算,再整个乘上放缩系数来映射放缩都是可以的。

离线 canvas 原始大小
画完了,直接 缩放贴到 目标 canvas

  • ECharts 是监听了屏幕缩放,然后调用实例的 resize 方法调整图像尺寸的;
  • rpx 的屏幕适配是基于屏幕宽度的,在开发中可以使用 px2rem 达到近似的效果。
    但是 canvas 比较特殊,除了 style.widthstyle.height 之外,它还有画布本身的 widthheight 属性,而屏幕适配只能修改 style.xxx,画布的内容则是等比缩放的,缩放倍数略大一点,就会导致图像出现锯齿或者边缘变糊。

虽然 canvas 呈现的是位图,但不妨碍人们为它封装矢量图绘制接口,如果因为缩放而影响画质的话就失去了矢量图绘制的优点了。
所以最好的方法是像 ECharts 那样,封装一个缩放的方法,跟随屏幕缩放。
再次一点的方案,可以把 canvaswidthheight 设为尺寸变化范围的最大值,因为图像缩小带来的不良效果通常要轻微一些(拟合通常比插值靠谱)。

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
你知道吗?

宣传栏