開發數學系統時,需要掌握的幾個基於Web的數學框架

啟明星工作室 發表於 2021-10-14
框架

在做數學系統時,經常要和數學公式打交道,這裡介紹幾個常用的基於Web的數學處理軟體。

數學系統主要包括三類:(1)數學公式的顯示,也就是如何使用web顯示覆雜的數學公式。

(2)影像製作,例如長方形,橢圓等 (3)公式的幾何圖形,例如y=x*x 的幾何圖形形狀。

 

 

1. MathJax

MathJax使用基於HTML+JS+CSS 來顯示數學公式。雖然他叫做MathJax,但是,其實對於物理、化學等公式都可以顯示。

MathJax使用簡單,首先引入必要的JS

<script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script>
<script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/[email protected]/es5/tex-mml-chtml.js"></script>

然後就可以寫出漂亮的數學公式了。MathJax使用Latex語法,下面是一個是LaTex公式

$$\Gamma(z) = \int_0^\infty t^{z-1}e^{-t}dt\,.$$

  最終瀏覽器顯示效果是:

開發數學系統時,需要掌握的幾個基於Web的數學框架

MathJax使用Canvas或者SVG顯示數學公式,這使得他放大縮小都不失真,而且易於編輯。

 地址 https://www.mathjax.org

 

開發數學系統時,需要掌握的幾個基於Web的數學框架

 

 

2.KaTex

KaTex是另外一個開源的數學公式顯示軟體,和MathJax相比,他更輕巧、速度更快。

但是,他更專注與數學公式,對於其它學科支援的不是很好。

當然,Katex也一直在完善。地址 https://katex.org

 開發數學系統時,需要掌握的幾個基於Web的數學框架

 

 

3.ipandao

Editor.md是一個開源的Markdown編輯器,輕巧實用。可以整合MathJax和Katex。

官網 http://editor.md.ipandao.com

開發數學系統時,需要掌握的幾個基於Web的數學框架

 

 

 

 

4.Math.js

math是基於JavaScript的數學運算庫。地址 https://mathjs.org

 在JavaScript裡,雖然提供了Math庫,但是他也僅僅只包含簡單的加減乘除,乘方,開方運算,

遠遠無法滿足工科需求。而math.js提供了更強大的複雜運算。

例如,他支援 複數的加減乘除,支援矩陣運算,微積分的求導和積分等。

print(math.evaluate('9 / 3 + 2i')) // 運算結果為複數 3 + 2i
print(math.evaluate('det([-1, 2; 3, 1])')) //運算結果為 -7  

 基於math.js也誕生了一批外掛。

開發數學系統時,需要掌握的幾個基於Web的數學框架

 

5 SvgEdit

 在數學系統裡,除了公式,還有影像,在日常老師上課裡,除了公式,就是影像,例如長方形,橢圓。

SvgEdit是一個向量圖形編輯功能,他允許你動態建立,修改影像。

Svg生成的影像後期可能更改,採用SVG不失真。

https://github.com/SVG-Edit/svgedit

開發數學系統時,需要掌握的幾個基於Web的數學框架

 

 

 

6.SVG.JS

上面介紹的那個SVG是用手畫出影像,

而SVG.JS則是用程式碼生成影像。

官網見 https://svgjs.dev/

但是,svg.js V3.0對V2.0改動的非常大,這使得現在好多文件仍然以2.0為主。

而且,3.0似乎用起來也沒有2.0順手。

 

開發數學系統時,需要掌握的幾個基於Web的數學框架

 

 

7. 微軟瀏覽器-Edge

數學公式是一個“硬功夫”,微軟從不缺席的,

微軟在Edge瀏覽器內建了數學計算功能。

在Edge的設定裡可以看到“Math Solve”

 

開發數學系統時,需要掌握的幾個基於Web的數學框架

 

 

 

微軟內建的這個數學功能非常強大,他能給出數學計算步驟,畫出圖形等

 

開發數學系統時,需要掌握的幾個基於Web的數學框架

 

 

 

 

7.數學公式 js-graphy

js-graphy 是我以前在製作一個小的數學 http://demo.dotnetcms.org/math 系統時用到的一個開源外掛。官網 https://github.com/laktak/js-graphy

 js-graphy 不支援math.js,所以太複雜的圖形無法顯示。

開發數學系統時,需要掌握的幾個基於Web的數學框架