在開(kāi)發(fā)的工程中，有需要顯示數(shù)學(xué)公式的需求，例如下面的

數(shù)學(xué)公式1

數(shù)學(xué)公式2

實(shí)現(xiàn)上面的顯示方式，可以使用三種方式：

使用圖片

將數(shù)學(xué)公式在服務(wù)器端生成圖片，前端使用圖片來(lái)展示數(shù)學(xué)公式。

使用這種方式前端難以排版，難以控制圖片的縮放比例，靈活性低。

WebView 加載數(shù)學(xué)公式引擎 —— KaTeX

現(xiàn)在已經(jīng)有一個(gè)非常成熟的排版系統(tǒng) LaTeX，它支持使用文本來(lái)表達(dá)復(fù)雜的數(shù)學(xué)公式、表格等。如果單純的顯示數(shù)學(xué)公式的話，可以使用 LaTeX 的子集 KaTeX, 它是一個(gè)支持 HTML 的輕量級(jí)的數(shù)學(xué)公式引擎。

我們可以在需要顯示數(shù)學(xué)公式時(shí)創(chuàng)建一個(gè) WebView，引入 KaTeX 來(lái)渲染數(shù)學(xué)公式。

使用這種方式存在幾種問(wèn)題：

1. WebView 加載數(shù)學(xué)公式的速度非常慢。
2. 如果需要在 TableView 的 Cell 中加載數(shù)學(xué)公式，則可能出現(xiàn)一個(gè)頁(yè)面中需要多個(gè) WebView 的情況，會(huì)進(jìn)一步見(jiàn)面頁(yè)面刷新的速度。其次 TableView 不能自動(dòng)推斷出 WebView 的高度，從而難以控制 Cell 的高度。

iosMath + YYText 的組合

iosMath 是一個(gè)專門(mén)用于顯示數(shù)學(xué)公式的框架，但是它不支持將其他文字和數(shù)學(xué)公式一起顯示。所以我們只能從一段文字當(dāng)中提取表達(dá)數(shù)學(xué)公式的部分，將其丟給 iosMath 顯示，其他的內(nèi)容還需要其他控件來(lái)展示。

所以我們還需要使用 YYText ，將 iosMath 框架中的用于顯示數(shù)學(xué)公式的 MTMathUILabel 作為一段 AttachmentString，使其和其他文字進(jìn)行拼接。

另外還需要考慮在數(shù)學(xué)公式過(guò)長(zhǎng)，一個(gè)頁(yè)面顯示不全時(shí)，需要左右滾動(dòng)方便用戶查看數(shù)學(xué)公式。所以用于展示信息的 YYLabel 還需要放在一個(gè) UIScrollView 中。

具體的實(shí)現(xiàn)方式可以查看 github。

項(xiàng)目截圖1	項(xiàng)目截圖2
image	image

參考

廖雪峰--使用 KaTeX 渲染數(shù)學(xué)公式