Bildanpassungsmodi

Ein imagePath-Knoten zeichnet ein Bild, aber wie das Bild auf der Form sitzt, liegt bei Ihnen – legen Sie imageFit fest (einen Wert oder einen (node) => …, damit verschiedene Knoten unterschiedlich sein können). Hier wird ein Landschafts-Screenshot auf drei Arten auf identischen Quadraten gerendert, einem vierten Quadrat, dessen Quelle fehlt (um den Fallback zu zeigen), und einem 'frame'-Knoten darunter, der die eigene Form des Bildes annimmt:

'icon' (Standard) – ein kleines Bild (~1,2× size), zentriert auf die Form, Aspekt beibehalten. Dies ist der Legacy-Look; Die farbige Form wird darum herum angezeigt, sodass ein Bild als Symbol neben anderen Knoten der Symbolklasse gelesen wird.
'cover' – das Bild füllt das Feld der Form aus (2× size) und wird zugeschnitten, um sein Seitenverhältnis beizubehalten. Ein sauber ausgefülltes Miniaturbild, dessen Strich als dünner Rand aussieht – passend für Screenshot-/Anhangsknoten.
'contain' – das gesamte Bild passt in den Briefkasten; Die color der Form wird in den Balken für nicht quadratische Bilder angezeigt.
'frame' – der Knoten wird zum Bild: Die Größe entspricht dem Seitenverhältnis des Bildes (längste Seite = 2× size), sodass der gesamte Screenshot in voller Auflösung angezeigt wird, wobei der Strich ihn umschließt – kein Zuschneiden, keine Letterbox-Balken. shape wird ignoriert (das Bild ist der Knoten). Ideal für die Vorschau von Screenshots/Anhängen.

Wenn die Quelle eines Bildes nicht geladen werden kann, wird der Knoten zu einem Platzhalter für ein durchgestrichenes Bild und nicht zum unterbrochenen Bildsymbol des Browsers degradiert – siehe das vierte Quadrat, dessen imagePath nirgendwo hinzeigt. Derselbe elegante Fallback erscheint überall dort, wo das Bild sonst angezeigt würde: in der Hover-Vorschau, im Tooltip und im Leuchtkasten in voller Auflösung.

Da die Auflösung pro Knoten erfolgt, kann ein Diagramm Modi mischen – Screenshots 'frame' oder 'cover', andere Anhänge 'icon' – direkt aus den Daten des Knotens. Durch Vergrößern um size wird das Bild proportional skaliert, sodass der relative Rand gleich bleibt – kein fester Einschub.

OptionenDaten

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: []
}

Bildanpassungsmodi ​

Bildanpassungsmodi