1

次のような基本的な Rect 形状があります。

  var rectShape = new joint.shapes.basic.Rect({
  position: { x: 60, y: 10 },
  size: { width: 160, height: 35 },
  attrs: {
    rect: {
        fill: '#F5F5F5'
    },
    text: {
        fill: '#FC8A26',
        'font-size': 12,
        'font-weight': 'bold',
        'font-variant': 'small-caps'
    }
  }
 });

私はclone()そのような長方形をさらに作成するために使用します：

var rect1 = rectShape.clone().translate(520, 10).attr('text/text','rect1');

Rect 内にサイズ 12 とサイズ 8 の 2 つの異なる単語を入れたいと思います。どのようにすればよいでしょうか?

ありがとうございました！

4

1 に答える 1

2

必要な<tspan>for each 単語を含むテキスト要素を含む新しい SVG マークアップを使用して、カスタム シェイプを作成する必要があります。標準の Rect 要素からマークアップを適合させることができます。各要素に異なるクラス名を付けます。たとえば<text/>、Rect マークアップの要素を に 置き換え<text><tspan class="word1"/><tspan class="word2"/></text>ます。形状の定義は次のようになります。

joint.shapes.my.twoTextRect = joint.shapes.basic.Generic.extend({

    markup: '<g class="rotatable"><g class="scalable"><rect/></g><text><tspan class="word1"></tspan> <tspan class="word2"></tspan></text></g>',

    defaults: joint.util.deepSupplement({

        type: 'my.twoTextRect',
        attrs: {
            rect: { fill: 'white', stroke: 'black', 'stroke-width': 1, 'follow-scale': true, width: 160, height: 35 },
            text: { ref: 'rect' },
            '.word1': { 'font-size': 12 },
            '.word2': { 'font-size': 8 }

        },
        size: { width: 160, height: 35 }
    }, joint.shapes.basic.Generic.prototype.defaults)
});

次に、シェイプ インスタンスを作成します。

  var rectShape = new joint.shapes.my.twoTextRect();

<tspan>使用できるSVG要素のテキストを設定するには

rectShape.attr('.word1/text', 'word 1');
rectShape.attr('.word2/text', 'word 2');

これにより、次のような要素が得られます。

サイズの異なる 2 つの単語を含む四角形

次のように要素を複製できます。

var clone = rectShape.clone().translate(520, 10).attr({'.word1': {text: 'clone1'}, '.word2': {text: 'clone2' }});

これにより、新しい要素が作成されます。

複製された長方形

于 2015-04-10T11:23:18.787 に答える