S2 is based on Canvas rendering. In the actual development of business scenarios, we found that the following usage scenarios will lead to blurred table rendering

1. Switch back and forth between devices with different DPR : such as a mac (retina screen), an external monitor (ordinary 2k screen), and move the browser to the external device to view
2. Use the mac touchpad to zoom the page: double-finger zoom, to zoom in on the display, instead of the traditional cmd + + , cmd + - to zoom the browser window size

HD adaptation is enabled by default and can be manually disabled

const s2Options = {
  hd: false
}

First look at the comparison chart before and after opening

Turn off HD adaptation

Turn on HD adaptation

Switch between different DPR devices

For this scenario, we use matchMedia to monitor DPR changes and update the size of the canvas to achieve high-definition effects

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);
};

Mac touchpad pinch to zoom

Different from the browser's zoom in and zoom out, ordinary resize events cannot be triggered

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

Ordinary browser window zoom in and out

touchpad pinch zoom

So what if it is solved? The answer is to use the VisualViewport API , VisualViewport can be used as a pinch zoom monitor on the mobile terminal, and it is also applicable to the 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);

Turn off HD adaptation

Turn on HD adaptation

full code

Custom Device Pixel Ratio

By default, the table is rendered using the current pixel ratio of the device, that is, window.devicePixelRatio . If you think the initial rendering is blurry, you can manually specify the table to render at 2 times the device pixel ratio

const s2Options = {
  devicePixelRatio: 2
}