babylon.js实现文本间距效果

在babylon.js中，如果使用TextBlock时，想给文字加间距，官方没有这个属性去进行间距设置，需要自己手动写js代码去实现这个效果。

一、先来看一下默认间距和设置间距后的效果：

文本默认间距：

设置完文本间距后的效果：

这里有两种实现方式：
第一种当然是选择使用空格，但是不好把控精确
第二种是使用代码实现，可以设置精确的间距值，下面贴出实现代码

二、代码实现

封装：

class TextBlockExtra extends BABYLON.GUI.TextBlock{
  _letterSpacing = 0;
  set letterSpacingInPixels(value) {
    this._letterSpacing = value;
    this.markAllAsDirty();
  }
  get letterSpacingInPixels() {
    return this._letterSpacing;
  }

  textWithSpacing(
    context,
    text,
    x,
    y,
    spacing
  ) {
    const total_width =
      context.measureText(text).width + spacing * (text.length - 1);
    const align = context.textAlign;
    context.textAlign = "left";

    switch (align) {
      case "right":
        x -= total_width;
        break;
      case "center":
        x -= total_width / 2;
        break;
    }

    let offset,
      pair_width,
      char_width,
      char_next_width,
      pair_spacing,
      char,
      char_next;

    for (offset = 0; offset < text.length; offset = offset + 1) {
      char = text.charAt(offset);
      pair_spacing = 0;
      if (offset + 1 < text.length) {
        char_next = text.charAt(offset + 1);
        pair_width = context.measureText(char + char_next).width;
        char_width = context.measureText(char).width;
        char_next_width = context.measureText(char_next).width;
        pair_spacing = pair_width - char_width - char_next_width;
      }

      if (this.outlineWidth) {
        context.strokeText(char, x, y);
      }
      context.fillText(char, x, y);
      x = x + char_width + pair_spacing + spacing;
    }

    context.textAlign = align;
  }

_drawText(
    text,
    textWidth,
    y,
    context
  ) {
    var width = this._currentMeasure.width;
    var x = 0;
    switch (this._textHorizontalAlignment) {
      case BABYLON.GUI.Control.HORIZONTAL_ALIGNMENT_LEFT:
        x = 0;
        break;
      case BABYLON.GUI.Control.HORIZONTAL_ALIGNMENT_RIGHT:
        x = width - textWidth;
        break;
      case BABYLON.GUI.Control.HORIZONTAL_ALIGNMENT_CENTER:
        x = (width - textWidth) / 2;
        break;
    }

    if (this.shadowBlur || this.shadowOffsetX || this.shadowOffsetY) {
      context.shadowColor = this.shadowColor;
      context.shadowBlur = this.shadowBlur;
      context.shadowOffsetX = this.shadowOffsetX;
      context.shadowOffsetY = this.shadowOffsetY;
    }

    if (this._letterSpacing !== 0) {
        switch(this._textHorizontalAlignment){
            case BABYLON.GUI.Control.HORIZONTAL_ALIGNMENT_CENTER:
                x -= text.length * this._letterSpacing * 0.5;
            break;
            case BABYLON.GUI.Control.HORIZONTAL_ALIGNMENT_RIGHT:
                x -= text.length * this._letterSpacing;
            break;
        } 
        this.textWithSpacing(
            context,
            this.text,
            this._currentMeasure.left + x,
            y,
            this._letterSpacing
        )
    }else{
        if(this.outlineWidth){
            context.strokeText(text, this._currentMeasure.left + x, y);
        }
        context.fillText(text, this._currentMeasure.left + x, y);
    }

    if (this.underline) {
      context.beginPath();
      context.lineWidth = Math.round(this.fontSizeInPixels * 0.05);
      context.moveTo(this._currentMeasure.left + x, y + 3);
      context.lineTo(this._currentMeasure.left + x + textWidth, y + 3);
      context.stroke();
      context.closePath();
    }

    if (this.lineThrough) {
      context.beginPath();
      context.lineWidth = Math.round(this.fontSizeInPixels * 0.05);
      context.moveTo(
        this._currentMeasure.left + x,
        y - this.fontSizeInPixels / 3
      );
      context.lineTo(
        this._currentMeasure.left + x + textWidth,
        y - this.fontSizeInPixels / 3
      );
      context.stroke();
      context.closePath();
    }
  }
}

使用：

    var promptText = new TextBlockExtra();
    promptText.text = "码到成功";
    promptText.color = "white";
    promptText.fontSize = 40;
    // 字体间距
    promptText.letterSpacingInPixels =40
    advancedTexture.addControl(promptText);

然后就可以正常使用了~