【drawio笔记】创建自定义形状

最新推荐文章于 2024-05-30 02:05:03 发布

dadalaohua

最新推荐文章于 2024-05-30 02:05:03 发布

阅读量1.4w

点赞数 5

分类专栏： drawio笔记文章标签： diagrams drawio

原文链接：https://www.diagrams.net/doc/faq/custom-shapes

版权

drawio笔记专栏收录该内容

32 篇文章

订阅专栏

本文详细介绍了如何在diagrams.net中创建自定义形状，通过XML格式描述形状的几何、连接点和样式。用户可以定义背景和前景几何图形，设置连接点，并应用各种样式，如描边宽度、填充颜色等。同时，文章还提供了创建L形模板的步骤，展示了路径元素和连接点的定义方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

使用文本编辑器在diagrams.net中创建自定义形状

你可以在diagrams.net中创建自己的自定义模板（形状），通过XML格式描述模板中组件的几何形状、连接点和样式。

提示：你可以将自定义模板从绘图画布拖动到Scratchpad中，或者如果你想保存或共享你的自定义形状，也可以拖动到自定义库中。单击File > New Library来创建一个新的自定义库。

总体结构

diagrams.net的基本模板使用XML。点击Arrange > Insert > Shape打开Edit Shape对话框，在这里你可以看到模板的XML结构。让我们把这个模板自定义为一个大L，里面有一条垂直线。

顶层元素是“shape”。所以输入：

<shape name="stencilName" h="100" w="50" aspect="variable" strokewidth="inherit">
</shape>

其属性是：

name -模具名称。
h - 高度。
w - 宽度。
aspect-如果是“variable”，你可以有任何长宽比。如果是“fixed”，则h和w固定为你在h和w中定义的比例。
strokewidth-"inherit"将描边宽度设置为你在UI中定义的样式。将其设置为正数，它将固定为该宽度。

形状块可以包含三个子元素，按以下顺序定义：

<connections> -边缘的连接点。
<background> -此处定义的几何图形将带有阴影。
<foreground> -几何图形的其余部分。

我们将在稍后处理连接。

让我们创建背景的几何体（模板的L部分）：

<background>
    <path>
      <move x="0" y="0"/>
      <line x="50" y="0"/>
      <line x="50" y="40"/>
      <line x="100" y="40"/>
      <line x="100" y="50"/>
      <line x="0" y="50"/>
      <close/>
    </path>
</background>

坐标0，0始终是左上角的点。右下角是w，h，因此在这种情况下为100，50。

现在添加一些前景几何图形（L内的垂直线）：

<foreground>
    <path>
      <move x="25" y="10"/>
      <line x="25" y="40"/>
    </path>
</foreground>

每个几何元素都必须有一个定义的描边(stroke)。它可以是stroke、fill或fillstroke。Stroke是没有填充的描边，fill是没有描边的填充，而fillstroke则是既有填充又有描边。首先，要定义几何体，最好下一行就是描边类型(stroke type)。

做完这些，我们的形状应该是这样的：

<shape name="stencilName" h="50" w="100" aspect="variable" strokewidth="inherit">
  <background>
    <path>
      <move x="0" y="0"/>
      <line x="50" y="0"/>
      <line x="50" y="40"/>
      <line x="100" y="40"/>
      <line x="100" y="50"/>
      <line x="0" y="50"/>
      <close/>
    </path>
  </background>
  <foreground>
    <fillstroke/>
    <path>
      <move x="25" y="10"/>
      <line x="25" y="40"/>
    </path>
    <stroke/>
  </foreground>
</shape>

请注意背景几何图形中的描边异常。你没有将它定义在背景几何图形之后，而是作为前景块的第一行。
单击Preview，你应该看到：

几何图形

有4种类型的几何图形元素：

<rect>-属性"x"，"y"，"w"，"h"，所有都要求是十进制数。
<roundrect>-属性"x"，"y"，"w"，"h"，所有都要求是十进制数。另外，"arcsize"是一个可选的十进制属性，用于定义角曲线的大小。
<ellipse>-属性"x"，"y"，"w"，"h"，所有都要求是十进制数。
<path> -几何图形的一般情况，用于更复杂的形状。

路径的结构与SVG中的路径类似。它应该以<move>开头，其中"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>元素定义了模具的连接点，在这些连接点上可以连接边。

<connections>
    <constraint x="0.5" y="0"/>
    <constraint x="0.5" y="1"/>
    <constraint x="0" y="0.5"/>
    <constraint x="1" y="0.8"/>
</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”末端，会产生圆形曲线，并在末端带有正方形直线。

还有一些与文本相关的样式。

文本

文本是使用文本元素添加的。你可以将文本添加到前景或背景中（在</foreground>或</background>之前，但要注意，背景文本可能会被前景元素隐藏，尤其是那些被填充的元素。文本使用以下格式：

<text str="someText" x="50.0" y="50.0" align="left" valign="top" vertical="0" rotation="0.0" align-shape="1"/>

必需的属性是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

<path1>
  <fillstroke/>
  <strokecolor color="#ffffff"/>
<path2/>
  <stroke/>

现在假设我们有另一行我们将调用<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形状，前景有两条线：第一条垂直线是灰色的，第二条恢复到默认的描边颜色。