在LayaAirIDE3中如何使用mathjax显示数学符号

安装mathjax

在LayaAirIDE的项目目录，运行npm init -y来创建环境

npm init -y

修改入口文件

在node_modules/mathjax/ 下面建立一个index.js文件

// @ts-nocheck
// mathJax全局配置文件
globalThis.MathJax = {
  tex: {
    inlineMath: [
      ["$", "$"],
      ["\\(", "\\)"],
    ], // 行内公式选择符
    displayMath: [
      ["$$", "$$"],
      ["\\[", "\\]"],
    ], // 段内公式选择符
  },
  startup: {
    ready() {
      MathJax.startup.defaultReady();
    },
  },
  SVG: {
    scale: 120
  },
};

创建工具文件latexTool.ts

import "mathjax/index.js"; // 必须在引入mathjax前引入mathjax的配置文件
import "mathjax/es5/tex-svg"; // 使用 tex-svg

export default class MjTools {
  static div: HTMLDivElement;

  static AddLatexInSprite(sprite: Laya.Sprite, latex: string) {
    if (!MjTools.div) {
      let doc: Document = Laya.Browser.document;
      MjTools.div = doc.createElement("div");
      doc.body.appendChild(MjTools.div);
    }

    let options = Laya.Browser.window.MathJax.getMetricsFor(MjTools.div, true);
    let html: HTMLElement = Laya.Browser.window.MathJax.tex2svg(latex, options);
    
    // Laya.Browser.window.MathJax.typeset();
   

    var data: string =
      "data:image/svg+xml," +
      html.firstElementChild.outerHTML
        .replace(/"/g, "'")
        .replace(/%/g, "%25")
        .replace(/#/g, "%23")
        .replace(/{/g, "%7B")
        .replace(/}/g, "%7D")
        .replace(/</g, "%3C")
        .replace(/>/g, "%3E");

    // var sp: Laya.Sprite = new Laya.Sprite();
    sprite.loadImage(data);
    // Laya.stage.addChild(sp);
    return sprite;
  }
}

测试案例

import MjTools from "./mjTool";



const { regClass, property } = Laya;

@regClass()
export class mathjax_test extends Laya.Script {
   

    @property(String)
    public text: string = "";

    //组件被激活后执行，此时所有节点和组件均已创建完毕，此方法只执行一次
    onAwake(): void {
        let latex:string=String.raw`
        \sqrt{x^2+1-y^3}
        `;
        let sprite:Laya.Sprite=new Laya.Sprite();
        sprite=MjTools.AddLatexInSprite(sprite,latex);
        this.owner.addChild(sprite);
        

    }


   
}