S2

S2 基于 Canvas 渲染，在实际的业务场景开发中，我们发现有以下使用场景会导致 表格渲染模糊

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

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

const s2Options = {
  hd: false
}

效果对比

关闭高清适配

开启高清适配

不同 DPR 设备间切换

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

const { width, height } = s2Options
const devicePixelRatioMedia = window.matchMedia(
  `(resolution: ${window.devicePixelRatio}dppx)`,
);

devicePixelRatioMedia.addEventListener('change', renderByDevicePixelRatio)

const renderByDevicePixelRatio = (ratio = window.devicePixelRatio) => {
  const newWidth = Math.floor(width * ratio);
  const newHeight = Math.floor(height * ratio);

  // 内部的更新容器大小方法
  changeSheetSize(newWidth, newHeight);
};

笔记本触控板双指缩放

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

preview

// 触控板双指缩放 无法触发
window.addEventListener('resize', ...)

普通浏览器窗口放大缩小

preview

触控板双指缩放

preview

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

window.viewport?.visualViewport?.addEventListener(
  'resize',
  this.renderByZoomScale,
);

const renderByZoomScale = debounce((e) => {
  // 拿到缩放比 更新容器大小
  const ratio = Math.max(e.target.scale, window.devicePixelRatio);
  if (ratio > 1) {
    const { width, height } = s2Options
    const newWidth = Math.floor(width * ratio);
    const newHeight = Math.floor(height * ratio);

    // 内部的更新容器大小方法
    changeSheetSize(newWidth, newHeight);
  }
}, 350);

关闭高清适配

preview

开启高清适配

preview

完整代码

自定义设备像素比

表格默认使用设备当前像素比渲染，也就是 window.devicePixelRatio, 如果你觉得初始渲染就很模糊，可以手动指定表格按照 2 倍设备像素比来渲染，通过 transformCanvasConfig 透传给底层的 G 绘制引擎

const s2Options = {
  transformCanvasConfig() {
    return {
      devicePixelRatio: 2
    }
  }
}

S2 基于 Canvas 渲染，在实际的业务场景开发中，我们发现有以下使用场景会导致 表格渲染模糊

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

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

const s2Options = {
  hd: false
}

效果对比

关闭高清适配

开启高清适配

不同 DPR 设备间切换

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

const { width, height } = s2Options
const devicePixelRatioMedia = window.matchMedia(
  `(resolution: ${window.devicePixelRatio}dppx)`,
);

devicePixelRatioMedia.addEventListener('change', renderByDevicePixelRatio)

const renderByDevicePixelRatio = (ratio = window.devicePixelRatio) => {
  const newWidth = Math.floor(width * ratio);
  const newHeight = Math.floor(height * ratio);

  // 内部的更新容器大小方法
  changeSheetSize(newWidth, newHeight);
};

笔记本触控板双指缩放

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

preview

// 触控板双指缩放 无法触发
window.addEventListener('resize', ...)

普通浏览器窗口放大缩小

preview

触控板双指缩放

preview

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

window.viewport?.visualViewport?.addEventListener(
  'resize',
  this.renderByZoomScale,
);

const renderByZoomScale = debounce((e) => {
  // 拿到缩放比 更新容器大小
  const ratio = Math.max(e.target.scale, window.devicePixelRatio);
  if (ratio > 1) {
    const { width, height } = s2Options
    const newWidth = Math.floor(width * ratio);
    const newHeight = Math.floor(height * ratio);

    // 内部的更新容器大小方法
    changeSheetSize(newWidth, newHeight);
  }
}, 350);

关闭高清适配

preview

开启高清适配

preview

完整代码

自定义设备像素比

const s2Options = {
  transformCanvasConfig() {
    return {
      devicePixelRatio: 2
    }
  }
}