如何从JointJS中的现有端口绘制链接？

JointJS是一个用于创建图形和图表的JavaScript库。它提供了丰富的功能和工具，使开发者能够轻松地创建交互式图形界面。

要从JointJS中的现有端口绘制链接，可以按照以下步骤操作：

1. 创建一个JointJS图形画布（paper）并定义画布的宽度和高度。
2. 创建一个JointJS图形元素（element），可以使用Element构造函数来创建一个元素对象。为元素设置属性，如位置、大小、样式等。
3. 创建图形元素的端口（port），可以使用Element的addPort方法来创建一个端口。可以为端口设置不同的属性，如位置、样式等。
4. 在两个元素之间创建连接线（link），可以使用Link构造函数来创建连接对象。为连接设置属性，如起点端口、终点端口、样式等。
5. 通过调用画布的addCell方法，将元素和连接添加到画布中进行显示。

下面是一个示例代码，演示如何从JointJS中的现有端口绘制链接：

// 创建画布
var paper = new joint.dia.Paper({
  el: '#paper',
  width: 800,
  height: 600,
  model: graph
});

// 创建图形元素
var rect = new joint.shapes.standard.Rectangle();
rect.position(100, 100);
rect.resize(100, 60);

// 创建元素的端口
var port1 = rect.addPort({ group: 'out' });
var port2 = rect.addPort({ group: 'in' });

// 创建连接线
var link = new joint.dia.Link({
  source: { id: rect.id, port: port1.id },
  target: { id: rect.id, port: port2.id }
});

// 将元素和连接添加到画布
graph.addCell(rect);
graph.addCell(link);

在上述示例代码中，通过创建一个矩形元素（Rectangle）并定义其位置和大小。然后使用addPort方法为矩形元素创建两个端口（一个输出端口和一个输入端口）。最后，使用Link构造函数创建一个连接对象，并设置连接的起点和终点为矩形元素的两个端口。最后将元素和连接添加到画布中进行显示。

通过以上步骤，就可以从JointJS中的现有端口绘制链接。这种方法可以用于创建各种类型的图形和图表，如流程图、组织结构图等。