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

时间:2016-10-19 10:24:49

标签: jointjs

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

为清楚起见(下图):

enter image description here

1 个答案:

答案 0 :(得分:0)

<强>调整大小:

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

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