draw怎么创建和编辑复杂的自定义形状
diagrams.net拥有大量的预建形状库，但是它也允许您将自己的栅格和SVG图像嵌入到图中。尽管这为您提供了很大的灵活性，但它不允许您设置栅格或SVG图像的样式，只能更改嵌入式SVG图像中的颜色。由于SVG和栅格图像不是本机形状，因此它们不包含有关在哪些形状上绘制阴影，应用线宽等等的必要信息。
基本的自定义形状
您可以通过以XML格式描述图形，几何图形，连接点和样式的方式在diagrams.net中创建自己的自定义形状。基本的diagrams.net形状使用XML。从diagrams.net菜单中选择“排列”>“插入”>“形状”以打开“编辑形状”对话框，您可以在其中查看形状的XML结构。
尖端
将自定义形状添加到绘图画布后，可以将其拖放到便笺本或自定义形状库中。
通过选择形状来编辑形状，然后在格式面板的“样式”选项卡上单击“编辑形状” 。请注意，您不能编辑所有形状，只能编辑XML格式的形状。
创建高级自定义形状
在此页面的最后，您将找到XML，用于创建下面使用的示例。通过diagrams.net中的“排列”>“插入”>“形状”，将此XML复制并粘贴到“编辑形状”对话框中，然后单击“预览”以查看如何在XSD中构造更复杂的形状。
使用下面的参考来了解如何定义每个自定义形状元素以及嵌套这些元素的顺序。
<形状>
外部元素是，具有以下属性：
名称-字符串，必填。此名称唯一地标识形状。目前未在diagrams.net中使用。
w，h-可选的十进制视图范围。这将为图形中的图形操作定义坐标系。默认值为100,100。
Aspect-可选字符串，其值为“变量”，默认值或“固定”。 固定总是使用由w / h之比定义的纵横比渲染形状。变量 使比率与当前顶点的几何形状相匹配。
strokewidth-包含整数或字符串“ inherit”的可选字符串。Inherit表示在缩放和调整形状大小时，单元格的strokewidth都会改变。此数值定义应用于宽度的乘数。默认值为“ 1”。
<连接>
如果要在自定义形状上定义特定的固定连接点，请使用元素。connections元素内的每个元素在形状上定义一个固定的连接点。
约束具有以下属性：
周长-必需，值1或0。值为0时，将在x，y指定的位置设置连接点。值为1可以将连接点的位置从形状的中心(通过x，y)外推到与形状的周长相交的点。
x，y-固定点相对于形状范围的位置。如果周长= 1，这些将自动调整。(0,0)在左上角，(0.5,0.5)是中心，(1,0.5)是边界右边缘的中心，依此类推。使用小于0或大于1的值来定位固定点点在形状之外。
名称 -可选字符串。形状上端口的唯一标识符。
<背景> 和<前景>
用于绘制形状的路径分为两个元素和。如果定义了阴影，则它是从元素派生的。通常，形状的背景是描绘形状外部的线条，但是并非总是如此。
元素只能包含一个 或元素(或不包含任何元素)。它不能包含任何填充 笔触 图像 文本或include-shape。
请注意，在diagrams.net中使用的mxGraph形状的状态，样式和绘图在设计上与HTML 5 canvas的状态，样式和绘图非常接近。使用这些建议的HTML 5教程对所使用的概念进行高级介绍。
状态
前台和背景元素是根据状态的概念进行渲染的。除了状态保存/加载操作外，还有两种其他类型的操作：样式和绘制。应用的样式会更改当前状态。
-保存当前状态(当前样式)。
-从状态堆栈中检索(加载)最后保存的状态。
风格
在当前状态(样式)内更改颜色的元素需要带有哈希前缀的十六进制颜色代码(“#FFEA80”)。
-定义发出笔触或fillstroke命令时的路径颜色。
-定义当发出fill或fillstroke命令时闭合路径内的颜色。
-定义绘制文本时字体的颜色。
其他样式元素如下：
-定义alpha级别，与透明度相反，范围为0.0-1.0(十进制)。使用0.0表示完全透明，使用1.0表示固态(不透明)。
-定义填充透明度，范围为 0.0-1.0(十进制)。使用0.0表示完全透明，使用1.0表示固态(不透明)。
-定义笔划透明度，范围为0.0-1.0(十进制)。使用0.0表示完全透明，使用1.0表示固态(不透明)。
-定义通过stroke或fillstroke绘制的整数厚度元素。使用fixed =“ 1”可以按原样应用值，而无需缩放。
<破折号> -定义笔触样式。使用“ 1”启用破折号，并使用“ 0”表示实线。
-定义虚线笔划上的虚线和空格的图案(启用时)。使用一系列以空格分隔的“打开，关闭”长度来定义用于绘制直线或空间的点数。重复该模式，默认为““ 3 3”“。例如，您可以使用“ 5 3 2 6”定义一个更复杂的模式。dashpattern中偶数个元素看起来更加平衡，但这不是必需的。
，和 -确定一条线的两个连接段如何连接在一起，如何绘制每条线的端点，以及分别确定两条线的外部和内部连接点之间的最大距离。有关视觉示例，请参阅Canvas styleing上的Mozilla页面。。diagrams.net使用相同的定义，除了线帽是“扁平”而不是Canvas的“对接”。
对于字体样式，使用以下元素：
-一个整数。
-ORed位模式，指示粗体(1)，斜体(2)和下划线(4)。例如，粗体下划线由值“ 5”定义。
-一个字符串，定义要使用的字体。
画画
大多数图形(形状内的线)包含在元素内。mxGraph在diagrams.net中使用的图形原语与HTML 5 Canvas的图形原语非常相似。
-到属性，必需的小数(x，y)。
-属性，必需的小数(x，y)。
-通过控制点转换为必需的小数(x2，y2)，必需的小数(x1，y1)。
<曲线> -通过控制点将所需的小数点(x1，y1)和(x2，y2)转换为所需的小数点(x3，y3 )。
-SVG arc命令的副本，不遵循HTML Canvas签名。该SVG规范文档给出了其行为的最好描述。这些属性的名称相同，所有十进制均为必填项，并且均为必填项。
– 结束当前子路径并导致从当前点到当前子路径的初始点绘制一条自动直线。
复杂的图纸
除了上述图形基本操作之外，还有其他非基本操作。使用这些可以更轻松地绘制一些基本形状：
-属性“ x”， “ y”，“ w”，“ h”，所有必需的小数。
-属性“ x”，“ y”，“ w”，“ h”，所有必需的小数。另外，“ arcsize”是一个可选的十进制属性，用于定义拐角曲线的大小。
-属性“ x”，“ y”，“ w”，“ h”，所有必需的小数。
请注意，这3个形状和所有路径都必须后跟fill，stroke或fillstroke才能呈现它们。
<文本>
文本元素具有以下属性：
str- 要显示的文本字符串，必需。
x和y-必需的文本元素的小数位(x，y)。
align-文本元素的水平对齐方式，可以为“ left”，“ center”或“ right”。可选，默认为“ left”。
valign-文本元素的垂直对齐方式，可以是“ top”，“ middle”或“ bottom”。可选，默认为“ top”。
局部- 0或1。如果为1，则“ str”实际上包含用于从mxResources中获取值的键。可选，默认值为0，目前在diagrams.net中未使用。
垂直 – 0或1。如果为1，则标签将垂直显示(旋转90度)。可选，默认为0。
rotation-以度为单位的角度(0到360度)。旋转文本的角度。可选，默认为0。
align-shape – 0或1。如果为0，则在设置文本旋转时忽略形状的旋转。可选，默认为1。
占位符- 0或1。如果为1，则格式为%name%的占位符将替换为其值。可选，默认为0。
<图像>
图像元素可以是外部URL或数据URI(如果支持)(在IE 7-中不支持)。属性是：
src-必需的字符串。数据URI或URL。
x，y-必需的小数。图像的(x，y)位置。
w，h-必需的小数。图像的宽度和高度。
flipH，flipV =可选0或1。用于沿水平/垂直轴翻转图像。两者的默认值为0。
子形状(仅支持draw.io中的内置形状)
注意： 仅diagrams.net的内置形状支持此功能。
允许通过按名称引用子形状在当前形状内渲染子形状。
属性是：
名称-必需的字符串。唯一的形状名称。
xy和w，h-必需的小数。子形状的(x，y)位置及其宽度和高度。