动态JointJS元素大小

Dynamic JointJS element size

本文关键字：元素 JointJS 动态      更新时间：2023-09-26

除了创建自己的自定义HTML元素外，有没有一种方法可以让元素（比如矩形）的大小取决于你在其中存储的内容。例如，如果我想显示Foo，那么元素很小，但对于This is a really long string，元素会大得多。这在不创建自定义元素的情况下可行吗？

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

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

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)
相关文章：