Afbeeldingsaanpassingsmodi

Een imagePath-knooppunt tekent een afbeelding, maar hoe de afbeelding op de vorm wordt geplaatst, is aan de bovenkant voor jou — stel imageFit in (een waarde, of een (node) => … zodat verschillende knooppunten kunnen verschillen). Hier wordt één landschapsscreenshot op drie manieren weergegeven op identieke vierkanten, een vierde vierkant waarvan de bron ontbreekt (om de terugval weer te geven), en een 'frame' knooppunt eronder dat de eigen vorm van de afbeelding aanneemt:

'icon' (standaard) — een kleine afbeelding (~1,2× size) gecentreerd op de vorm, aspect behouden. Dit is de oude look; de gekleurde vorm is eromheen zichtbaar, dus een afbeelding wordt gelezen als een icon naast andere icon-class knooppunten.
'cover' — de afbeelding vult het vak van de vorm (2× size) en wordt bijgesneden tot behoudt de beeldverhouding. Een schoongevulde miniatuur waarvan de streek als een dunne lijn leest rand — geschikt voor knooppunten voor screenshot/bijlage.
'contain' — de hele afbeelding past in de doos, brievenbus; de vorm color wordt weergegeven in de balken voor niet-vierkante afbeeldingen.
'frame' — het knooppunt wordt de afbeelding: deze wordt aangepast aan het eigen aspect van de afbeelding verhouding (langste zijde = 2× size), zodat de hele schermafbeelding op volledige resolutie wordt weergegeven met de streek eromheen - geen gewas, geen brievenbusbalken. shape wordt genegeerd (de afbeelding is het knooppunt). Ideaal voor voorbeelden van screenshots/bijlagen.

Wanneer de bron van een afbeelding niet kan worden geladen, wordt het knooppunt omgezet in een doorgestreepte afbeelding tijdelijke aanduiding in plaats van de glyph met gebroken afbeeldingen van de browser - zie het vierde vierkant, wiens imagePath punten nergens. Dezelfde sierlijke terugval verschijnt overal op de foto anders zou verschijnen: het hover-voorbeeld, de tooltip en de lightbox met volledige resolutie.

Omdat het per knooppunt wordt opgelost, kan één grafiek modi combineren: schermafbeeldingen 'frame' of 'cover', andere bijlagen 'icon' — rechtstreeks uit de gegevens van het knooppunt. Groeien size schaalt de afbeelding proportioneel, zodat de relatieve rand hetzelfde blijft – geen vaste inzet.

OptiesGegevens

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

Afbeeldingsaanpassingsmodi ​

Afbeeldingsaanpassingsmodi