leaferjs/leafer-ui

有没有设置canvas渲染dpi的选项?

Closed this issue · 1 comments

比如类似于原版canvas中常用的用于适配显示器dpi的方法:

const canvas = document.getElementById('yourCanvas');
const ctx = canvas.getContext('2d');

// 保存CSS设置的宽高
const cssWidth = canvas.width;
const cssHeight = canvas.height;

// 设置Canvas的宽高为DPR的倍数
canvas.width = cssWidth * dpr;
canvas.height = cssHeight * dpr;

// 通过CSS将Canvas的显示大小设置为原本希望的尺寸
canvas.style.width = cssWidth + 'px';
canvas.style.height = cssHeight + 'px';

// 缩放Canvas的内容,使得绘图时不会模糊
ctx.scale(dpr, dpr);

可能leafer有这个配置项,但是我没找到,原谅我眼瞎😂

用pixelRatio,默认会自动适配:
https://leaferjs.com/ui/guide/app/config.html#pixelratio-number

new Leafer({view: window, pixelRatio: 2}}