6

Rect 要素があり、左上に小さな (たとえば 16x16) PNG 画像を飾りたいとします。そのタスクを達成する方法を判断できません。私はドキュメントを調べましたが、(これまでのところ) そのタスクを達成する方法に関するサンプルやリファレンスを見つけることができませんでした。私の目標を達成するために喜んで共有できるレシピやサンプルポインターを誰かが持っていますか?

4

2 に答える 2

16

四角形、画像、テキストを含む独自のカスタム シェイプを作成することをお勧めします。これにより、柔軟性が大幅に向上し、1 つの形状を表現するために 2 つの要素を用意する必要がなくなります。左上隅に小さな画像で装飾された形状は、次のようになります。

joint.shapes.basic.DecoratedRect = joint.shapes.basic.Generic.extend({

    markup: '<g class="rotatable"><g class="scalable"><rect/></g><image/><text/></g>',

    defaults: joint.util.deepSupplement({

        type: 'basic.DecoratedRect',
        size: { width: 100, height: 60 },
        attrs: {
            'rect': { fill: '#FFFFFF', stroke: 'black', width: 100, height: 60 },
            'text': { 'font-size': 14, text: '', 'ref-x': .5, 'ref-y': .5, ref: 'rect', 'y-alignment': 'middle', 'x-alignment': 'middle', fill: 'black' },
            'image': { 'ref-x': 2, 'ref-y': 2, ref: 'rect', width: 16, height: 16 }
        }

    }, joint.shapes.basic.Generic.prototype.defaults)
});

そして、ダイアグラムで次のように使用できます。

var decoratedRect = new joint.shapes.basic.DecoratedRect({
    position: { x: 150, y: 80 },
    size: { width: 100, height: 60 },
    attrs: { 
        text: { text: 'My Element' },
        image: { 'xlink:href': 'http://placehold.it/16x16' }
    }
});
graph.addCell(decoratedRect);

形状がどのように指定されているかに注意してください。重要なビットは、markup通常の CSS セレクター (ここではタグ セレクターですが、必要に応じてクラスを使用できます) によってマークアップ内の SVG 要素を参照するオブジェクトですtype。attrs画像タグについては、相対的な配置のために JointJS の特別な属性 ( ref、ref-xおよびref-y) を利用します。rectこれらの属性を使用して、要素の左上隅に対して相対的に画像を配置し、上端から 2 ピクセル ( ref-y) および左端から 2 ピクセル( ) オフセットしref-xます。

1 つの注意:type属性 ('basic.DecoratedRect') が、形状が ( joint.shapes.basic.DecoratedRect) で定義されている名前空間と一致することが重要です。これは、JointJS が JSON からグラフを再構築するときに、type属性を調べて名前空間を簡単に検索し、joint.shapesこのタイプに定義された形状があるかどうかを確認するためです。

于 2014-11-14T20:12:04.003 に答える
3

次のレシピを使用して、画像の要素タイプを作成できます。

var image = new joint.shapes.basic.Image({
    position : {
        x : 100,
        y : 100
    },
    size : {
        width : 16,
        height : 16
    },
    attrs : {
        image : {
            "xlink:href" : "images/myImage.png",
            width : 16,
            height : 16
        }
    }
});

graph.addCell(image);

これにより、画像が x=100,y=100 に配置されます。サイズの幅/高さを属性/画像の幅/高さと一致させ、画像自体の幅/高さにすることが重要です。

これは前の要素を装飾しませんが、目的の効果を達成する前の要素の上に配置できます。

于 2014-11-14T04:27:00.177 に答える