如何解决 Canvas 绘制表格放大模糊问题 —— S2 高清适配方案

S2 是基于 canvas 开发的多维可视分析表格，在实际的业务场景开发中，我们发现有 2 种使用场景会导致 表格渲染模糊

1. 不同 DPR 的设备之间来回切换：比如一台 mac （视网膜屏）, 外接一台显示器 （普通 2k 屏）, 将浏览器移到外接设备查看
2. 使用 mac 触摸板对页面进行缩放：双指缩放，来放大显示，而不是传统的 cmd + +, cmd + - 缩放浏览器窗口大小

默认开启高清适配，可以手动关闭

首先看一下开启前后的对比图

关闭高清适配

开启高清适配

不同 DPR 设备间切换

对于这种场景，我们使用 matchMedia 来监听 DPR 的变化，更新 canvas 的尺寸，从而达到高清的效果

Mac 触摸板双指缩放

区别于浏览器的放大缩小，普通的 resize 事件是无法触发的

普通浏览器窗口放大缩小

触摸板双指缩放

那么如果解决呢？答案就是 使用 VisualViewport API, VisualViewport 可以被用做移动端的双指缩放监听，同样适用于 mac 触摸板

关闭高清适配

开启高清适配

完整代码

更多透视表使用详情请访问S2官网

欢迎大家在 GitHub 给我们反馈问题，更加欢迎有兴趣的同学一起来添砖加瓦，把表分析做得更加专业化、体系化。如果喜欢我们的项目记得start哦~