Skip to content

Commit

Permalink
fix show glyphs script
Browse files Browse the repository at this point in the history
  • Loading branch information
@alexkolodko
alexkolodko committed Mar 23, 2024
1 parent 12f7369 commit 20bdfc6
Showing 1 changed file with 117 additions and 46 deletions.
163 changes: 117 additions & 46 deletions docs/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -242,55 +242,126 @@ <h1>Альтернативні символи</h1>
}
});

function displayAllGlyphs(font) {
glyphPreview.innerHTML = '';
for (let i = 4; i < font.numGlyphs; i++) {
const glyph = font.glyphs.get(i);
console.log(glyph);
const glyphContainer = document.createElement('div');
glyphContainer.classList.add('glyph-container');

const glyphSpan = document.createElement('span');
glyphSpan.textContent = glyph.unicode ? String.fromCodePoint(glyph.unicode) : ''; // Show Unicode if available, otherwise use 0
glyphSpan.title = `Glyph index: ${i}, Unicode: ${glyph.unicode || 'N/A'}`;
glyphSpan.classList.add('glyph');
glyphContainer.appendChild(glyphSpan);

const glyphName = document.createElement('div');
glyphName.textContent = glyph.name || '';
glyphName.classList.add('glyph-name');
glyphContainer.appendChild(glyphName);

glyphPreview.appendChild(glyphContainer);
}
}
// function displayAllGlyphs(font) {
// glyphPreview.innerHTML = '';

// for (let i = 4; i < font.numGlyphs; i++) {
// const glyph = font.glyphs.get(i);

// const glyphContainer = document.createElement('div');
// glyphContainer.classList.add('glyph-container');

// const glyphPath = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
// glyphPath.classList.add('glyph-path');

// const path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
// path.setAttribute('d', glyph.getPath(100, 0, 0).toPathData());
// path.setAttribute('fill', 'black');
// glyphPath.appendChild(path);

// glyphContainer.appendChild(glyphPath);
// Show glyphs
// function displayAllGlyphs(font) {
// glyphPreview.innerHTML = '';
// for (let i = 4; i < font.numGlyphs; i++) {
// const glyph = font.glyphs.get(i);
// console.log(glyph);
// const glyphContainer = document.createElement('div');
// glyphContainer.classList.add('glyph-container');

// const glyphSpan = document.createElement('span');
// glyphSpan.textContent = glyph.unicodes ? String.fromCodePoint(glyph.unicodes) : ''; // Show Unicode if available, otherwise use 0
// glyphSpan.title = `Glyph index: ${i}, Unicode: ${glyph.unicode || 'N/A'}`;
// glyphSpan.classList.add('glyph');
// glyphContainer.appendChild(glyphSpan);

// const glyphName = document.createElement('div');
// glyphName.textContent = glyph.name || '';
// glyphName.classList.add('glyph-name');
// glyphContainer.appendChild(glyphName);

// glyphPreview.appendChild(glyphContainer);
// }
// }


// Show with canvas
// function displayAllGlyphs(font) {
// glyphPreview.innerHTML = '';
// const canvas = document.createElement('canvas');
// const ctx = canvas.getContext('2d');
// const fontSize = 120; // Set your desired font size
// canvas.width = fontSize*2; // Adjust canvas size according to your requirement
// canvas.height = fontSize*2;

// for (let i = 4; i < font.numGlyphs; i++) {
// const glyph = font.glyphs.get(i);
// console.log(glyph);
// const glyphContainer = document.createElement('div');
// glyphContainer.classList.add('glyph-container');

// // Get glyph path
// const glyphPath = glyph.getPath(fontSize/2, fontSize/2, fontSize);

// // Draw glyph path on canvas
// glyphPath.draw(ctx);

// // Create image element from canvas and append to glyph container
// const glyphImage = document.createElement('img');
// glyphImage.src = canvas.toDataURL();
// glyphImage.title = `Glyph index: ${i}, Unicode: ${glyph.unicode || 'N/A'}`;
// glyphImage.classList.add('glyph');
// glyphContainer.appendChild(glyphImage);

// const glyphName = document.createElement('div');
// glyphName.textContent = glyph.name || '';
// glyphName.classList.add('glyph-name');
// glyphContainer.appendChild(glyphName);

// glyphPreview.appendChild(glyphContainer);

// // Clear canvas for next glyph
// ctx.clearRect(0, 0, canvas.width, canvas.height);
// }
// }

function displayAllGlyphs(font) {
glyphPreview.innerHTML = '';
const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');
const fontSize = 72; // Set your desired font size
const padding = 10; // Padding around the glyph
canvas.width = fontSize + 2 * padding;
canvas.height = fontSize + 2 * padding;

for (let i = 4; i < font.numGlyphs; i++) {
const glyph = font.glyphs.get(i);
console.log(glyph);
const glyphContainer = document.createElement('div');
glyphContainer.classList.add('glyph-container');

// Get glyph path
const glyphPath = glyph.getPath(0, 0, fontSize);

// Get bounding box of the glyph path
const bounds = glyphPath.getBoundingBox();

// Calculate horizontal offset to center the glyph path on the canvas
const offsetX = (canvas.width - (bounds.x2 - bounds.x1)) / 2 - bounds.x1;
const offsetY = fontSize*0.9;

// Clear canvas
ctx.clearRect(0, 0, canvas.width, canvas.height);

// Translate context horizontally to center the glyph
ctx.translate(offsetX, offsetY);

// Draw glyph path on canvas
glyphPath.draw(ctx);

// Reset transformation
ctx.setTransform(1, 0, 0, 1, 0, 0);

// Create image element from canvas and append to glyph container
const glyphImage = document.createElement('img');
glyphImage.src = canvas.toDataURL();
glyphImage.title = `Glyph index: ${i}, Unicode: ${glyph.unicode || 'N/A'}`;
glyphImage.classList.add('glyph');
glyphContainer.appendChild(glyphImage);

const glyphName = document.createElement('div');
glyphName.textContent = glyph.name || '';
glyphName.classList.add('glyph-name');
glyphContainer.appendChild(glyphName);

glyphPreview.appendChild(glyphContainer);
}
}

// const glyphName = document.createElement('div');
// glyphName.textContent = glyph.name || '';
// glyphName.classList.add('glyph-name');
// glyphContainer.appendChild(glyphName);

// glyphPreview.appendChild(glyphContainer);
// }
// }
</script>


Expand Down

0 comments on commit 20bdfc6

Please sign in to comment.