Markk116/px-icon
1
0
Fork 0
Code Issues Pull Requests Actions Packages Releases 2 Activity

take aspect ratio into account when rasterizing

Browse Source
This commit is contained in:
Markk116
2026-08-08 21:19:25 +02:00
parent 0c2785ca3b
commit 5a7dfcc019
1 changed files with 12 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files
px-icon.js
+12 -9
View File
@@ -192,10 +192,12 @@ class PxIcon extends HTMLElement {
const apSize = parseFloat(cs.getPropertyValue('--pxicon-ap-size')) || DEFAULT_AP_SIZE;
const mode = (cs.getPropertyValue('--pxicon-mode') || DEFAULT_MODE).trim();
const displaySize = Math.max(this.clientWidth, this.clientHeight) || 24;
const snapped = snapToGrid(displaySize, apSize);
const gridW = Math.max(1, Math.round(snapped / apSize));
const gridH = gridW;
const displayW = this.clientWidth || 24;
const displayH = this.clientHeight || 24;
const snappedW = snapToGrid(displayW, apSize);
const snappedH = snapToGrid(displayH, apSize);
const gridW = Math.max(1, Math.round(snappedW / apSize));
const gridH = Math.max(1, Math.round(snappedH / apSize));
const svgMarkup = svgEl.outerHTML;
const key = `${svgMarkup}|${mode}|${gridW}x${gridH}`;
@@ -211,13 +213,14 @@ class PxIcon extends HTMLElement {
const gridCanvas = await getGridRaster(svgMarkup, mode, gridW, gridH);
const dpr = window.devicePixelRatio || 1;
const backingSize = Math.round(snapped * dpr);
this._canvas.width = backingSize;
this._canvas.height = backingSize;
const backingW = Math.round(snappedW * dpr);
const backingH = Math.round(snappedH * dpr);
this._canvas.width = backingW;
this._canvas.height = backingH;
const ctx = this._canvas.getContext('2d');
ctx.imageSmoothingEnabled = false;
ctx.clearRect(0, 0, backingSize, backingSize);
ctx.drawImage(gridCanvas, 0, 0, backingSize, backingSize);
ctx.clearRect(0, 0, backingW, backingH);
ctx.drawImage(gridCanvas, 0, 0, backingW, backingH);
if (this._slot.isConnected) {
// first successful raster: swap the placeholder slot for the