动态 JointJS 元素大小

Question

除了创建您自己的自定义 HTML 元素之外，是否有办法让元素（例如，矩形）的大小取决于您在其中存储的内容。例如，如果我想显示 Foo，则元素很小，但对于 This is a really long string，元素会大得多。这是否可以在不创建自定义元素的情况下实现？

Answer 1

这就是您使用自定义元素模型的方式。

如果下面是您的元素模型，（请注意它具有固定的宽度和高度）

joint.shapes.custom.CustomElement = joint.shapes.devs.Model.extend({
defaults: joint.util.deepSupplement({
    type: 'custom.CustomElement',
    position: { x: 300, y: 50 },
    size: { width: 90, height: 90 },
}, joint.shapes.devs.Model.prototype.defaults) });

假设你在实例化时设置元素的标签，你可以按照下面的方法，

var label = "My Element Label";
var elem = new joint.shapes.custom.CustomElement({
    size: { width: label.length*12, height: 80 },
    attrs: {
        '.label': {text: label}
    }
});

graph.addCell(elem);

这里的宽度是length of label * (font size of label in pixel)，高度是固定的

但由于您不想创建自定义模型，因此在创建元素（模型实例）后，您可以在将其添加到图表之前设置以下属性。

var label = "my custom label";
var elem = // create your element
elem.attributes.size.width = label.lenght*12
graph.adddCell(elem)

动态 JointJS 元素大小

Dynamic JointJS element size

javascript

jointjs