Draw.io

Question

我想创建类似于 draw.io 调色板的 Message Flow 2 箭头的自定义箭头。

提到的箭头中间有一个对象，它们表现得很好；中间对象不会调整大小，它会随着线移动，保持直立等。检查此箭头的样式时，我只看到单个元素，但看不到任何绑定它们的表达式。

箭头：

startArrow=oval;startFill=0;startSize=7;endArrow=block;endFill=0;endSize=10;dashed=1;html=1;strokeWidth=2;align=center;

中间的对象：

shape=message;html=1;outlineConnect=0;

我尝试将箭头与对象组合在一起，但无法达到相同的结果；该组不再表现为箭头。

Answer 1

这是无法仅使用样式更改的内容。由于draw.io是一个开源项目，我建议仔细看看：https://github.com/jgraph/drawio 可能会有帮助。

此致，

Answer 2

这是可能的，但我不知道这样做的干净方法。要了解 Message Flow 2 的工作原理，您可以查看 code:

var edge = new mxCell('', new mxGeometry(0, 0, 0, 0), 'startArrow=oval;startFill=0;startSize=7;endArrow=block;endFill=0;endSize=10;dashed=1;html=1;');
edge.geometry.setTerminalPoint(new mxPoint(0, 0), true);
edge.geometry.setTerminalPoint(new mxPoint(100, 0), false);
edge.geometry.relative = true;
edge.edge = true;

var cell = new mxCell('', new mxGeometry(0, 0, 20, 14), 'shape=message;html=1;outlineConnect=0;');
cell.geometry.relative = true;
cell.vertex = true;
cell.geometry.offset = new mxPoint(-10, -7);
edge.insert(cell);

或图表 XML（您可以在菜单 Extras -> Edit Diagram 中找到）

...
<mxCell id="YzitZNannA--EQJoASZJ-14" value="" style="startArrow=oval;startFill=0;startSize=7;endArrow=block;endFill=0;endSize=10;dashed=1;html=1;" edge="1" parent="1">
  <mxGeometry relative="1" as="geometry">
    <mxPoint x="370" y="160" as="sourcePoint" />
    <mxPoint x="470" y="160" as="targetPoint" />
  </mxGeometry>
</mxCell>
<mxCell id="YzitZNannA--EQJoASZJ-15" value="" style="shape=message;html=1;outlineConnect=0;" vertex="1" parent="YzitZNannA--EQJoASZJ-14">
  <mxGeometry width="20" height="14" relative="1" as="geometry">
    <mxPoint x="-10" y="-7" as="offset" />
  </mxGeometry>
</mxCell>
...

从这里你可以看到两件事：

里面的对象必须将箭头对象设置为它的父对象。除了 js 代码或直接更改 Edit Diagram 对话框之外，我不知道有什么方法可以做到这一点。
几何必须是相对的。这可以通过 Edit Diagram 对话框或 Edit -> Edit Geometry 选项设置。

Answer 3

我知道的最简单的方法就是改变符号的样式（不是箭头的样式），默认情况下是：

shape=message;html=1;outlineConnect=0;

到想要的那个。比如说，一个 等距立方体 :

shape=isoCube2;isoAngle=15;html=1;

新对象将保留您描述的行为。然后只需将它移动到 scratchpad，从那里您可以将其中的一堆导出为库。

Draw.io - 对象在中间的自定义箭头

Draw.io - Custom arrow with object in middle