自適應(yīng)設(shè)備分辨率
- 當(dāng)今大多數(shù)的PC端和移動(dòng)端顯示器都是HD-DPI顯示器。
- HD-DPI 是High Definition-Dots Per Inch 的簡(jiǎn)稱，意思是高分辨率顯示器。
- 不同設(shè)備的顯示器的分辨率是不一樣的。
- 以上圖中的iPhone6/7/8 為例：
- 375*667 代表的手機(jī)的屏幕的物理尺寸，如果我們?cè)谄渲薪⒁粋€(gè)100% 充滿屏幕的，那其尺寸就是375*667。
- Dpr 代表像素密度，2 表示手機(jī)屏幕在寬度上有375*2 個(gè)像素，在高度上有667*2 個(gè)像素，因此iPhone6/7/8 的屏幕的像素尺寸就是750*1334。
- 當(dāng)我們?cè)谶@種像素尺寸大于物理尺寸的高分辨率顯示器里繪圖的時(shí)候，就需要考慮一個(gè)問(wèn)題。
- 若我們直接在iPhone6/7/8 里建立一個(gè)充滿屏幕的canvas，那其像素尺寸就是375*667。
- 這個(gè)尺寸并沒(méi)發(fā)揮高分辨率顯示器的優(yōu)勢(shì)，我們需要先將其像素尺寸設(shè)置為750*1334，然后再將其css 尺寸設(shè)置為375*667。
- 這樣，就可以讓canvas畫(huà)布以高分辨率的姿態(tài)顯示在顯示器里。
- 代碼示例：
function resizeRendererToDisplaySize(renderer: WebGLRenderer) {
const { width, height, clientWidth, clientHeight } = renderer.domElement;
const [w, h] = [clientWidth * devicePixelRatio, clientHeight * devicePixelRatio];
const needResize = width !== w || height !== h;
if (needResize) {
renderer.setSize(w, h, false);
}
return needResize;
}
- 上面的devicePixelRatio 就是設(shè)備像素密度，是window下的屬性，即window.devicePixelRatio。
- 其實(shí)，有的時(shí)候若不刻意觀察，canvas 有沒(méi)有自適應(yīng)設(shè)備分辨率是很難看出的。
- 因此，若是對(duì)畫(huà)面的渲染質(zhì)量要求不高，可以什么都不做，這樣也能避免canvas 畫(huà)布像素尺寸變大后降低渲染效率的問(wèn)題
文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-682042.html
文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-682042.html
到了這里，關(guān)于three.js(六)：自適應(yīng)設(shè)備分辨率的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
