Come aggiungere un'immagine a un elemento come decoratore?

Question

Immagina di avere un elemento Rect e desidero decorarlo con un'immagine PNG di dimensioni ridotte (ad esempio 16x16) in alto a sinistra. Non sono in grado di determinare come conseguire tale compito. Ho studiato i documenti ma sono (finora) non riuscito a trovare un campione o un riferimento su come ottenere quel compito. Qualcuno ha una ricetta o un puntatore di esempio che sarebbero disposti a condividere per aiutarmi a raggiungere il mio obiettivo?

Answer 1

È meglio creare una forma personalizzata con rettangolo, immagine e testo. Questo ti dà molta più flessibilità e non devi avere due elementi per esprimere una forma. La forma decorata con una piccola immagine in alto a sinistra può apparire come:

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

e si può usare in questo modo nei vostri diagrammi:

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

Si noti come è la forma specifica, l'importante i bit sono markup, type e l'oggetto attrs che fa riferimento agli elementi SVG nel markup dai normali selettori CSS (qui basta taggare i selettori ma è possibile utilizzare le classi se lo si desidera). Per il tag immagine, sfruttiamo gli attributi speciali JointJS per il posizionamento relativo (ref, ref-x e ref-y). Con questi attributi, posizioniamo l'immagine relativamente all'angolo in alto a sinistra dell'elemento rect e lo sfalsiamo di 2px dal bordo superiore (ref-y) e 2px dal bordo sinistro (ref-x).

Una nota: è importante che l'attributo type ('basic.DecoratedRect') corrisponda allo spazio dei nomi definito in forma (joint.shapes.basic.DecoratedRect). Questo perché quando JointJS ricostruisce i grafici da JSON, esamina l'attributo type e fa una semplice ricerca nello spazio dei nomi joint.shapes per vedere se esiste una forma definita per questo tipo.

Answer 2

possiamo creare un tipo di elemento di un'immagine utilizzando la seguente ricetta:

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

Questo posizionerà l'immagine in x = 100, y = 100. È importante che la larghezza/altezza delle dimensioni corrisponda a attrs/larghezza/altezza dell'immagine e sia la larghezza/altezza dell'immagine stessa.

Anche se questo non decorare un elemento precedente, può essere posizionato su un elemento precedente ottenendo l'effetto desiderato.