JointJS点击添加端口

Question

我希望在点击类似端口的时候以编程方式在JointJS中添加半圆端口＆＃34;添加＆＃34;按钮，如下： 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 =＆＃34; M100,100 a20,20 0 0,0 40,0＆＃34;）
3. 最后，当您单击自定义HTML元素中的按钮时，您只需调用 element.addPort（port，[opt]）函数。

希望它有所帮助。