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]) 函数。

希望对你有帮助。