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元素大小

1 个答案: