Modes d'ajustement de l'image

Un nœud imagePath dessine une image, mais la façon dont l'image se place sur la forme dépend de vous - définissez imageFit (une valeur ou un (node) => … pour que différents nœuds puissent différer). Ici, une capture d'écran en paysage est rendue de trois manières sur des carrés identiques, un quatrième carré dont la source est manquante (pour montrer la solution de repli) et un nœud 'frame' en dessous qui prend la propre forme de l'image :

'icon' (par défaut) — une petite image (~1,2× size) centrée sur la forme, aspect préservé. C'est le look hérité ; la forme colorée apparaît autour d'elle, donc une image se lit comme une icône aux côtés d'autres nœuds de classe d'icônes.
'cover' — l'image remplit la zone de la forme (2× size) et est recadrée pour préserver ses proportions. Une vignette propre et remplie dont le trait se lit comme une fine bordure – idéale pour les nœuds de capture d'écran/pièce jointe.
'contain' — l'image entière tient dans la boîte, en boîte aux lettres ; le color de la forme apparaît dans les barres pour les images non carrées.
'frame' — le nœud devient l'image : il est dimensionné selon le rapport hauteur/largeur de l'image (côté le plus long = 2× size), de sorte que la capture d'écran entière s'affiche en pleine résolution avec le trait qui l'embrasse — pas de recadrage, pas de barres de boîte aux lettres. shape est ignoré (l'image est le nœud). Idéal pour les aperçus de captures d’écran/pièces jointes.

Lorsque la source d'une image ne peut pas être chargée, le nœud se dégrade en un espace réservé d'image barré au lieu du glyphe d'image brisée du navigateur - voir le quatrième carré, dont imagePath ne pointe nulle part. La même solution de secours gracieuse apparaît partout où l'image s'afficherait autrement : l'aperçu au survol, l'info-bulle et la visionneuse pleine résolution.

Parce qu'il se résout par nœud, un graphique peut mélanger les modes — captures d'écran 'frame' ou 'cover', autres pièces jointes 'icon' — directement à partir des données du nœud. L'augmentation de size redimensionne l'image proportionnellement, de sorte que la bordure relative reste la même — pas d'encart fixe.

OptionsDonnées

const options = {
    // Static legend: fx/fy pin the nodes, no forces so nothing drifts.
    simulation: { enabled: false },
    render: {
        defaultNodeStyle: {
            size: 44,
            text: (node) => node.getData()?.name,
            textVerticalShift: -1.6
        }
    }
}

// A landscape raster shared by all nodes so the fit modes differ visibly
// (a square/vector image would make `cover` and `contain` look identical).
const pic = new URL('./sample.png', import.meta.url).href
// A sibling path with no file behind it, to show the missing-image fallback.
// Derived from `pic` at runtime so the build never tries to resolve a missing asset.
const missingPic = new URL('missing.png', pic).href
const data = {
    nodes: [
        { id: 'icon', fx: -285, fy: 0, data: { name: "'icon'" },
          style: { shape: 'square', imagePath: pic, imageFit: 'icon', color: '#f1f5f9' } },
        { id: 'cover', fx: -95, fy: 0, data: { name: "'cover'" },
          style: { shape: 'square', imagePath: pic, imageFit: 'cover',
                   strokeColor: 'rgba(255,255,255,.55)', strokeWidth: 2 } },
        { id: 'contain', fx: 95, fy: 0, data: { name: "'contain'" },
          style: { shape: 'square', imagePath: pic, imageFit: 'contain', color: '#1f2937',
                   strokeColor: 'rgba(255,255,255,.55)', strokeWidth: 2 } },
        // Missing source: the picture can't load, so the node degrades to a
        // crossed-out-picture placeholder instead of a broken-image glyph. The
        // same fallback appears in the hover preview, tooltip and lightbox.
        { id: 'missing', fx: 285, fy: 0, data: { name: 'missing' },
          style: { shape: 'square', imagePath: missingPic, imageFit: 'cover', color: '#1f2937',
                   strokeColor: 'rgba(255,255,255,.55)', strokeWidth: 2 } },
        // 'frame': the node takes the picture's own aspect ratio, so the whole
        // screenshot shows at full resolution with the stroke hugging it — no crop,
        // no letterbox bars. Bigger `size` just makes the framed picture bigger.
        { id: 'frame', fx: 0, fy: 360, data: { name: "'frame'" },
          style: { imagePath: pic, imageFit: 'frame', size: 176,
                   strokeColor: 'rgba(255,255,255,.55)', strokeWidth: 2 } }
    ],
    edges: []
}

Modes d'ajustement de l'image ​

Modes d'ajustement de l'image