函式工具專案設計及最終產品

一、需求要點：  

1. 座標系及畫布方格：

   • 縮放：涉及畫布上的函式縮放及繪製範圍等；
   • 刻度單位變化：單位轉化所需要的重新計算等；
2. 函式表示式輸入：
   • 輸入表示式輸入規範的校驗，是否複合規則；
   • 輸入表示式轉程式語言的流程；
   • 程式語言計算結果轉為數學表示式展示；
3. 模板管理：
   
   • 模板切換資料狀態管理；
   • 模板儲存、刪除、更改；
4. 繪製函式影像；
5. 展示函式屬性與性質；
6. 函式與點的關係
7. 點的處理

 

二、架構設計

三、 領域模型

https://www.processon.com/view/link/5b4ed94be4b025cf491ae8ef  

四、技術難點及解決方案

 

1.公式表示式輸入校驗

• 公式表示式輸入==>LaTex表示式(藉助第三方類庫mathquill)
• 轉換latex表示式為程式可識別的表達方式，
• 最後表示式能夠得出最終計算結果，即為該項常數，根據函式性質匹配所得常數項即可

2.公式到資料層的轉化

• 通過latexToJs,轉換為math.js所識別的表示式；https://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，來優化繪製

 

五.最終產品

 

 

 

附：

數學常用術語英文對照表，便於寫程式碼起變數名字