IOS 显示数学公式(latex/iosMath)

最近在做一款教育类的app,新的APP涉及了数理化公式展示,也是第一次接触。百度、谷歌下发现资料有限。可以搜到一个开源的demo:https://github.com/CodingSha/SPMathKit

我看了下这个demo的实现逻辑是通过web去渲染公式,生成图片然后跟富文本拼接来实现公式展示。开始我也是按照这个demo的逻辑,来实现我的需求。公式倒是能展示出来,满心以为万事大吉。但是随着项目的开发推进,发现事情没有想象的那么简单。从服务端请求数据使用才发现问题特别多,很多公式跟文本并不能对齐。(这里不得不再次吐槽下苹果糟糕的UI布局方式,是需要计算、计算、计算。糟心的事情说三遍)这还是小问题;最让人难以接受的是加载公式的时间;经过测试,如果同时加载5个公式基本在2秒以上!!  这对于我来说是难以接受的。如是就只能继续摸索怎么解决这个问题了。

继续在谷歌上不停的搜索资料,结果让我很绝望,安卓的开源资料很多、iOS的几乎没有、做开发最怕的不是你碰到的东西有多难,而是你根本就找不到资料;(swift也有latex的资料、我没试过效果怎么样、因为我项目没打算用swift混编)后面在某乎上发现一个专门弄latex的大神,我翻看了他之前写的文章,有一篇文章专门写了关于laxte转译iOS跟安卓的,不过他需要付费使用并未开源,根据他文章的思路、我尝试自己写一个、先进行公式绘画,绘画成功后通过NSMutableAttributedString进行富文本拼接。那么下面就来说下我的思路。

在这里我是用的的是iosMath这个转化公式的库。好像也只有这个能用来解决当前的问题。

使用MTMathUILabel这个类去加载你需要展示的公式。例如你需要去展示 mathLatex = @"F(X) = P\left\{ {X \le x} \right\} = \left\{ \begin{array}{l} 0,x < 0\\ 0.2,0 \le x < 1\\ a,1 \le x < 2\\ 1,x \ge 2 \end{array} \right."这么样一个公式,你只需要简单的去实现一个类似label复制的操作。


就可以很完美的展示出来你要的公式。


如果你觉得事情到这就结束了。那不好意思,我只能用叶问里洪师傅的一句话来回复:“没那么简单”。

iosMath是能解决公式的展示问题,但是也有缺陷的。1.它不能展示除公式外的其它元素。2.有许多公式他是不支持的,这也是我在实践中得出的血泪史。

那么关于不能展示其它的字符,这个很好解决。我们可以利用强大的富文本来拼接实现。我们可以把后台返回的题目进行切割,分离出公式模块和非公式模块。根据特定的字符切割。然后将MTMathUILabel展示的latex放到一个view上,当然view要适配公式的高度。话不多说,先上代码


这样解决了基础的公式展示需求,当然这样可以很好地解决ios的控件适配。那么到这里,基础的需求没有毛病。但是随着程序的继续,最恶心的来了。你会发现你有很多公式完全解析不了。这特么就尴尬了,没有办法,只能遇到问题解决问题。办法总比困难多。

这里需要一个转化公式的工具,这个网上很多。然后需要我们去latex官网对准标准格式。我遇到的是很多双重积分、矩阵公式不能解析。打开iosMath源码,进去看看源码


这个方法里面有很多公式的转码,你需要自行比对。例如需要展示 "积分$\\int_0^1 {dx} \\int_0^{1 - x} {f(x,y)} dy$交换积分次序后等于( ) <br \/>"这个题目,但是你在iosMath里却根本没有发现有这个二重积分的转化,那么就需要自己进去修改源码。


这里加上二重积分的函数。效果如下


这是个痛苦的过程,因为我不认识那些特殊的字符代表的是个啥公式到底。反正记住一句话《公式显示有问题请到latex官网对准标准格式》。现在我这边百分之90左右公式是没有问题了,也还有一些公式还是渲染有问题,各种比对和修改,目前还是有点问题。只能继续摸索。抛开其它不说,其实这个东西搞起来也很有意思。如果哪位大神有个好的想法,请告诉小弟。

这里要感谢 Mr鹏先生小达子同学

两位老哥,交流的过程,解决了我好几个问题。thank you

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 203,271评论 5 476
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,275评论 2 380
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,151评论 0 336
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,550评论 1 273
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,553评论 5 365
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,559评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,924评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,580评论 0 257
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,826评论 1 297
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,578评论 2 320
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,661评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,363评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,940评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,926评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,156评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,872评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,391评论 2 342