Die Methode zur Berechnung der Breite und Höhe von Text auf der Leinwand

Canvas verfügt über die Textmethode „measureText“, um die im TextMetrics-Objekt enthaltenen Textinformationen abzurufen. Über TextMetrics können wir den Breitenwert des Textes direkt ermitteln, den Höhenwert jedoch nicht direkt.

一、TextMetrics

TextMetrics.width  schreibgeschützt

Double-  Typ, die Breite der Inline-Zeichenfolge in CSS-Pixeln. Basierend auf aktuellen Überlegungen zur Kontextschriftart.

TextMetrics.actualBoundingBoxLeft (en-US)  schreibgeschützt

Double-  Typ, parallel zur Grundlinie, der Abstand vom  Ausrichtungspunkt, der durch die CanvasRenderingContext2D.textAlign -Eigenschaft bestimmt wird , zur linken Seite der Textrechtecksgrenze , berechnet mit CSS-Pixeln; ein positiver Wert gibt an, dass die linke Seite der Textrechtecksgrenze ist auf der linken Seite des Ausrichtungspunkts.

TextMetrics.actualBoundingBoxRight (en-US)  schreibgeschützt

Double-  Typ, parallel zur Grundlinie, der Abstand vom  Ausrichtungspunkt, der durch die CanvasRenderingContext2D.textAlign -Eigenschaft bestimmt wird, zur rechten Seite des Randes des Textrechtecks , berechnet in CSS-Pixeln.

TextMetrics.fontBoundingBoxAscent (en-US)  verfügbar

Double-  Typ, der Abstand von  der horizontalen Linie, die durch die CanvasRenderingContext2D.textBaseline -Eigenschaft angegeben wird, bis zum oberen Rand des höchsten Rands des Rechtecks ​​aller Schriftarten, die zum Rendern des Texts verwendet werden , berechnet in CSS-Pixeln.

TextMetrics.fontBoundingBoxDescent (en-US)  verfügbar

Double- Typ, der Abstand  von  der horizontalen Linie, die durch die CanvasRenderingContext2D.textBaseline -Eigenschaft angegeben wird, zur untersten Rechteckgrenze aller Schriftarten , die zum Rendern des Texts verwendet werden, berechnet anhand von CSS-Pixeln.

TextMetrics.actualBoundingBoxAscent (en-US)  schreibgeschützt

Double-  Typ, der Abstand von  der horizontalen Linie, die durch die CanvasRenderingContext2D.textBaseline -Eigenschaft angegeben wird, zum oberen Rand des Rechtecks, das den gerenderten Text begrenzt, berechnet in CSS-Pixeln.

TextMetrics.actualBoundingBoxDescent (en-US)  schreibgeschützt

Double-  Typ, der Abstand von  der horizontalen Linie, die durch die CanvasRenderingContext2D.textBaseline -Eigenschaft angegeben wird, zum unteren Rand des Rechtecks, das den gerenderten Text begrenzt, berechnet in CSS-Pixeln.

Referenz: https://developer.mozilla.org/zh-CN/docs/Web/API/TextMetrics

Zweitens berechnen Sie die Breite und Höhe

<canvas id="canvas" width="550" height="500"></canvas>

 1. Messen Sie die Textbreite

 Beim Messen der horizontalen Breite eines Textstücks kann die Summe größer sein als die Breite des Inline-Felds ( ) , da schräge/kursive Buchstaben dazu führen, dass die Zeichen breiter als vorgesehen sind  actualBoundingBoxLeft . actualBoundingBoxRightwidth

Daher ist die Berechnung  actualBoundingBoxLeft der  actualBoundingBoxRight Summe der Summe eine genauere Möglichkeit, die absolute Breite des Textes zu ermitteln:

const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");
const text = "Abcdefghijklmnop";
ctx.font = "italic 50px serif";

const textMetrics = ctx.measureText(text);

console.log(textMetrics.width);
// 459.8833312988281

console.log(
  textMetrics.actualBoundingBoxRight + textMetrics.actualBoundingBoxLeft,
);
// 462.8833333333333

2. Messen Sie die Texthöhe

const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");
const text = "Abcdefghijklmnop";
ctx.font = "italic 50px serif";

const textMetrics = ctx.measureText(text);

// 所有字在这个字体下的高度
let fontHeight = textMetrics.fontBoundingBoxAscent + textMetrics.fontBoundingBoxDescent; 

// 当前文本字符串在这个字体下用的实际高度
let actualHeight = textMetrics.actualBoundingBoxAscent + textMetrics.actualBoundingBoxDescent; 

3. Beispielanwendung

1. Implementieren Sie mehrzeiligen Text im Canvas

// canvas多行文本

; (function (global) {
  "use strict";

  /**
   * 
   * @param {*} showStroke 是否显示描边
   * @param {*} text 文本
   * @param {*} x 中心点x坐标
   * @param {*} y 中心点y坐标
   * @param {*} maxWidth 最大宽度
   * @param {*} lineHeight 行高
   * @returns 
   */
  global.CanvasRenderingContext2D.prototype.wrapText = function (showStroke, text, x, y, maxWidth, lineHeight) {
    if (typeof text != 'string' || typeof x != 'number' || typeof y != 'number') {
      return;
    }

    var context = this;
    var canvas = context.canvas;

    if (typeof maxWidth == 'undefined') {
      maxWidth = (canvas && canvas.width) || 300;
    }
    
    if (typeof lineHeight == 'undefined') {
      lineHeight = (canvas && parseInt(window.getComputedStyle(canvas).lineHeight)) || parseInt(window.getComputedStyle(document.body).lineHeight);
    }

    // 字符分隔为数组
    var arrText = text.split('');
    var line = '';

    for (let n = 0; n < arrText.length; n++) {

      let testLine = line;
     
      // 换行符
      if(arrText[n] === '\n') {
        showStroke && context.strokeText(line, x, y);
        context.fillText(line, x, y);

        line = '';
        y += lineHeight; // 行高
      } else {
        testLine = line + arrText[n];
        let metrics = context.measureText(testLine, context.font);
        // 计算文本宽度
        let testWidth = metrics.actualBoundingBoxRight + metrics.actualBoundingBoxLeft;

        if (testWidth > maxWidth && n > 0) {
          
          showStroke && context.strokeText(line, x, y);
          context.fillText(line, x, y);

          line = arrText[n];
          y += lineHeight;
        } else {
          line = testLine;
        }
      }
    }
    showStroke && context.strokeText(line, x, y);
    context.fillText(line, x, y);
  };

})(window);

this.ctx.wrapText(true, '文本', 20, 20, 100, 20)

 

2. HTML-Tags berechnen Textbreite und -höhe

Hinweis: Die Mindestschriftgröße darf nur 12 Pixel betragen

/*
 * html计算文本宽高
 */
; (function (global) {
  "use strict";
 
  global.TextNode = function () {
 
    /**
   * 
   * @param {*} text 文本
   * @param {*} font 字体样式
   * @param {*} width 标签宽度
   * @param {*} height 标签高度
   * @returns 
   */
    const _getTextWH = function (text, font, width, height) {
      const $span = global.document.createElement("span");
      $span.innerHTML = text

      // const spanTextNode = global.document.createTextNode(text);
      // $span.appendChild(spanTextNode);
      $span.setAttribute("style", `font: ${font}; white-space: pre-wrap; position: fixed; top: 0; left: 0; display: block; line-height: 1; width: ${width ? width : 'auto'}; height: ${height ? height : 'auto'}`);
 
 
      const $body = global.document.getElementsByTagName("body")[0];
      $body.appendChild($span);

      const spanRect = $span.getBoundingClientRect();
 
      $body.removeChild($span);

      // console.log(spanRect.width, spanRect.height)
 
      return {
        width: spanRect.width,
        height: spanRect.height
      }

    }.bind(this);
 
    let _txt = _getTextWH(...arguments);
    
    // console.log('_txt', _txt)

    return {
      width: _txt.width,
      height: _txt.height
    };
  };
 
})(window);

let _txt = TextNode('智能字幕', `${data.fontSize}px ${data.fontFamily}`)