图像适配模式

imagePath 节点绘制图片，但图片如何位于形状上取决于您 - 设置 imageFit（一个值，或 (node) => …，因此不同的节点可能不同）。这里，一张风景截图在相同的方块上以三种方式渲染，第四个方块的源丢失（以显示后备），下面的 'frame' 节点采用图片自己的形状：

'icon' （默认） — 一张以形状为中心的小图片 (~1.2× size)，保留方面。这是传统的外观；彩色形状显示在其周围，因此图片与其他图标类节点一起读取为 icon。
'cover' — 图片填充形状的框 (2× size) 并被裁剪以保留其纵横比。一个干净的填充缩略图，其笔划读取为细边框 - 适合屏幕截图/附件节点。
'contain' — 整个图片适合放入盒子内，信箱式；对于非方形图像，形状的 color 显示在条中。
'frame' — 节点变成图片：它的大小适合图像自身的长宽比（最长边 = 2× size），因此整个屏幕截图以全分辨率显示，笔画拥抱它 — 没有裁剪，没有信箱栏。 shape被忽略（图片为节点）。非常适合屏幕截图/附件预览。

当无法加载图片源时，节点会降级为划掉的图片占位符，而不是浏览器的损坏图像字形 - 请参阅第四个方块，其 imagePath 指向任何地方。同样优雅的回退出现在图片显示的所有地方：悬停预览、工具提示和全分辨率灯箱。

因为它解析每个节点，所以一个图表可以混合模式 - 屏幕截图 'frame' 或 'cover'，其他附件 'icon' - 直接来自节点的数据。增大 size 会按比例缩放图片，因此相对边框保持不变 - 没有固定的插图。

选项数据

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

图像适配模式 ​

图像适配模式