基于包含的HTML元素更新单元格维度（并相应地更新端口的位置）

Question

我正在为一个自定义模型评估JointJS，其中使用HTML元素绘制实体。我想： - 根据HTML内容调整单元格大小（根据HTML更新动态更新大小和端口位置） - 针对某些HTML元素定位端口（基于业务逻辑）。

为清楚起见（下图）：

Answer 1

<强>调整大小：

您需要跟踪复选框列表中的更改，然后手动调整元素大小，例如：

var handleResize = function() {
    element1.prop('size/height', element1.prop('size/height') + 30)
}

<强>端口：

在JointJS v1.0中，有一个用于操作端口及其位置的API。您可以将端口添加到任何形状，例如位置x：10，y：10（相对于元素原点）

 element1.addPort({
        args: {
            x: 10, y: 10
        },
        attrs: {
            circle: {fill: 'red', stroke: '#31d0c6', 'stroke-width': 3, r: 10, magnet: true}
        }
    });

http://jsfiddle.net/vtalas/ahk2no15/

<强>文档：

http://resources.jointjs.com/docs/jointjs/v1.0/joint.html#dia.Element.ports