أوضاع ملاءمة الصورة

العقدة imagePath ترسم صورة، لكن كيفية تواجد الصورة على الشكل تكون للأعلى لك - اضبط imageFit (قيمة، أو (node) => … بحيث يمكن أن تختلف العقد المختلفة). هنا يتم عرض لقطة شاشة أفقية واحدة بثلاث طرق على مربعات متماثلة، ولقطة رابعة مربع مصدره مفقود (لإظهار البديل)، وعقدة 'frame' أدناه التي تأخذ شكل الصورة الخاص:

• 'icon' (افتراضي) — صورة صغيرة (~1.2× size) تتمحور حول الشكل، الجانب محفوظ. هذه هي النظرة القديمة؛ يظهر الشكل الملون من حوله، لذلك تُقرأ الصورة على أنها أيقونة جنبًا إلى جنب مع العقد الأخرى من فئة الأيقونات.
• '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: []
}