JointJS 单击添加端口

Question

我希望在单击类似端口的“添加”按钮时以编程方式在 JointJS 中添加半圆端口，如下所示: mockup

我已经创建了基本端口，看起来我可以使用 element.addPort(port, [opt]) 但我不确定如何触发矩形元素内的单击事件来添加端口。添加按钮和端口的样式也是我仍在尝试使用 Joint 重新创建的样式。

Answer 1

按照以下步骤操作应该会对您有所帮助:

1. 首先，您必须创建一个带有自定义 HTML 的元素。您可以通过扩展 joint.shapes.devs.Model 来实现它。您可以在这里找到有关它的精彩教程:http://resources.jointjs.com/tutorial/html-elements
2. 然后您必须定义自定义端口，如下所述:https://stackoverflow.com/a/31650340/4109477 (提示:半圆的 SVG 路径为: d="M100,100 a20,20 0 0,0 40,0")
3. 最后，当您单击自定义 HTML 元素中的按钮时，您只需调用 element.addPort(port, [opt]) 函数。

希望有帮助。