Modos de ajuste de imagem

Um nó imagePath desenha uma imagem, mas como a imagem fica na forma depende de você - defina imageFit (um valor ou (node) => … para que nós diferentes possam ser diferentes). Aqui, uma captura de tela de paisagem é renderizada de três maneiras em quadrados idênticos, um quarto quadrado cuja fonte está faltando (para mostrar o substituto) e um nó 'frame' abaixo que assume a própria forma da imagem:

'icon' (padrão) — uma imagem pequena (~1,2× size) centralizada na forma, aspecto preservado. Este é o visual legado; a forma colorida aparece ao seu redor, então uma imagem é lida como um icon ao lado de outros nós de classe de ícone.
'cover' — a imagem preenche a caixa da forma (2× size) e é cortada para preservar sua proporção. Uma miniatura bem preenchida cujo traço parece uma borda fina - adequada para nós de captura de tela/anexo.
'contain' — a imagem inteira cabe dentro da caixa, em formato letterbox; o color da forma aparece nas barras para imagens não quadradas.
'frame' — o nó torna-se a imagem: é dimensionado de acordo com a proporção da própria imagem (lado mais longo = 2× size), então toda a captura de tela é exibida em resolução máxima com o traço abraçando-a — sem corte, sem barras de caixa de correio. shape é ignorado (a imagem é o nó). Ideal para visualizações de capturas de tela/anexos.

Quando a fonte de uma imagem não pode ser carregada, o nó é degradado para um espaço reservado para imagem riscada em vez do glifo de imagem quebrada do navegador - veja o quarto quadrado, cujo imagePath não aponta para lugar nenhum. O mesmo substituto elegante aparece em todos os lugares que a imagem seria exibida: a visualização instantânea, a dica de ferramenta e a caixa de luz de resolução total.

Como é resolvido por nó, um gráfico pode misturar modos — capturas de tela 'frame' ou 'cover', outros anexos 'icon' — diretamente dos dados do nó. Aumentar size dimensiona a imagem proporcionalmente, de modo que a borda relativa permanece a mesma — sem inserção fixa.

OpçõesDados

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

Modos de ajuste de imagem ​

Modos de ajuste de imagem