函數工具項目設計及最終產品
一、需求要點:
-
坐標系及畫布方格:
- 縮放:涉及畫布上的函數縮放及繪製範圍等;
- 刻度單位變化:單位轉化所需要的重新計算等;
- 函數表達式輸入:
- 輸入表示式輸入規範的校驗,是否複合規則;
- 輸入表達式轉程式語言的流程;
- 程式語言計算結果轉為數學表達式展示;
- 模板管理:
- 模板切換數據狀態管理;
- 模板保存、刪除、更改;
- 繪製函數影像;
- 展示函數屬性與性質;
- 函數與點的關係
- 點的處理
二、架構設計
三、 領域模型
//www.processon.com/view/link/5b4ed94be4b025cf491ae8ef
四、技術難點及解決方案
1.公式表達式輸入校驗
- 公式表達式輸入==>LaTex表達式(藉助第三方類庫mathquill)
- 轉換latex表達式為程式可識別的表達方式,
- 最後表達式能夠得出最終計算結果,即為該項常數,根據函數性質匹配所得常數項即可
2.公式到數據層的轉化
- 通過latexToJs,轉換為math.js所識別的表達式;//github.com/fangsmile/LatexToJs
- 通過math.js再將表達式轉化為常數,常數帶入確定的函數類型生成新的latex表達式;
3.數據層到公式的轉換及相關性質的展示
- 輸入Latex表達式=>公式表達式輸入(藉助第三方類庫mathquill)
4.對於函數圖形繪圖的實現
1)因為函數沒有用戶自定義定義域的功能,大多數函數的定義域為(-∞,+∞)。但繪製的時候根據函數公式計算畫點範圍的時候需要有明確的起點終點,才能保證繪製性能。
計算出當前畫布可見區域的x範圍作為默認的定義域,計算出每個函數的值y,即得到需要繪製的一系列點坐標
2)每次繪製的時候去現計算函數值y,或者先計算下來保存到屬性points中。目前設計是保存到points中,這樣只要不是變化函數本身,其中大部分點是不需要重新計算的了。
繪製重新計算的場景:
- 移動畫布,畫布可見範圍x軸發生變化,需要補充x軸上新增定義域範圍。
- 縮小畫布,畫布可見範圍x軸發生變化,需要補充x軸上新增定義域範圍。
- 變化函數表達式,需要重新計算所有x值對應的y
3)繪製的時候並不需要把points中每個點都連線形成函數圖形,需要結合可見範圍x定義域,以及畫布縮放值scale,來優化繪製
五.最終產品
附:
數學常用術語英文對照表,便於寫程式碼起變數名字