1

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

BPMN 通用 -> 消息流 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;

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

4

3 回答 3

3

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

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

到想要的那个。说，一个等距立方体：

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

在此处输入图像描述

新对象将保留您描述的行为。然后只需将其移至暂存器，您就可以将其中的一堆导出为库。

于 2021-04-12T22:23:47.120 回答
1

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

问候，

于 2020-05-11T08:49:17.860 回答
1

这是可能的，但我不知道这样做的干净方式。要了解如何Message Flow 2工作，您可以查看代码：

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（您可以在 menu 中找到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>
...

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

  1. 内部对象必须将箭头对象设置为其父对象。Edit Diagram除了 js 代码或直接在对话框中更改之外，我不知道有什么方法可以做到这一点。
  2. 几何必须是相对的。这可以通过Edit Diagram对话框或Edit -> Edit Geometry选项来设置。
于 2020-05-11T19:16:43.503 回答