HarmonyOS 鸿蒙Next数学公式

HarmonyOS 鸿蒙Next数学公式 如何在应用中加载数学公式呢？

3 回复

HarmonyOS目前没有提供专门的数学公式渲染组件，可以使用WebView组件来加载支持数学公式渲染的网页。

Web代码示例代码如下：

import { webview } from '@kit.ArkWeb';

@Component
export struct CourseLearning {
  private webviewController: webview.WebviewController = new webview.WebviewController();

  build() {
    Column() {
      Web({ src: $rawfile('course_learning/index.html'), controller: this.webviewController })
        .domStorageAccess(true)
        .javaScriptAccess(true)
    }
  }
}

方案一：使用KaTeX渲染数学公式的html代码如下：

<!--index.html-->
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>数学公式</title>
    <!-- 使用 KaTeX 渲染数学公式 -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.16.9/dist/katex.min.css">
    <script defer src="https://cdn.jsdelivr.net/npm/katex@0.16.9/dist/katex.min.js"></script>
    <script defer src="https://cdn.jsdelivr.net/npm/katex@0.16.9/dist/contrib/auto-render.min.js"></script>
    <style>
        body { padding: 20px; font-size: 18px; }
        .math { margin: 15px 0; }
    </style>
</head>
<body>
<h2>数学公式示例</h2>

<div class="math">勾股定理: \( a^2 + b^2 = c^2 \)</div>
<div class="math">二次方程: \[ x = \frac{-b \pm \sqrt{b^2 - 4ac}}{2a} \]</div>

<script>
    document.addEventListener("DOMContentLoaded", function() {
        renderMathInElement(document.body, {
            delimiters: [
                {left: "\\(", right: "\\)", display: false},
                {left: "\\[", right: "\\]", display: true}
            ]
        });
    });
</script>
</body>
</html>

方案二：使用MathJax.js渲染公式，并将个别符号修改成特殊颜色的示例代码如下：

<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8" />
  <title >MathJax 颜色公式示例</title>
  <meta name="viewport" content="initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no">
  <!-- 加载 MathJax CDN -->
  <script src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>
  <style>
      body {
        font-family: Arial, sans-serif;
        margin: 40px;
        line-height: 1.6;
      }
      .formula {
        background-color: #f4f4f4;
        padding: 10px;
        border-radius: 5px;
        margin: 10px 0;
        text-align: center;
      }
  </style>
</head>
<body>
<h3>MathJax 使用 \color 改变变量颜色</h3>
<p>用法：`\color{颜色名}{变量}`，例如：<code>\color{red}{x}</code></p>
<div class="formula">
  <!-- 某个符号变绿色 -->
  $$
  \color{black}{x}^2 \color{red}{+} \color{black}{y}^2 = r^2
  $$
</div>

<div class="formula">
  <!-- 混合颜色 + 文字 -->
  $$
  \text{当 } \color{purple}{a > 0} \text{ 时，方程有两个实根。}
  $$
</div>

<div class="formula">
  <!-- 更多颜色支持（CSS 颜色名或十六进制） -->
  $$
  \color{orange}{\sin \theta} + \color{#FF69B4}{\cos \theta} = \color{darkgreen}{1}
  $$
</div>

<div class="formula">
  <!-- 只改变一个符号的颜色 -->
  $$
  \sum_{i=1}^{n} \color{yellow}{a_i} = \frac{n(n+1)}{2}
  $$
</div>
</body>
</html>

三方库formula中的latexStringToImage接口可将LaTeX转换为ArrayBuffer，在经过image转换成PixelMap后进行展示。 示例代码（示例中三方库版本为1.0.0，使用其他版本注意接口传参不同）：

import { LatexMathColorFormat, latexStringToImage } from '@cangjie-tpc/formula';
import { image } from '@kit.ImageKit';

@Entry
@Component
struct Index {
  str: string = "(a \\pm b)^2 = a^2 \\pm 2ab + b^2"
  @State pixelMap: image.PixelMap = undefined!;

  build() {
    Scroll() {
      Column() {
        Button("展示公式")
          .margin({left:5, top:10})
          .onClick(() => {
            this.getLatexImage()
          })
        Image(this.pixelMap)
          .objectFit(ImageFit.Contain)
          .width("80%")
          .margin({ left: 10, top: 10, bottom: 10 })
      }
      .width('100%')
      .alignItems(HorizontalAlign.Start)
    }
    .scrollBar(BarState.Off)
  }

  async getLatexImage(): Promise<void> {
    // 通过接口解析数学公式获取数学公式图片数组数据
    let buf: ArrayBuffer = await latexStringToImage(this.str, this.str.length, 200, 0xFF0000FF, 0xFFFFFFFF,
      LatexMathColorFormat.COLOR_FORMAT_BGRA_8888)
    let imageSource = image.createImageSource(buf)
    // 图片pixelMap
    this.pixelMap = imageSource.createPixelMapSync()
  }
}

更多关于HarmonyOS 鸿蒙Next数学公式的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


HarmonyOS Next数学公式支持通过Math组件实现LaTeX语法渲染。开发者可在ArkTS中使用Math接口解析标准LaTeX数学表达式，支持分数、积分、矩阵等复杂公式。系统内置数学符号库，无需额外引入Java/C依赖。公式渲染基于声明式UI开发范式，可通过属性方法调整字体大小和颜色。目前支持行内公式与独立公式两种布局模式。

在HarmonyOS Next应用中加载数学公式，推荐使用以下方案：

  1. Web组件渲染
    将数学公式（LaTeX格式）通过MathJax或KaTeX库在Web页面中渲染，再通过Web组件嵌入应用。

    // 示例：加载包含MathJax的HTML页面
[@Entry](/user/Entry)
[@Component](/user/Component)
struct FormulaPage {
  build() {
    Column() {
      Web({ src: $rawfile('math_formula.html') })
        .width('100%')
        .height('100%')
    }
  }
}

  2. Canvas绘制
    对于简单公式，可通过Canvas组件结合路径绘制API手动实现基础符号（如分数、根号等），适合固定公式的静态展示。

  3. 自定义组件封装
    封装第三方C++数学库（如通过Native API调用），实现高性能公式解析与渲染，适用于复杂场景。

注意事项：

  • Web组件依赖网络或本地HTML资源，需注意加载性能
  • 若需动态生成公式，建议服务端预渲染为图片/SVG格式后通过Image组件显示
  • 涉及符号交互时（如公式编辑器），需结合手势事件与绘制逻辑
回到顶部