Merge pull request #265 from doodlewind/text

measureText
Brooooooklyn · Jul 27, 2021 · a051192 · a051192
2 parents 70fd049 + 1891d76
commit a051192
Show file tree

Hide file tree

Showing 18 changed files with 757 additions and 377 deletions.
diff --git a/__test__/draw.spec.ts b/__test__/draw.spec.ts
@@ -496,7 +496,13 @@ test('lineTo', async (t) => {
   await snapshotImage(t)
 })
 
-test.todo('measureText')
+test('measureText', (t) => {
+  const { ctx } = t.context
+  ctx.font = '50px Iosevka Slab'
+  const metrics = ctx.measureText('@napi-rs/canvas')
+  t.is(metrics.actualBoundingBoxLeft, -3)
+  t.true(Math.abs(metrics.actualBoundingBoxRight - 372) < 0.001)
+})
 
 test('moveTo', async (t) => {
   const { ctx } = t.context

diff --git a/example/.gitignore b/example/.gitignore
@@ -0,0 +1,2 @@
+draw-text.png
+draw-text-with-baseline.png
diff --git a/example/draw-text-with-baseline.js b/example/draw-text-with-baseline.js
@@ -0,0 +1,36 @@
+const { readFileSync, writeFileSync } = require('fs')
+const { join } = require('path')
+
+const { createCanvas, GlobalFonts } = require('../index.js')
+
+const fontPath = join(__dirname, '..', '__test__', 'fonts', 'iosevka-slab-regular.ttf')
+const fontData = readFileSync(fontPath)
+
+console.info(GlobalFonts.families)
+
+GlobalFonts.register(fontData)
+
+console.info(GlobalFonts.families)
+
+const canvas = createCanvas(1024, 768)
+const ctx = canvas.getContext('2d')
+ctx.fillStyle = 'yellow'
+ctx.fillRect(0, 0, canvas.width, canvas.height)
+const baselines = ['top', 'hanging', 'middle', 'alphabetic', 'ideographic', 'bottom']
+ctx.font = '36px Iosevka Slab'
+ctx.strokeStyle = 'red'
+ctx.fillStyle = 'black'
+
+baselines.forEach(function (baseline, index) {
+  ctx.textBaseline = baseline
+  const y = 75 + index * 75
+  ctx.beginPath()
+  ctx.moveTo(0, y + 0.5)
+  ctx.lineTo(550, y + 0.5)
+  ctx.stroke()
+  ctx.fillText('Abcdefghijklmnop (' + baseline + ')', 0, y)
+})
+
+const b = canvas.toBuffer('image/png')
+
+writeFileSync(join(__dirname, 'draw-text-with-baseline.png'), b)
diff --git a/draw-text.js → example/draw-text.js b/draw-text.js → example/draw-text.js
@@ -1,9 +1,9 @@
 const { readFileSync, writeFileSync } = require('fs')
 const { join } = require('path')
 
-const { createCanvas, GlobalFonts } = require('./index.js')
+const { createCanvas, GlobalFonts } = require('../index.js')
 
-const fontPath = join(__dirname, '__test__', 'fonts', 'iosevka-slab-regular.ttf')
+const fontPath = join(__dirname, '..', '__test__', 'fonts', 'iosevka-slab-regular.ttf')
 const fontData = readFileSync(fontPath)
 
 console.info(GlobalFonts.families)
@@ -12,7 +12,7 @@ GlobalFonts.register(fontData)
 
 console.info(GlobalFonts.families)
 
-const canvas = createCanvas(512, 512)
+const canvas = createCanvas(1024, 768)
 const ctx = canvas.getContext('2d')
 ctx.fillStyle = 'yellow'
 ctx.fillRect(0, 0, canvas.width, canvas.height)
@@ -35,6 +35,6 @@ gradient.addColorStop(1, 'blue')
 ctx.strokeStyle = gradient
 ctx.strokeText('@napi-rs/canvas', 50, 300)
 
-const b = canvas.toBuffer()
+const b = canvas.toBuffer('image/png')
 
-writeFileSync(join(__dirname, 'skr-canvas.png'), b)
+writeFileSync(join(__dirname, 'draw-text.png'), b)
diff --git a/example/measure-text.js b/example/measure-text.js
@@ -0,0 +1,21 @@
+const { join } = require('path')
+
+const { createCanvas, GlobalFonts } = require('../index.js')
+
+const fontPath = join(__dirname, '..', '__test__', 'fonts', 'iosevka-slab-regular.ttf')
+
+GlobalFonts.registerFromPath(fontPath)
+
+const canvas = createCanvas(1024, 768)
+const ctx = canvas.getContext('2d')
+
+ctx.font = '50px Iosevka Slab'
+ctx.lineWidth = 3
+
+const baselines = ['top', 'hanging', 'middle', 'alphabetic', 'ideographic', 'bottom']
+
+baselines.forEach(function (baseline) {
+  ctx.textBaseline = baseline
+  const metrics = ctx.measureText('@napi-rs/canvas')
+  console.info(baseline, metrics)
+})
diff --git a/index.d.ts b/index.d.ts
@@ -303,6 +303,7 @@ interface IGlobalFonts {
   // absolute path
   registerFromPath(path: string): boolean
   has(name: string): boolean
+  loadSystemFonts(): number
 }
 
 export const GlobalFonts: IGlobalFonts

diff --git a/index.html b/index.html
@@ -9,15 +9,72 @@
 </head>
 
 <body>
+  <style type="text/css">
+    @font-face {
+      font-family: "Iosevka Slab";
+      src: url("/__test__/fonts/iosevka-slab-regular.ttf");
+    }
+
+    body {
+      font-family: "Iosevka Slab"
+    }
+
+    canvas {
+      margin-top: 100px;
+    }
+  </style>
   <canvas width="1024" height="768" id="canvas"></canvas>
+  <canvas width="1024" height="768" id="canvas-text"></canvas>
 
   <script>
-    const canvas = document.getElementById('canvas');
-    const ctx = canvas.getContext('2d');
-    ctx.font = '50px serif';
-    ctx.fillText('Hello world', 50, 90, 140);
+    setTimeout(() => {
+      const canvas = document.getElementById('canvas')
+      /**
+       * @type {CanvasRenderingContext2D}
+       */
+      const ctx = canvas.getContext('2d')
+      ctx.fillStyle = 'yellow'
+      ctx.fillRect(0, 0, canvas.width, canvas.height)
+      ctx.strokeStyle = 'black'
+      ctx.lineWidth = 3
+      ctx.font = '50px Iosevka Slab'
+
+      const baselines = ['top', 'hanging', 'middle', 'alphabetic', 'ideographic', 'bottom']
+
+      baselines.forEach(function (baseline) {
+        ctx.textBaseline = baseline
+        const metrics = ctx.measureText('@napi-rs/canvas')
+        console.info(baseline, metrics)
+      })
+
+      ctx.strokeText('skr canvas', 50, 150)
+      ctx.strokeText('@napi-rs/canvas', 50, 300)
+    }, 300)
+
+    setTimeout(() => {
+      const canvas = document.getElementById('canvas-text')
+      /**
+       * @type {CanvasRenderingContext2D}
+       */
+      const ctx = canvas.getContext('2d')
+      ctx.fillStyle = 'yellow'
+      ctx.fillRect(0, 0, canvas.width, canvas.height)
+      const baselines = ['top', 'hanging', 'middle', 'alphabetic', 'ideographic', 'bottom']
+      ctx.font = '36px Iosevka Slab'
+      ctx.strokeStyle = 'red'
+      ctx.fillStyle = 'black'
+
+      baselines.forEach(function (baseline, index) {
+        ctx.textBaseline = baseline
+        const y = 75 + index * 75
+        ctx.beginPath()
+        ctx.moveTo(0, y + 0.5)
+        ctx.lineTo(550, y + 0.5)
+        ctx.stroke()
+        ctx.fillText('Abcdefghijklmnop (' + baseline + ')', 0, y)
+      })
+    }, 300)
 
-    ctx.fillText('Hello world', 250, 90);
   </script>
 </body>
 

diff --git a/index.js b/index.js
@@ -167,6 +167,10 @@ function createCanvas(width, height) {
   return canvasElement
 }
 
+if (!process.env.DISABLE_SYSTEM_FONTS_LOAD) {
+  GlobalFontsSingleton.loadSystemFonts()
+}
+
 module.exports = {
   createCanvas,
   Path2D,