當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

draw.io创建自定义形状

發布時間：2025/5/22 编程问答 24 豆豆

生活随笔收集整理的這篇文章主要介紹了 draw.io创建自定义形状小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

使用文本編輯器在diagrams.net中創建自定義形狀

你可以在diagrams.net中創建自己的自定義模板（形狀），通過XML格式描述模板中組件的幾何形狀、連接點和樣式。

提示：你可以將自定義模板從繪圖畫布拖動到Scratchpad中，或者如果你想保存或共享你的自定義形狀，也可以拖動到自定義庫中。單擊File > New Library來創建一個新的自定義庫。

總體結構

diagrams.net的基本模板使用XML。點擊Arrange > Insert > Shape打開Edit Shape對話框，在這里你可以看到模板的XML結構。讓我們把這個模板自定義為一個大L，里面有一條垂直線。

頂層元素是“shape”。所以輸入：

其屬性是：

name -模具名稱。
h - 高度。
w - 寬度。
aspect -如果是“variable”，你可以有任何長寬比。如果是“fixed”，則h和w固定為你在h和w中定義的比例。
strokewidth -"inherit"將描邊寬度設置為你在UI中定義的樣式。將其設置為正數，它將固定為該寬度。

形狀塊可以包含三個子元素，按以下順序定義：

connections -邊緣的連接點。
background -此處定義的幾何圖形將帶有陰影。
foreground -幾何圖形的其余部分。

我們將在稍后處理連接。

讓我們創建背景的幾何體（模板的L部分）：

坐標0，0始終是左上角的點。右下角是w，h，因此在這種情況下為100，50。

現在添加一些前景幾何圖形（L內的垂直線）：

每個幾何元素都必須有一個定義的描邊(stroke)。它可以是stroke、fill或fillstroke。Stroke是沒有填充的描邊，fill是沒有描邊的填充，而fillstroke則是既有填充又有描邊。首先，要定義幾何體，最好下一行就是描邊類型(stroke type)。

做完這些，我們的形狀應該是這樣的：

請注意背景幾何圖形中的描邊異常。你沒有將它定義在背景幾何圖形之后，而是作為前景塊的第一行。
單擊Preview，你應該看到：

幾何圖形

有4種類型的幾何圖形元素：

rect - 屬性"x"，“y”，“w”，“h”，所有都要求是十進制數。
roundrect - 屬性"x"，“y”，“w”，“h”，所有都要求是十進制數。另外，"arcsize"是一個可選的十進制屬性，用于定義角曲線的大小。
ellipse - 屬性"x"，“y”，“w”，“h”，所有都要求是十進制數。
path - 幾何圖形的一般情況，用于更復雜的形狀。

路徑的結構與SVG中的路徑類似。它應該以開頭，其中"x"和"y"定義了坐標。移動后，應跟隨任意數量的幾何元素。

路徑元素可以是：

move - 屬性都要求是十進制的(x,y)。
line - 屬性都要求是十進制的(x,y)。
quad - 要求是十進制的(x2,y2)通過控制點是十進制的(x1,y1)。
curve - 要求是十進制的(x3,y3)，通過控制點是十進制的(x1,y1)和(x2,y2)。
arc - 這并沒有遵循HTML Canvas簽名，而是SVG arc命令的副本。該SVG規范給出了對其行為的最佳描述。這些屬性的名稱相同，均為十進制，并且都是必需的。
close - 結束當前子路徑，并導致從當前點到當前子路徑的最后一個移動點繪制一條自動直線。

子路徑完成后，有兩個選項。首先是用完成path，這使得它在視覺上是開放的。第二種選擇是使用- close，然后使用path，它將關閉當前子路徑。子路徑是以move開始并以close或另一個move結束的段。一個path可以包含多個子路徑，但是所有子路徑將使用相同的樣式。如果它們重疊，則與SVG一樣適用相同的填充規則。

如果需要，幾何圖形的第一個元素將使用陰影樣式，而其余元素將不使用。

連接

connections - 定義了模具的連接點，在這些連接點上可以連接邊。

這樣就在相應的坐標上增加了四個連接點。注意坐標是相對的，x=0是0，x=1是全寬。y也一樣。

當你把鼠標懸停在未選擇的形狀上時，連接點將顯示為小x，從這些連接點或通過藍色箭頭拖動邊。

樣式

樣式功能類似于SVG樣式規范。在定義特定樣式之前，應用于模板的樣式將生效。

樣式類型包括：

alpha - 定義alpha級別，與透明度相反。屬性為alpha，范圍為0-1，十進制。0表示完全透明，1表示實體。
strokewidth - 定義描邊寬度，單位是像素。屬性的width是十進制，fixed 是可選的，默認值0表示縮放大小，1表示固定的描邊寬度，不考慮縮放。dashed-切換虛線樣式。屬性是dashed。0表示實線，1表示虛線。
dashpattern - 定義自定義的虛線樣式。屬性是pattern，是一個數組。數組中的數字定義了有多少個點是一條線，多少個點是一個停頓，然后多少個點是一條線，以此類推。想象一下，這些數字是開/關交替的，直到數組結束，然后重新開始。因此dashpattern pattern="5 1 8 1"定義了一條線長5，停頓1，更長的線長8，再停頓1，然后重新開始。
miterlimit - 與SVG中相同。屬性是limit，一個十進制數字。它定義了線連接的“edginess”。數字越大，尖銳連接所允許的尖峰越大。limit屬性定義了尖峰的截止量。
linejoin - 定義線連接的類型。屬性是join，可以是miter，round或bevel，與SVG中的屬性相同。默認值為miter，它會產生筆直的銳利邊緣。顧名思義，Round為圓形連接。Bevel是中間解決方案，因為它產生的是“rounded”連接，是一條曲線，一條直線。
linecap - 定義行尾的類型。屬性是cap，可以是flat，square或round，與SVG中的屬性相同。默認值是flat，它在行尾處產生一個正方形邊緣。顧名思義，Round給出了一個圓的結尾，在行尾之后，所以這行會比較長。Square是中間解決方案，因為它會產生“rounded”末端，會產生圓形曲線，并在末端帶有正方形直線。

還有一些與文本相關的樣式。

文本

文本是使用文本元素添加的。你可以將文本添加到前景或背景中（在或之前，但要注意，背景文本可能會被前景元素隱藏，尤其是那些被填充的元素。文本使用以下格式：

必需的屬性是str，x和y。Align，valign，localized，vertical，rotation和align-shape都是可選的。

str-定義模板將包括的實際文本，它是一個字符串。x和y是標簽坐標，并使用十進制值。
align-定義水平對齊方式，其自描述值為：left，center和right。
valign-定義垂直對齊方式。其可能的值是top，middle和bottom。
vertical-1表示垂直渲染的文本，0（默認）表示水平文本。
rotation-定義文本旋轉，范圍為0.0-360.0。
align-shape-1表示文本標簽隨形狀旋轉，0表示固定文本標簽。

與文本相關的樣式為：

fontsize-屬性是size，是一個十進制值。定義字體大小。
fontstyle-屬性是style ，是粗體（1），斜體（2）和下劃線（4）的ORed位模式，即粗體下劃線為"5"
fontfamily-屬性是family，是一個字符串，用于定義要使用的face類型。

將文本添加到自定義形狀以及連接器后，點擊Preview。

使用樣式

除非你在模板內部定義了樣式，否則它將使用默認的樣式。在上面的例子中，你可以改變fillcolor和strokecolor，這將會影響到整個模板。

假設我們想保持輪廓線(outline stroke)的行為（當我們在UI中改變strokecolor時，輪廓線將會發生變化），但我們希望垂直線始終為白色。讓我們把輪廓幾何圖形稱為 path1，把垂直線稱為 path2。我們應該在概念上做這樣的事情：

元碼metacode

現在假設我們有另一行我們將調用path3，它是在path2之后聲明的，我們希望它有默認的描邊顏色。由于我們已經將strokecolor定義為白色，所以我們需要一個機制來撤銷它。為此，格式有一個堆棧機制。通過輸入save元素，我們將當前樣式保存在堆棧上。如果我們稍后使用restore，我們就會將當前樣式重置為堆棧中的最后一次保存。棧使用標準的LIFO（后進先出）結構。

元碼metacode

<save/> //saving all the styles here, which are unchanged, so the default ones<path1><fillstroke/> //use default fill and stroke<strokecolor color="#ffffff"/><path2><stroke/> //use white stroke, if it was fillstroke, white stroke and default fill color would be used <restore/> // we restore the last saved state, which in this case contains the default styles<path3><stroke/> //uses the same stroke color as the first time (the white fill got overwritten in the meantime)

save和restore元素的數量應匹配。
舉個例子，讓我們改變L形狀，前景有兩條線：第一條垂直線是灰色的，第二條恢復到默認的描邊顏色。

轉自：【drawio筆記】創建自定義形狀

《新程序員》：云原生和全面數字化實踐50位技術專家共同創作，文字、視頻、音頻交互閱讀

總結

以上是生活随笔為你收集整理的draw.io创建自定义形状的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇：高压蒸汽灭菌器应具备哪些生物安全措施
下一篇： draw.io基础使用