在上一個系列中,我們討論了許多主題。從基本的物件操作到動畫,事件,過濾器,群組和子類別。但仍然有一些非常有趣和有用的事情要討論!
Free drawing
如果說有什麼功能能讓<canvas>在眼前一亮,那一定是它能夠很好的支援自由繪圖!由於畫布只是一個2D點陣圖, Fabric為我們提供了一張紙:可以自由繪畫,而且非常自然。
只需將Fabric畫布的isDrawingMode屬性設為true即可啟用免費繪圖模式。這立即使在畫布上的任何進一步的單擊和移動都被解釋為鉛筆/畫筆。 當isDrawingMode為true時,您可以根據需要在畫布上繪製多次。但是,一旦執行任何移動,然後執行“ mouseup”事件,Fabric就會觸發“ path:created”事件,並實際上將剛剛繪製的形狀轉換為真實的fabric.Path實例!
如果隨時將isDrawingMode設定為false,最終將在畫布上仍存在所有已建立的路徑物件。而且,由於它們是很好的舊fabric.Path對象,因此您可以根據需要進行任意修改(移動,旋轉,縮放等)。
還有兩個可用於自訂自由繪製的屬性-freeDrawingBrush.color和freeDrawingBrush.width。兩者都可以透過freeDrawingBrush實例在Fabric畫布實例上使用。 freeDrawingBrush.color可以是任何常規顏色值,並表示畫筆的顏色。 freeDrawingBrush.width是一個以像素為單位的數字,代表畫筆的厚度。
在不久的將來,我們計劃為免費繪畫添加更多選項-各種版本的畫筆(例如,類似噴霧或粉筆的刷子)。還有自訂畫筆圖案,以及可以自行擴展的選項,類似Fabric影像濾鏡。