拥有一个大型的预构建形状库，但它还允许您在图表中嵌入自己的光栅和 SVG 图像。虽然这为您提供了很大的灵活性，但它不允许您设置光栅或 SVG 图像的样式，除非更改嵌入的 SVG 图像中的颜色。由于 SVG 和光栅图像不是原生形状，因此它们不包含有关在哪些形状上绘制阴影、应用线宽等的必要信息。
基本定制形状
您可以通过以 XML 格式描述其几何形状、连接点和样式，在 Freedgo Design 中创建自己的自定义形状。基本的Freedgo Design形状使用XML。从Freedgo Design 菜单中选择“排列”>“插入”>“形状”以打开“编辑形状”对话框，您可以在其中查看形状的 XML 结构。
Tips:
- 将自定义形状添加到绘图画布后，您可以将它们拖放到便签本或自定义形状库中。
- 通过选择形状来编辑形状，然后单击格式面板的样式选项卡上的编辑形状。请注意，您无法编辑所有形状，只能编辑 XML 格式的形状。
创建高级自定义形状
在此页面的末尾，您将找到用于创建下面使用的示例的 XML。通过在线Freedgo Design中的排列> 插入> 形状，将此 XML 复制并粘贴到“编辑形状”对话框中，然后单击“预览”以查看如何在 XSD 中构建更复杂的形状。
使用下面的参考来查看每个自定义形状元素的定义方式以及嵌套这些元素所需的顺序。
<shape>
外部元素是，它具有以下属性：
- name- 字符串，必填。该名称唯一标识了该形状。目前未在Freedgo Design 中使用。
- w,h- 可选的小数视图范围。这定义了形状中图形操作的坐标系。默认为100,100.
- aspect- 可选字符串，其值为”variable”、默认值或”fixed”。固定始终以由ratio定义的纵横比渲染形状w/h。变量使比率与当前顶点的几何形状相匹配。
- strokewidth- 可选字符串，包含整数或字符串”inherit”。Inherit表示单元格的描边宽度仅在缩放时更改，而在调整大小时不会更改。如果您使用数值，则当您缩放和调整形状大小时，单元格的描边宽度都会发生变化。该数值定义应用于宽度的乘数。默认为”1”.
<connections>
如果您想在自定义形状上[定义特定的固定连接点]，请使用 元素。元素内的每个元素都定义了形状上的固定连接点。
约束具有以下属性：
- perimeter- 必需，或者1或0。的值0设置由 指定的连接点x,y。的值可1从形状中心通过 推断连接点的位置，x,y直至与形状周边的交点。
- x,y- 固定点相对于形状边界的位置。如果 ，这些会自动调整perimeter=1。(0,0)是形状的左上角、(0.5,0.5)是中心、(1,0.5)是边界右侧边缘的中心等。使用小于0或大于的值1将固定点定位在形状之外。
- name- 可选字符串。形状上端口的唯一标识符。
提示：将自定义形状放置在绘图画布上后，您还可以编辑其固定连接点。
<background>和<foreground>
用于绘制形状的路径分为两个元素，和。如果定义了阴影，则它是从元素派生的。通常，形状的背景是追踪形状外部的线，但情况可能并非总是如此。
背景的任何描边、填充或填充描边都必须定义为元素的第一个描边，并且不能定义在元素中。如果形状的背景是空的，则不需要这样做。
该元素只能包含一个、、或元素（或无）。它不能包含任何fill、border、image、text或include-shape。
请注意，Freedgo Design 中使用的 mxGraph 形状的状态、样式和绘图在设计上与 HTML 5 画布的设计非常接近。使用这些建议的HTML 5 教程对所使用的概念进行高级介绍。
state
前景和背景元素按照状态的概念进行渲染。除了状态保存/加载操作之外，还有另外两种类型的操作：样式和绘制。应用的样式会更改当前状态。
- 保存当前状态（当前样式）。
- 从状态堆栈中检索（加载）最后保存的状态。
style
更改当前状态（样式）内颜色的元素需要哈希前缀的十六进制颜色代码 ( “#FFEA80”)。
- 定义发出描边或填充描边命令时的路径颜色。
- 定义发出填充或填充描边命令时闭合路径内的颜色。
- 定义绘制文本时字体的颜色。
其他样式元素如下：
- 定义 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固体（不透明）。
- 定义由描边或填充描边绘制的整数厚度元素。用于fixed=”1”按原样应用值，不进行缩放。
- 定义笔划样式。用于”1”启用虚线和”0”实线。
- 定义虚线笔划上的破折号和空格的图案（当启用这些时）。使用一系列以空格分隔的“开、关”长度来定义用于绘制直线或空格的点数。该模式重复，默认为”3 3”。”5 3 2 6”例如，您可以使用 定义更复杂的模式。破折号图案中的偶数个元素看起来更平衡，但这不是必需的。
、和- 分别确定一条线的两个连接线段如何连接在一起、如何绘制每条线的端点以及两条线的外部连接点和内部连接点之间的最大距离。有关视觉示例，请参阅Mozilla 的 Canvas 样式页面。Freedgo Design 使用相同的定义，只是linecap代替”flat”了 Canvas’ “butt”。
对于字体样式，使用以下元素：
* <fontsize>- 一个整数。
* <fontstyle>- 表示粗体 (1)、斜体 (2) 和下划线 (4) 的 ORed 位模式。例如，粗体下划线由值 定义"5"。
* <fontfamily>- 定义要使用的字体的字符串。
Drawing
大部分绘图（形状内的线条）都包含在元素内。Freedgo Design 中 mxGraph 使用的图形基元与 HTML 5 Canvas 的图形基元非常相似。
- 对于属性，需要小数(x,y)。
- 对于属性，需要小数(x,y)。
(x2,y2)-通过控制点所需的小数位，所需的小数位(x1,y1)。
- 到所需的小数(x3,y3)，通过控制点，所需的小数(x1,y1)和(x2,y2)。
- SVG arc 命令的副本，不遵循 HTML Canvas 签名。SVG规范文档对其行为提供了最好的描述。这些属性的名称相同，全部为小数，并且都是必需的。
- 结束当前子路径并导致从当前点到当前子路径的初始点自动绘制直线。
Complex Drawing
除了上述的图形图元操作之外，还有非图元操作。使用它们可以更轻松地绘制一些基本形状：
- 属性”x”, “y”, “w”, “h”, 所有必需的小数。
- 属性”x”, “y”, “w”, “h”, 所有必需的小数。还有”arcsize”一个可选的小数属性，定义角曲线有多大。
- 属性”x”, “y”, “w”, “h”, 所有必需的小数。
注意：这三个形状及其所有路径后面必须跟有fill、border或filllines才能渲染它们。
<text>
文本元素具有以下属性：
- str- 要显示的文本字符串，必需。
- x-文本元素的y小数点位置（必需）。(x,y)
- align- 文本元素的水平对齐方式，”left”、”center”或”right”。可选，默认为”left”。
- valign- 文本元素的垂直对齐方式，”top”、”middle”或”bottom”。可选，默认为”top”。
- localized-0或1. 如果1那么”str”实际上包含一个用于从 中获取值的键mxResources。可选，默认为0，目前在Freedgo Design中未使用。
- vertical-0或1. 如果1则标签垂直渲染（旋转 90 度）。可选，默认为0。
- rotation- 以度为单位的角度 (0到360)。文本旋转的角度。可选，默认为0。
- align-shape-0或1. 如果0那么设置文本旋转时形状的旋转将被忽略。可选，默认为1。
- placeholders-0或1. 如果1那么表单的占位符%name%将被替换为它们的值。可选，默认为0。
<image>
图像元素可以是外部 URL，也可以是数据 URI（如果支持）（IE 7 或更早版本不支持）。
属性有：
- src- 必需的字符串。数据 URI 或 URL。
- x,y- 所需的小数。(x,y)图像的位置。
- w,h- 所需的小数。图像的宽度和高度。
- flipH, flipV= 可选0或1. 用于沿水平/垂直轴翻转图像。默认值是0两者都适用。
子形状
注意：这仅支持内置的Freedgo Design形状。
<include-shape>允许通过按名称引用子形状来在当前形状内渲染子形状。
属性有：
name- 必需的字符串。独特的形状名称。
x,y, 和 -w,h所需的小数。(x,y)子形状的位置及其宽度和高度。
复杂自定义形状示例
这个复杂的自定义形状由以下 XML 代码表示。通过在线编辑器中的“排列”>“插入”>“形状” ，将此 XML 复制并粘贴到“编辑形状”对话框中，然后单击“预览”。
<shape aspect="variable" h="211" w="200" strokewidth="inherit">
<connections>
<constraint x="0.5" y="0" perimeter="0" name="N"/>
<constraint x="0.5" y="1" perimeter="0" name="S"/>
<constraint x="0" y="0.5" perimeter="0" name="W"/>
<constraint x="1" y="0.5" perimeter="0" name="E"/>
<constraint x="0" y="0" perimeter="0" name="NW"/>
<constraint x="1" y="0" perimeter="0" name="NE"/>
<constraint x="1" y="1" perimeter="0" name="SE"/>
<constraint x="0" y="1" perimeter="0" name="SW"/>
</connections>
<background>
<strokecolor color="#000000"/>
<fillcolor color="#ffffff"/>
<rect h="200" w="200" x="0" y="11"/>
</background>
<foreground>
<fillstroke/>
<save/>
<save/>
<save/>
<save/>
<save/>
<save/>
<save/>
<dashpattern pattern="2 2"/>
<dashed dashed="1"/>
<rect h="150" w="150" x="25" y="36"/>
<stroke/>
<strokecolor color="#ff0000"/>
<strokewidth width="4"/>
<linejoin join="round"/>
<linecap cap="round"/>
<dashpattern pattern="5 5"/>
<rect h="100" w="100" x="50" y="61"/>
<stroke/>
<restore/>
<rect/>
<stroke/>
<strokecolor color="#000000"/>
<fillcolor color="none"/>
<strokewidth width="5"/>
<alpha alpha="0.25"/>
<path>
<move x="0" y="11"/>
<line x="200" y="211"/>
</path>
<stroke/>
<restore/>
<rect/>
<stroke/>
<strokecolor color="#000000"/>
<fillcolor color="none"/>
<dashpattern pattern="2 5"/>
<dashed dashed="1"/>
<path>
<move x="200" y="11"/>
<line x="0" y="211"/>
</path>
<stroke/>
<restore/>
<rect/>
<stroke/>
<strokecolor color="#000000"/>
<fillcolor color="none"/>
<ellipse h="150" w="150" x="25" y="36"/>
<stroke/>
<fillcolor color="#66ff66"/>
<alpha alpha="0.5"/>
<ellipse h="100" w="100" x="50" y="61"/>
<fillstroke/>
<restore/>
<rect/>
<stroke/>
<strokecolor color="#000000"/>
<fillcolor color="none"/>
<ellipse h="25" w="200" x="0" y="186"/>
<stroke/>
<ellipse h="200" w="25" x="0" y="11"/>
<stroke/>
<path>
<move x="150" y="55"/>
<line x="50" y="55"/>
<line x="100" y="11"/>
<close/>
</path>
<stroke/>
<path>
<move x="180" y="36"/>
<line x="180" y="61"/>
</path>
<stroke/>
<strokewidth width="2"/>
<linecap cap="round"/>
<path>
<move x="185" y="36"/>
<line x="185" y="111"/>
</path>
<stroke/>
<restore/>
<rect/>
<stroke/>
<strokecolor color="#000000"/>
<fillcolor color="none"/>
<strokewidth width="3"/>
<alpha alpha="0.5"/>
<path>
<move x="190" y="36"/>
<line x="190" y="161"/>
</path>
<stroke/>
<restore/>
<rect/>
<stroke/>
<strokecolor color="#000000"/>
<fillcolor color="none"/>
<strokewidth width="4"/>
<dashpattern pattern="5 5"/>
<dashed dashed="1"/>
<path>
<move x="195" y="36"/>
<line x="195" y="186"/>
</path>
<stroke/>
<restore/>
<rect/>
<stroke/>
<strokecolor color="#000000"/>
<fillcolor color="none"/>
<path>
<move x="26" y="22.75"/>
<curve x1="26" x2="35.25" x3="41.5" y1="22.75" y2="0" y3="22.25"/>
<curve x1="47.75" x2="55.25" x3="56.75" y1="44.5" y2="27.5" y3="20.25"/>
<curve x1="58.25" x2="62.75" x3="75.75" y1="13" y2="21.5" y3="21"/>
<curve x1="88.75" x2="83.5" x3="69.25" y1="20.5" y2="23.25" y3="30"/>
</path>
<stroke/>
<path>
<move x="122.5" y="21.5"/>
<curve x1="130.25" x2="138.5" x3="138.25" y1="23.25" y2="10.5" y3="17.5"/>
<curve x1="138" x2="156" x3="149.25" y1="24.5" y2="12.5" y3="17"/>
<curve x1="142.5" x2="167.75" x3="163.75" y1="21.5" y2="24" y3="18.75"/>
<curve x1="159.75" x2="180.75" x3="177" y1="13.5" y2="11.5" y3="14.25"/>
<curve x1="173.25" x2="166.5" x3="172.75" y1="17" y2="30.5" y3="26.25"/>
<curve x1="179" x2="178.5" x3="172.5" y1="22" y2="29.5" y3="31.25"/>
<curve x1="166.5" x2="149.25" x3="151.5" y1="33" y2="35.25" y3="31.5"/>
</path>
<stroke/>
<strokecolor color="#0033cc"/>
<fillcolor color="#00ffff"/>
<path>
<move x="8" y="57"/>
<line x="16.25" y="76"/>
<line x="9.75" y="87.5"/>
<line x="17" y="95.75"/>
<line x="20" y="91"/>
<line x="20.75" y="101.5"/>
<line x="16.75" y="101"/>
<line x="15.5" y="109.75"/>
<line x="8.5" y="105"/>
<line x="6.75" y="111"/>
<line x="2.5" y="84"/>
<line x="9.25" y="76.75"/>
<close/>
</path>
<fillstroke/>
</foreground>
</shape>
|