点击JointJS添加端口

Question

我希望在点击类似端口的“添加”按钮时，以编程方式在JointJS中添加半圆端口，如下所示：模拟模型

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

Answer 1

遵循这些步骤将对您有所帮助：

1. 首先，您必须在上创建一个具有自定义的元素。您可以通过扩展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，0，0，0，0，0，0，0，0，0，0，0，0，0，0，0，0，0，0，0，0，0，0，0，0，0，0，0，0，0，0，0，0，0，0，0，0，0，0，0，0，0，0，0，0，0，0，0，0，0，0，0，0，0，0，0，0，0，0，0，0，0，0，0，0，0，0，0，0，0，0，0，0，0，0，0，0，0，0
3. 最后，当单击自定义HTML元素中的按钮时，只需调用element.addPort(端口，opt) 函数即可。

希望能帮上忙。