在學(xué)習(xí)前端開發(fā)的過程中，有時候我們需要一些有趣的項目來提升我們的技能。今天我要給大家介紹的是一個非常酷的項目——NinjaSketch，這是一個用React和TypeScript構(gòu)建的簡易白板工具。這個項目使用了Rough.js來實現(xiàn)手繪風(fēng)格的效果。盡管這個應(yīng)用不是響應(yīng)式的，但它的功能非常強大，適合用來練習(xí)和學(xué)習(xí)。

開源地址

https://github.com/mirayatech/NinjaSketch

使用的技術(shù)

• Vite：一個快速的構(gòu)建工具

• React.js：用于構(gòu)建用戶界面的JavaScript庫

• TypeScript：JavaScript的超集，提供了靜態(tài)類型檢查

• Rough.js：用于創(chuàng)建手繪風(fēng)格的圖形

• CSS：用于樣式設(shè)計

• Vitest：一個用于單元測試的框架

• Cypress：用于端到端測試的框架

• Testing Library：一個用于測試React組件的庫

NinjaSketch的功能

在NinjaSketch中，你可以進(jìn)行以下操作：

選擇工具

你可以選擇鉛筆、直線、矩形和文本工具，開始你的創(chuàng)作之旅。

繪制和移動

在畫布上點擊并拖動即可繪制圖形。要移動某個元素，只需選擇它并將其拖動到新的位置。你也可以通過拖動角落來調(diào)整元素的大小，但這個功能目前僅適用于矩形和直線。

編輯文本

點擊畫布并開始輸入，即可在繪圖中添加文本。你也可以編輯現(xiàn)有的文本內(nèi)容。

縮放

使用Ctrl + 滾動或點擊按鈕可以放大和縮小畫布，方便查看細(xì)節(jié)或全貌。

平移

按住空格鍵并拖動，或使用中鍵按鈕來移動畫布。

快捷鍵

使用以下快捷鍵可以提高你的工作效率：

• 畫布導(dǎo)航：按空格鍵并拖動，或使用中鍵按鈕。

• 撤銷：Ctrl + Z。

• 重做：Ctrl + Y或Ctrl + Shift + Z。

• 放大：Ctrl + 加號。

• 縮小：Ctrl + 減號。

如何安裝

要在本地環(huán)境中運行該項目，請按照以下步驟操作：

• 克隆這個倉庫到你的本地機器。

• 在項目目錄中運行npm install或yarn來安裝所需的依賴項。

• 運行npm run start或yarn start來啟動項目。

• 在瀏覽器中打開http://localhost:5173（或控制臺顯示的地址）來查看應(yīng)用。

延伸閱讀：作者的開發(fā)過程

項目開始時，我使用Rough.js渲染了一個畫布，作為所有繪圖的基礎(chǔ)。然后，我專注于在畫布上繪制圖形，允許用戶創(chuàng)建線條、矩形等形狀。

接下來，我確保用戶可以移動元素，這對于調(diào)整繪圖非常重要。之后，我添加了調(diào)整元素大小的功能，以便用戶更好地控制圖形的形狀。

為了讓用戶可以修正錯誤，我實現(xiàn)了撤銷和重做功能。我還添加了自由繪圖工具，使繪圖體驗更加自然，以及文本工具，用于在畫布上添加標(biāo)簽或注釋。

為了便于導(dǎo)航較大的繪圖，我加入了平移和縮放工具。在所有功能實現(xiàn)后，我設(shè)計了整個用戶界面，使其更加用戶友好和吸引人。

最后，我使用Cypress和Testing Library進(jìn)行了測試，確保繪圖和操作文本、線條、矩形以及自由繪圖的功能都正常工作。

在整個開發(fā)過程中，我記錄了所學(xué)到的知識和實現(xiàn)功能的過程。這種記錄不僅幫助我更好地理解了所構(gòu)建的內(nèi)容，還讓我意識到，通過回顧和記錄，我們可以更全面地理解所學(xué)的知識。這是一個在學(xué)習(xí)新事物時值得遵循的好習(xí)慣。

📚 學(xué)到的知識

在這個項目中，我學(xué)到了很多重要的技能，并對一些復(fù)雜的概念有了更深入的理解，提升了我的邏輯思維能力。

🧠 useHistory Hook

邏輯思維：創(chuàng)建useHistory鉤子教會了我如何管理保存、撤銷和重做操作，需要深入理解如何跟蹤變化和規(guī)劃用戶操作。

📏 坐標(biāo)和測量

精度：我在處理形狀和點時變得更加精準(zhǔn)，比如確定一個點是否在形狀內(nèi)部，這需要仔細(xì)的測量。數(shù)學(xué)技能：我使用數(shù)學(xué)函數(shù)來確保所有元素都被正確放置，并計算距離。

🎨 發(fā)現(xiàn)Rough.js

新工具：我發(fā)現(xiàn)了Rough.js，這個工具可以讓我創(chuàng)建出手繪風(fēng)格的圖形，這對我來說是一個新的且令人興奮的工具。

🔍 深入研究函數(shù)

復(fù)雜函數(shù)：我花時間理解了getSvgPathFromStroke函數(shù)，它可以將繪圖動作轉(zhuǎn)換為平滑的路徑。

?? 管理點和繪圖

處理點：我學(xué)會了如何收集和使用繪圖中的點，這涉及到理解和管理數(shù)據(jù)，以反映用戶的操作。

🎣 React Hooks和渲染

新知識：我學(xué)習(xí)了useLayoutEffect，這個鉤子可以確保在屏幕更新前完成某些變化，對于某些繪圖功能非常有用。

🎡 高級事件處理

用戶交互：我處理了wheel事件監(jiān)聽器，添加了縮放和平移功能，使應(yīng)用更加互動和用戶友好。

📈 總體成長

這個項目的每一個部分都幫助我更好地理解了如何構(gòu)建應(yīng)用程序、管理復(fù)雜信息和改善用戶體驗。這不僅僅是制作一個工具，更是解決問題、學(xué)習(xí)新知識和提升自己技能的過程。

💭 如何改進(jìn)

• 增加更多顏色選項。

• 添加更多工具，比如圓形、橡皮擦等。

• 增加更多形狀，比如三角形、星形等。

• 增加更多快捷鍵，提高操作效率。

• 增加更多主題，比如暗黑模式、亮色模式等。

• 增加更多文本選項，比如字體大小、字體顏色等。

• 在某些地方使用類型定義來代替any類型，以提高代碼的可維護性。

結(jié)束

通過這個項目，希望大家能夠更好地理解 React和 TypeScript 的結(jié)合使用，并在自己的開發(fā)之路上不斷進(jìn)步！