tiny-sdf
Version:
Browser-side SDF font generator
91 lines (75 loc) • 2.27 kB
HTML
<html>
<head>
<title>SDF test</title>
<style>
</style>
</head>
<body>
<canvas id="canvas" width="512" height="512"></canvas>
<script>module = {};</script>
<script src="../index.js"></script>
<script>
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
var width = 512;
var height = 512;
ctx.fillStyle = 'white';
ctx.fillRect(0, 0, 512, 512);
ctx.fillStyle = 'black';
ctx.font = '512px sans-serif';
ctx.textBaseline = 'middle';
ctx.fillText('了', 0, 256);
// ctx.moveTo(width / 2, 200);
// ctx.lineTo(200, height - 200);
// ctx.lineTo(width - 200, height - 200);
// ctx.closePath();
// ctx.strokeStyle = 'black';
// ctx.stroke();
// ctx.arc(width / 2, height / 2, 50, 0, Math.PI * 2, false);
// ctx.fillStyle = 'black';
// ctx.fill();
// ctx.font = '64px serif';
// ctx.fillStyle = 'black';
// ctx.fillText('Hello world', 100, 100);
var imgData = ctx.getImageData(0, 0, width, height);
console.time('sdf total');
console.time('init grids');
var grid1 = new Float32Array(width * height);
var grid2 = new Float32Array(width * height);
for (var i = 0; i < width * height; i++) {
var val = imgData.data[i * 4];
grid1[i] = val === 255 ? 1e20 : val === 0 ? 0 : Math.abs(val / 255 - 0.5);
grid2[i] = val === 0 ? 1e20 : val === 255 ? 0 : Math.abs(val / 255 - 0.5);
}
console.timeEnd('init grids');
console.time('sdf outer pass');
edt(grid1, width, height);
console.timeEnd('sdf outer pass');
console.time('sdf inner pass');
edt(grid2, width, height);
console.timeEnd('sdf inner pass');
console.timeEnd('sdf total');
var result = new Float64Array(width * height);
var max = 0;
for (var i = 0; i < width * height; i++) {
max = Math.max(max, grid2[i]);
}
for (var i = 0; i < width * height; i++) {
result[i] = max + grid1[i] - grid2[i];
}
displayGrid(result);
function displayGrid(grid) {
for (var y = 0; y < height; y++) {
for (var x = 0; x < width; x++) {
var k = y * width + x;
var d = grid[k];
var c = Math.max(Math.min(255, Math.round(d)), 0); //d % 10 < 5 ? 0 : 255
imgData.data[4 * k + 0] = imgData.data[4 * k + 1] = imgData.data[4 * k + 2] = c;
}
}
ctx.putImageData(imgData, 0, 0);
}
</script>
</body>
</html>