如何在 Android 撰写应用程序中显示乳胶或数学方程？

Question

我想构建一个基于jet pack compose的Android应用程序，它可以显示数学方程或乳胶。

我检查了互联网并发现了很多库，但所有库都是用于 xml 而不是用于 compose，而且它们已经过时了，甚至不适用于 xml。我正在尝试找到一个适用于 compose 或在最坏情况下适用于 xml 的库，并且需要 gradle、主要活动 Kotlin、compose（或 xml）的最低限度代码片段。

Answer 1

使用KaTeX和WebViews，您需要创建一个文件

main/assets/latex_render.html

，其中包含以下内容（大部分内容取自KaTeX文档）：

<!DOCTYPE html>
<!-- KaTeX requires the use of the HTML5 doctype. Without it, KaTeX may not render properly -->
<html>
<head>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/katex.min.css" integrity="sha384-n8MVd4RsNIU0tAv4ct0nTaAbDJwPJzDEaqSD1odI+WdtXRGWt2kTvGFasHpSy3SV" crossorigin="anonymous">

    <!-- The loading of KaTeX is deferred to speed up page rendering -->
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/katex.min.js" integrity="sha384-XjKyOOlGwcjNTAIQHIpgOno0Hl1YQqzUOEleOLALmuqehneUG+vnGctmUb0ZY0l8" crossorigin="anonymous"></script>

    <!-- To automatically render math in text elements, include the auto-render extension: -->
    <script defer src="https://cdn.jsdelivr.net/npm/[email protected]/dist/contrib/auto-render.min.js" integrity="sha384-+VBxd3r6XgURycqtZ117nYw44OOcIax56Z4dCRWbxyPt0Koah1uHoK0o4+/RRE05" crossorigin="anonymous"
            onload="renderMathInElement(document.body);"></script>
</head>
<body style="
background-color:transparent;
display: flex;
align-items: center;
justify-content: center;
">

<p id="ident" style="color: white"></p>

<script>
    function addBody(latexString) {
        katex.render(latexString, document.getElementById('ident'), {
            throwOnError: false
        });
    }
</script>
</body>
</html>

在这里，等待

addBody

函数执行，然后就会显示LaTeX表达式。

应用于

body

标签的样式主要用于页面排列，但

background-color: transparent

除外，我发现需要使用它来阻止 WebView 首次创建时的闪烁。

现在，对于 Android Compose 部分，您需要将以下依赖项添加到您的

build.gradle

：

implementation("com.google.accompanist:accompanist-webview:0.31.3-beta")

然后，您可以在 WebView 上创建一个包装器组件，像这样简单的东西就足够了：

@SuppressLint("SetJavaScriptEnabled")
@Composable
fun LaTeXView(latex: String) {

    var webView: WebView? by remember { mutableStateOf(null) }

    val state = rememberWebViewState("file:///android_asset/latex_render.html")

    if (state.loadingState is LoadingState.Finished) {
        webView?.loadUrl("javascript:addBody('${latex}')")
    }
    com.google.accompanist.web.WebView(
        state = state,
        modifier = Modifier,
        onCreated = {
            it.settings.javaScriptEnabled = true
            webView = it
            it.setLayerType(WebView.LAYER_TYPE_SOFTWARE, null)
            it.setBackgroundColor(0)
        }
    )
}

（受到对这个 KaTeXView 问题的回应的启发，不幸的是，它对我来说并不适用，但它已经足够接近了）

你现在应该能够像这样渲染你的乳胶：

LaTeXView(latex = "\\\\sin(x) \\\\cdot \\\\cos(y) \\\\cdot \\\\sin(x \\\\cdot y)")

它应该渲染类似这样的东西（减去渐变背景）：

如何在 Android 撰写应用程序中显示乳胶或数学方程？

问题描述投票：0回答：1

1个回答

最新问题

如何在 Android 撰写应用程序中显示乳胶或数学方程？

问题描述 投票：0回答：1

1个回答

最新问题

问题描述投票：0回答：1