Question

我正在研究JointJS。我有各种带文字的元素。但是元素的宽度随着文本的增加而增加。我想动态设置元素的大小，使得盒子可以达到最大高度和宽度，并通过文本换行相应地扩展。如果文本os无法放入最大高度和宽度元素，则fontsize可能会动态减少。

我尝试在我的div id中使用style="word-wrap: break-word;"。但是没有效果。

<div id="myholder" style="word-wrap: break-word;"> </div>

我的持有人在JS文件中定义如下： var paper = new joint.dia.Paper({ el: $('#myholder'), width: 1200, height: 700, model: graph }); 我可以采取什么策略？

Answer 1

也可以（如果你不想使用额外的形状）来使用

joint.util.breakText()

效用。它的工作原理如下：

var wraptext = joint.util.breakText('My text here', {
    width: holderElement.size.width,
    height: optionalHeight
});

之后，您可以在创建时将wraptext添加到holderElement作为attrs。像这样：

var holder = joint.shapes.basic.Rect({
    //position, size blablabla
    attrs: {
        text: {
            text: wraptext,
            //text styling
        }
    }
});

我必须说你的持有人是一整篇论文有点奇怪，但你可以用同样的方式使用它，只需在你定义它时放attrs。

Answer 2

要使自动换行工作，您可以使用 joint.shapes.basic.TextBlock 。

现在，要使用TextBlock，您将为＆＃34;内容＆＃34;设置顶级地图条目。（而不是包括＆＃34;文字＆＃34;内部＆＃34; attrs＆＃34; =＆gt;＆＃34;文字＆＃34;地图条目）

    graph.addCell (
            new joint.shapes.basic.TextBlock({
                position: { x:100, y:100 },
                size: { width: 100, height: 100 },
                attrs: { rect: { fill: 'green' }},
                content: "<p style='color:white;'>asdf asdf asdf asdf this needs to word wrap</p>"
        })
    );

正如您所看到的，＆＃34;内容＆＃34; entry可以是原始html，也可以这样呈现。

为了实现这一目标，您的浏览器需要具有SVG ForeignObject支持，而目前大多数浏览器都支持这种支持。要首先检查是否是这种情况，您可以在控制台中运行它：

document.implementation.hasFeature("w3.org/TR/SVG11/feature#Extensibility","1.1")

Answer 3

我创建了一个javascript函数，根据你想要句子包装的形状的行大小和最大大小来包装单词。

如果句子很长，那么函数修剪它并放入3个duts而不是句子的其余部分。

该函数的每一行大小都是＆＃39; \ n＆＃39; （换行符ASCII）。

var sentenceWrapped = function (sentence, lineSize, maxSize) {
    var descriptionTrim = "";
    if (sentence.length + 3 > maxSize) {
        descriptionTrim = sentence.substring(0, maxSize - 3);
        descriptionTrim = descriptionTrim + '...';
    }
    else {
        descriptionTrim = sentence
    }

    var splitSentence = descriptionTrim.match(new RegExp('.{1,' + lineSize + '}', 'g'));
    var sentenceWrapped = "";
    for (i = 0; i < splitSentence.length; i++)
    {
        sentenceWrapped = sentenceWrapped + splitSentence[i] + '\n';
    }
    return sentenceWrapped;
}

LineSize =您想要的每一行的最大字符数你的形状
MaxSize =你想要的最大字符大小形状
句子=你想要塑造的描述

Answer 4

如果您对创建自定义元素感兴趣，可以像这样创建

joint.shapes.devs.Model = joint.shapes.basic.TextBlock.extend（{ 加价：[＆＃39;＆gt;＆＃39;， joint.env.test（＆＃39; svgforeignobject＆＃39;）？＆＃39;＆＃39; ：＆＃39;＆＃39;，
＆＃39;＆＃39;。]加入（＆＃39;＆＃39）， defaults：joint.util.deepSupplement（{ 内容：＆＃39;活动的内容＆＃39; }}）;

在JointJS中自动换行

4 个答案: