Modos de ajuste de imagen

Un nodo imagePath dibuja una imagen, pero la forma en que la imagen se ubica en la forma depende para usted: establezca imageFit (un valor o un (node) => … para que diferentes nodos puedan diferir). Aquí una captura de pantalla de paisaje se representa de tres maneras en cuadrados idénticos, una cuarta cuadrado cuya fuente falta (para mostrar el respaldo) y un nodo 'frame' debajo que toma la forma propia de la imagen:

'icon' (predeterminado) — una imagen pequeña (~1,2× size) centrada en la forma, Aspecto conservado. Este es el aspecto heredado; la forma coloreada se muestra a su alrededor, por lo que una imagen se lee como un icono junto con otros nodos de clase de íconos.
'cover': la imagen llena el cuadro de la forma (2× size) y se recorta para conservar su relación de aspecto. Una miniatura limpia y rellena cuyo trazo se lee como una delgada borde: el ajuste para los nodos de captura de pantalla/adjuntos.
'contain': la imagen completa cabe dentro de la caja, en formato tipo buzón; la forma color se muestra en las barras de las imágenes que no son cuadradas.
'frame' — el nodo se convierte en la imagen: tiene el tamaño del propio aspecto de la imagen relación (lado más largo = 2× size), por lo que toda la captura de pantalla se muestra en resolución completa con el trazo abrazándolo: sin recortes, sin barras tipo buzón. shape se ignora (el la imagen es el nodo). Ideal para vistas previas de capturas de pantalla/adjuntos.

Cuando la fuente de una imagen no se puede cargar, el nodo se degrada a una imagen tachada marcador de posición en lugar del glifo de imagen rota del navegador: vea el cuarto cuadrado, cuyo imagePath no apunta a ninguna parte. El mismo elegante retroceso aparece en todas partes de la imagen. De lo contrario, se mostraría: la vista previa al pasar el mouse, la información sobre herramientas y la caja de luz de resolución completa.

Debido a que se resuelve por nodo, un gráfico puede mezclar modos: capturas de pantalla 'frame' o 'cover', otros archivos adjuntos 'icon': directamente de los datos del nodo. Creciendo size escala la imagen proporcionalmente, por lo que el borde relativo permanece igual, sin recuadros fijos.

OpcionesDatos

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 imagen ​

Modos de ajuste de imagen