draw.io创建自定义形状

谁践踏了优雅 2022-10-17 04:15 428阅读 0赞

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

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

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

#### 总体结构 ####

diagrams.net的基本模板使用XML。点击Arrange > Insert > Shape打开Edit Shape对话框，在这里你可以看到模板的XML结构。让我们把这个模板自定义为一个大L，里面有一条垂直线。  
![在这里插入图片描述][2021060115370480.png]  
顶层元素是“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，你应该看到：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZtMDUxNw_size_16_color_FFFFFF_t_70]

#### 几何图形 ####

有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，从这些连接点或通过蓝色箭头拖动边。  
![在这里插入图片描述][20210601154705263.png]

#### 样式 ####

样式功能类似于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。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZtMDUxNw_size_16_color_FFFFFF_t_70 1]

#### 使用样式 ####

除非你在模板内部定义了样式，否则它将使用默认的样式。在上面的例子中，你可以改变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形状，前景有两条线：第一条垂直线是灰色的，第二条恢复到默认的描边颜色。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZtMDUxNw_size_16_color_FFFFFF_t_70 2]

转自：[【drawio笔记】创建自定义形状][drawio]

[2021060115370480.png]: /images/20221014/6b08a8e4cf3941f58903fb43dc0fbc87.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZtMDUxNw_size_16_color_FFFFFF_t_70]: /images/20221014/4854c88d3cdc4131b473661ad6478810.png
[20210601154705263.png]: /images/20221014/dc510f4f051a4bcd865a094efd419a29.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZtMDUxNw_size_16_color_FFFFFF_t_70 1]: /images/20221014/9878fa71da814b59838f0d495762cc6f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZtMDUxNw_size_16_color_FFFFFF_t_70 2]: /images/20221014/1b9d539fa28f45d48bf7f7562d4e7f16.png
[drawio]: https://blog.csdn.net/u012028275/article/details/113828875