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

在教育机构入职2年了,之前都是做一些公务员的东西;最近老板要求做新的APP涉及了数理化公式展示,也是第一次接触。百度、谷歌下发现资料有限,大家可以搜到一个开源的demo:https://github.com/CodingSha/SPMathKit
这个demo其实是通过web去渲染公式,生成图片然后跟富文本进行拼接。
开始我也是用这个demo,以为解决了需求,然而从服务端请求数据使用才发现问题特别多,很多公式跟文本并不能对齐,这还是小问题;最让人难以接受的是加载公式的时间;经过测试,如果同时加载5个公式基本在2秒以上!!

NSString *str1 = @"<math>m_{2}-m_{1}=\\frac{5}{2}\\lg\\frac{E_{1}}{E_{2}}</math><math>m_{2}-m_{1}=\\frac{5}{2}\\lg\\frac{E_{1}}{E_{2}}</math><math>m_{2}-m_{1}=\\frac{5}{2}\\lg\\frac{E_{1}}{E_{2}}</math>";
    NSString *str2 = @"3.10.1";
    NSString *str3 = @"4.<math>\\lg10.1</math>";
    NSString *str4 = @"5.<math>10^{-10.1}</math>";
    NSString *str5 = @"5.两颗星的星等与亮度满足<math>m_{2}-m_{1}=\\frac{5}{2}\\lg\\frac{E_{1}}{E_{2}}</math>,但是我还是不会,过吧下一道.令<math>m_{2}=-1.45</math>,<math>m_{1}=-26.7</math>,<math>\\lg\\frac{E_{1}}{E_{2}}=\\frac{2}{5}(m_{2}-m_{1})=\\frac{2}{5}(-1.45+26.7)=10.1</math>,<math>\\frac{E_{1}}{E_{2}}=10^{10.1}-\\frac{E_{2}}{E_{1}}=10^{-10.1}</math>,故选D.";
    NSString *str6 = @"5.两颗星的星等与亮度满足<math>m_{2}-m_{1}=\\frac{5}{2}\\lg\\frac{E_{1}}{E_{2}}</math>,但是我还是不会,过吧下一道.令<math>m_{2}=-1.45</math>,<math>m_{1}=-26.7</math>,<math>\\lg\\frac{E_{1}}{E_{2}}=\\frac{2}{5}(m_{2}-m_{1})=\\frac{2}{5}(-1.45+26.7)=10.1</math>,<math>\\frac{E_{1}}{E_{2}}=10^{10.1}-\\frac{E_{2}}{E_{1}}=10^{-10.1}</math>,故选D.";
    NSString *str7 = @"5.两颗星的星等与亮度满足<math>m_{2}-m_{1}=\\frac{5}{2}\\lg\\frac{E_{1}}{E_{2}}</math>,但是我还是不会,过吧下一道.令<math>m_{2}=-1.45</math>,<math>m_{1}=-26.7</math>,<math>\\lg\\frac{E_{1}}{E_{2}}=\\frac{2}{5}(m_{2}-m_{1})=\\frac{2}{5}(-1.45+26.7)=10.1</math>,<math>\\frac{E_{1}}{E_{2}}=10^{10.1}-\\frac{E_{2}}{E_{1}}=10^{-10.1}</math>,故选D.";
    
    NSArray *arr = @[str1,str2,str3,str4,str5,str6,str7];
    for (NSInteger i = 0; i < arr.count; i ++) {
        
        MathSubjectView *subject = [[MathSubjectView alloc]initWithFrame:CGRectMake(10, 10+130 * i+130, self.view.bounds.size.width - 20,0)];
        subject.testStr = arr[i];
        [self.view addSubview:subject];
        subject.MatchBlock = ^(CGFloat math) {
            NSLog(@"11111");
        };
    }

。在正常的数学题目中、标题基本有2到3个公式加上四个答案和解析已经远超过5个、更别说个别页面设计要求同时加载数十个公式。demo返回高度的方式是异步的、导致加载多个公式所用的时间逐步增加、在我的工程中使用这个demo加载公式基本都是单题5秒到8秒、其中一个页面加载数十道公式甚至等待超过1分钟、后面跟网易的朋友咨询这块的资料,他告诉我使用重用池去解决这个问题,尝试修改demo、

@interface TestViewPool ()
//web重用池
@property ( nonatomic, strong)NSMutableArray *userWebViewArray;
@property ( nonatomic, strong)NSMutableArray *noUserWebViewArray;
//math重用池...
//subject重用池...
@end
@implementation TestViewPool
+ (TestViewPool *)creatTestViewPool
{
    static TestViewPool *instance = nil;
    static dispatch_once_t onceToken;
    dispatch_once(&onceToken, ^{
        instance = [[TestViewPool alloc]init];
    });
    return instance;
}
#pragma mark web重用池
- (NSMutableArray *)userWebViewArray{
    if (!_userWebViewArray) {
        _userWebViewArray = [[NSMutableArray alloc] init];
    }
    return _userWebViewArray;
}
- (NSMutableArray *)noUserWebViewArray{
    if (!_noUserWebViewArray) {
        _noUserWebViewArray = [[NSMutableArray alloc] init];
    }
    return _noUserWebViewArray;
}
-(void)creatWebView{
    MathWebView * webView = [[MathWebView alloc] initWithLaTex];
    [self.noUserWebViewArray addObject:webView];
}
-(MathWebView *)userWebview{
    if (self.noUserWebViewArray.count>0) {
        MathWebView * webView = [self.noUserWebViewArray lastObject];
        [self.userWebViewArray addObject:webView];
        [self.noUserWebViewArray removeLastObject];
    } else{
        MathWebView * webView = [[MathWebView alloc] initWithLaTex];
        [self.userWebViewArray addObject:webView];
    }
    return self.userWebViewArray.lastObject;
}
-(void)deallocWebView{
    [self.noUserWebViewArray removeAllObjects];
}
#pragma mark math重用池
//销毁时要把math包含的math.webView设置nil,同时把web放入对应的nouser数组
#pragma mark subject重用池

发现提前创建容器会导致其他页面卡顿、 所以这个demo只能弃用(修改过的demo在下面也会发上,有兴趣的朋友也可以改改看)、因为老板不会问你过程,他只要结果。
继续在谷歌上不停的搜索资料,结果让我很绝望,安卓的开源资料很多、iOS的几乎没有、做开发最怕的不是你碰到的东西有多难,而是你根本就找不到资料;(swift也有latex的资料、我没试过效果怎么样、因为我项目没打算用swift混编)后面在某乎上发现一个专门弄latex的大神,我翻看了他之前写的文章,有一篇文章专门写了关于laxte转译iOS跟安卓的,不过他需要付费使用并未开源,根据他文章的思路、我尝试自己写一个、先进行公式绘画,绘画成功后通过NSMutableAttributedString进行富文本拼接(可以在某乎上搜索李阿玲,看看他写的文章)
上代码如图:


mathLatex.png

上代码:
引入#import "NPMathView.h"

#import "ViewController.h"
#import "NPMathView.h"
@interface ViewController ()

@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    NPMathView *subject = [[NPMathView alloc] initWithFrame:CGRectMake(20, 100, self.view.frame.size.width-40, 0)];
    subject.font = [UIFont systemFontOfSize:15];
    subject.mathcolor = [UIColor blackColor];
    subject.math_lineSpacing = 12;
    dispatch_async(dispatch_get_main_queue(), ^{
       NSString *titles = [NSString stringWithFormat:@"在给定的条件下,下列选项所示的物质间转化均能实现的是(<sy>SiO_{2}</sy> <sy>\\xrightarrow[]{HCl(aq)}</sy> <sy>SiCl_{4}</sy> <sy>\\xrightarrow[高温]{H_{2}}</sy> <sy>Si</sy>特别的化学公式<sy>SiO_{2}</sy> <sy>\\xrightarrow[]{HCl(aq)}</sy> <sy>SiCl_{4}</sy> <sy>\\xrightarrow[高温]{H_{2}}</sy> <sy>Si</sy>奇葩的公式<sy>SiO_{2}</sy> <sy>\\xrightarrow[]{HCl(aq)}</sy> <sy>SiCl_{4}</sy> <sy>\\xrightarrow[高温]{H_{2}}</sy> <sy>Si</sy>在给定的条件下,下列选项所示的物质间转化均能实现的是(<sy>SiO_{2}</sy> <sy>\\xrightarrow[]{HCl(aq)}</sy> <sy>SiCl_{4}</sy> <sy>\\xrightarrow[高温]{H_{2}}</sy> <sy>Si</sy>特别的化学公式<sy>SiO_{2}</sy> <sy>\\xrightarrow[]{HCl(aq)}</sy> <sy>SiCl_{4}</sy> <sy>\\xrightarrow[高温]{H_{2}}</sy> <sy>Si</sy>奇葩的公式<sy>SiO_{2}</sy> <sy>\\xrightarrow[]{HCl(aq)}</sy> <sy>SiCl_{4}</sy> <sy>\\xrightarrow[高温]{H_{2}}</sy> <sy>Si</sy>在给定的条件下,下列选项所示的物质间转化均能实现的是(<sy>SiO_{2}</sy> <sy>\\xrightarrow[]{HCl(aq)}</sy> <sy>SiCl_{4}</sy> <sy>\\xrightarrow[高温]{H_{2}}</sy> <sy>Si</sy>特别的化学公式<sy>SiO_{2}</sy> <sy>\\xrightarrow[]{HCl(aq)}</sy> <sy>SiCl_{4}</sy> <sy>\\xrightarrow[高温]{H_{2}}</sy> <sy>Si</sy>奇葩的公式<sy>SiO_{2}</sy> <sy>\\xrightarrow[]{HCl(aq)}</sy> <sy>SiCl_{4}</sy> <sy>\\xrightarrow[高温]{H_{2}}</sy> <sy>Si</sy>继续极限测试<sy>N_{2}</sy> <sy>\\xrightarrow[高温、高压、催化剂]{H_{2}}</sy> <sy>NH_{3}</sy> <sy>\\xrightarrow[]{HCl(aq)}</sy> <sy>NH_{4}Cl(aq)</sy>若x,y满足<sy>\\left | x\\right |\\leq 1-y</sy>,且<sy>y\\geq−1</sy>,则<sy>3x+y</sy>的最大值为()若x,y满足<sy>\\left | x\\right |\\leq 1-y</sy>,且<sy>y\\geq−1</sy>,则<sy>3x+y</sy>的最大值为()若x,y满足<sy>\\left | x\\right |\\leq 1-y</sy>,且<sy>y\\geq−1</sy>,则<sy>3x+y</sy>的最大值为()直线l的普通方程为4(x-1)-3(y-2)=0,即4x-3y+2=0,点(1,0)到直线l的距离<sy>d=\\frac{\\left | 4-0+2\\right |}{\\sqrt{4^{2}+3^{2}}}=\\frac{6}{5}</sy>,故选D"];
       subject.testStr = titles;
    });
    
    subject.MatchBlock = ^(CGFloat math){
        NSLog(@"%f",math);
    };
    [self.view addSubview:subject];
}

看看效果:
latex.png

完美解决自适应问题、里面大概有30多个公式与文本并存、加载时间不到1秒,完爆SPMathKit 、并且安卓跟iOS不兼容的公式我在demo里面都根据latex标准去修改使它兼容,(我们的题目都是老师上传的,他们不会对照标准去修改公式)通过for循环测试加载2000个公式所用的时间在2秒内、通过对比能发现比web加载公式快了上百倍!!!!完美解决需求
demo链接: https://gitee.com/xpyt/latexMath(补充:封装的LaTeX不支持iOS12以下版本)
需要源码的直接 pod 'MathLatex'
如果你有更好的解决方式可以跟大家一起分享

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

推荐阅读更多精彩内容

  • 题目看这里走的过程必然是这样的:从pos[1][1]走到pos[1][x]以至于pos[2][x],再走到pos[...
    fruits_阅读 313评论 2 2
  • 《文化苦旅》。 这本书,它不甘甜,里面记载了太多太多的不忍与辛酸。 文化的旅程是苦、是涩,在千年的叹息中讲诉苦旅。...
    花之季阅读 421评论 0 1
  • 1 过去一周印象深刻的事? 搭建乐活图集公司框架并开业大吉 开始英语的学习 工作状态的调整 2 这一周第一次尝试的...
    沉思清清阅读 163评论 0 1
  • 将利爪揉为温情 把凶齿变幻奇迹 融入洞穿世界的心灵 不变的将会继续奔跑 孤傲忘却于命巢 凶戾弃落在来路 剩下的皆猎...
    六人城阅读 102评论 0 1