Wie füge ich ein Bild zu einem Element als Dekorateur hinzu?

Question

Stellen Sie sich vor, ich habe Rect Element und ich möchte es mit einem kleinen (etwa 16x16) PNG-Bild in der oberen linken Ecke dekorieren. Ich kann nicht bestimmen, wie ich diese Aufgabe erfüllen soll. Ich habe die Dokumente studiert, bin aber (bis jetzt) ​​nicht in der Lage, eine Probe oder einen Hinweis darauf zu finden, wie ich diese Aufgabe erreichen kann. Hat jemand ein Rezept oder einen Beispielzeiger, den sie teilen würden, um mir zu helfen, mein Ziel zu erreichen?

Answer 1

Besser ist es, Ihre eigene benutzerdefinierte Form mit einem Rechteck, Bild und Text zu erstellen. Dies gibt Ihnen viel mehr Flexibilität und Sie müssen nicht zwei Elemente haben, um eine Form auszudrücken. Ihre Form verziert mit einem kleinen Bild in der linken oberen Ecke kann wie folgt aussehen:

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) 
}); 

Und Sie können es wie folgt verwenden in Ihren Diagrammen:

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); 

Beachten Sie, wie ist die Form angegeben, die wichtigen Bits sind das markup, type und das attrs Objekt, das auf die SVG-Elemente im Markup durch normale CSS-Selektoren verweist (hier nur Tagselektoren, aber Sie können Klassen verwenden, wenn Sie möchten). Für das Image-Tag nutzen wir die speziellen JointJS-Attribute für die relative Positionierung (ref, ref-x und ref-y). Mit diesen Attributen positionieren wir das Bild relativ zur oberen linken Ecke des Elements rect und versetzen es um 2 Pixel von der oberen Kante (ref-y) und 2 Pixel von der linken Kante (ref-x).

Ein Hinweis: Es ist wichtig, dass das Attribut type ('basic.DecoratedRect') mit dem Namensraum übereinstimmt, in dem die Form definiert ist (joint.shapes.basic.DecoratedRect). Dies liegt daran, dass JointJS, wenn er Graphen aus JSON neu konstruiert, das type-Attribut betrachtet und eine einfache Suche im Namespace joint.shapes durchführt, um festzustellen, ob für diesen Typ eine Form definiert ist.

Answer 2

Wir können einen Elementtyp für ein Bild erstellen, das folgende Rezept verwendet:

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); 

bei x = 100, y = 100 Damit wird das Bild positionieren. Es ist wichtig, dass die Größe Breite/Höhe mit der Höhe/Breite/Höhe und der Breite/Höhe des Bildes übereinstimmt.

Obwohl dies kein vorheriges Element schmückt, kann es über einem vorherigen Element positioniert werden, um den gewünschten Effekt zu erzielen.