Absulit / Absulit/points

Support for high density monitors with devicePixelRatio

Đang mở
#306 0 bình luận 0 reaction 1 người được giao Được @Absulit nhận Xem trên GitHub
enhancement
Ngôn ngữ chính
JavaScript
Star
56
Fork
5
Merge trung bình
2 phút
Pull request đã merge (30 ngày)
1

Mô tả

This is related to #299

Required for high density monitors and the HTML in Canvas to not look blurry, it needs to support the device pixel ratio

```js

const observer = new ResizeObserver(this.#resizeCanvasToFitWindow);

const supportsDevicePixelContentBox =
typeof ResizeObserverEntry !== 'undefined' &&
'devicePixelContentBoxSize' in ResizeObserverEntry.prototype;
const options = supportsDevicePixelContentBox ? { box: 'device-pixel-content-box', signal } : { signal };
observer.observe(this.#canvas, options);

#resizeCanvasToFitWindow = (entries) => {
// there are some calls of this function that do not have entries
// because of this, clientWidth and clientHeight values are used
const entry = entries?.[0];

this.#screenResized = true;
if (this.#fitWindow) {
const width = entry?.contentRect?.width || this.#canvas.clientWidth;
const height = entry?.contentRect?.height || this.#canvas.clientHeight;
const dpc = entry?.devicePixelContentBoxSize;
this.#canvas.width = dpc ? dpc[0].inlineSize : Math.round(width * window.devicePixelRatio);
this.#canvas.height = dpc ? dpc[0].blockSize : Math.round(height * window.devicePixelRatio);
this.#setScreenSize();
this.#frame()
}
}
```

Hướng dẫn đóng góp

Chưa lập chỉ mục được hướng dẫn đóng góp cho kho mã nguồn này

Đánh giá

Issue này chưa được đánh giá.

Nhận issue mới trong hộp thư của bạn

Bản tóm tắt ngắn những issue GitHub phù hợp với người mới.