font measures with svg approach

0xfe · Jan 8, 2022 · 463d4d3 · 463d4d3
1 parent 84fb9c6
commit 463d4d3
Show file tree

Hide file tree

Showing 5 changed files with 11 additions and 5 deletions.
diff --git a/src/canvascontext.ts b/src/canvascontext.ts
@@ -258,9 +258,12 @@ export class CanvasContext extends RenderContext {
 
   measureText(text: string): TextMeasure {
     const metrics = this.context2D.measureText(text);
+    // Return x, y, width & height in the same manner as svg getBBox
     return {
+      x: 0,
+      y: -metrics.fontBoundingBoxAscent,
       width: metrics.width,
-      height: metrics.actualBoundingBoxAscent + metrics.actualBoundingBoxDescent,
+      height: metrics.fontBoundingBoxDescent + metrics.fontBoundingBoxAscent,
     };
   }
 

diff --git a/src/rendercontext.ts b/src/rendercontext.ts
@@ -4,6 +4,8 @@
 import { FontInfo } from './font';
 
 export interface TextMeasure {
+  x: number;
+  y: number;
   width: number;
   height: number;
 }

diff --git a/src/stavesection.ts b/src/stavesection.ts
@@ -69,7 +69,7 @@ export class StaveSection extends StaveModifier {
     const x = this.x + shift_x;
     ctx.beginPath();
     ctx.setLineWidth(rectWidth);
-    ctx.rect(x, y - height + paddingY, width, height);
+    ctx.rect(x, y + textMeasurements.y - paddingY, width, height);
     ctx.stroke();
     ctx.fillText(this.section, x + paddingX, y);
     ctx.restore();

diff --git a/src/svgcontext.ts b/src/svgcontext.ts
@@ -91,7 +91,7 @@ class MeasureTextCache {
     const bbox = txt.getBBox();
     svg.removeChild(txt);
 
-    return { width: bbox.width, height: bbox.height };
+    return { x: bbox.x, y: bbox.y, width: bbox.width, height: bbox.height };
   }
 }
 

diff --git a/tests/stave_tests.ts b/tests/stave_tests.ts
@@ -33,6 +33,7 @@ const StaveTests = {
     run('Stave Draw Test', draw);
     run('Open Stave Draw Test', drawOpenStave);
     run('Multiple Stave Barline Test', drawMultipleMeasures);
+    run('Multiple Stave Barline Test (14pt Section)', drawMultipleMeasures, { fontSize: 14 });
     run('Multiple Stave Repeats Test', drawRepeats);
     run('Stave End Modifiers Test', drawEndModifiers);
     run('Multiple Staves Volta Test', drawVolta);
@@ -147,7 +148,7 @@ function drawMultipleMeasures(options: TestOptions, contextBuilder: ContextBuild
   const staveBar1 = new Stave(10, 50, 200);
   staveBar1.setBegBarType(BarlineType.REPEAT_BEGIN);
   staveBar1.setEndBarType(BarlineType.DOUBLE);
-  staveBar1.setSection('A', 0);
+  staveBar1.setSection('A', 0, 0, options.params?.fontSize);
   staveBar1.addClef('treble').setContext(ctx).draw();
   const notesBar1 = [
     new StaveNote({ keys: ['c/4'], duration: 'q' }),
@@ -161,7 +162,7 @@ function drawMultipleMeasures(options: TestOptions, contextBuilder: ContextBuild
 
   // bar 2 - juxtaposing second bar next to first bar
   const staveBar2 = new Stave(staveBar1.getWidth() + staveBar1.getX(), staveBar1.getY(), 300);
-  staveBar2.setSection('B', 0);
+  staveBar2.setSection('B', 0, 0, options.params?.fontSize);
   staveBar2.setEndBarType(BarlineType.END);
   staveBar2.setContext(ctx).draw();