Bagaimana untuk Mensimulasikan CSS `saiz latar belakang: penutup` dalam Kanvas?

Mensimulasikan Saiz Latar Belakang CSS: Penutup dalam Kanvas

Lukisan kanvas melibatkan pemaparan imej pada konteks 2D. Walau bagaimanapun, apabila melukis imej menggunakan kaedah drawImage(), anda mungkin menghadapi masalah dengan regangan atau herotan imej. Ini boleh diatasi dengan mensimulasikan saiz latar belakang sifat CSS: penutup, yang menskalakan imej sambil mengekalkan nisbah aspeknya agar muat dalam dimensi yang diingini.

Satu kaedah untuk mencapai gelagat ini dalam kanvas adalah melalui fungsi berikut :

function drawImageProp(ctx, img, x, y, w, h, offsetX, offsetY) {

    // Default arguments and validation
    if (arguments.length === 2) {
        x = y = 0;
        w = ctx.canvas.width;
        h = ctx.canvas.height;
    }
    offsetX = typeof offsetX === "number" ? offsetX : 0.5;
    offsetY = typeof offsetY === "number" ? offsetY : 0.5;

    // Image dimensions and aspect ratio
    var iw = img.width,
        ih = img.height,
        r = Math.min(w / iw, h / ih),
        nw = iw * r,   // New proposed width
        nh = ih * r,   // New proposed height
        cx, cy, cw, ch, ar = 1;

    // Determine image scaling factor
    if (nw < w) ar = w / nw;                             
    if (Math.abs(ar - 1) < 1e-14 && nh < h) ar = h / nh;  // Updated

    nw *= ar;
    nh *= ar;

    // Calculate source rectangle
    cw = iw / (nw / w);
    ch = ih / (nh / h);

    cx = (iw - cw) * offsetX;
    cy = (ih - ch) * offsetY;

    // Validate source rectangle
    if (cx < 0) cx = 0;
    if (cy < 0) cy = 0;
    if (cw > iw) cw = iw;
    if (ch > ih) ch = ih;

    // Draw the image to the destination rectangle
    ctx.drawImage(img, cx, cy, cw, ch,  x, y, w, h);
}

Fungsi ini boleh digunakan seperti berikut:

drawImageProp(ctx, image, 0, 0, width, height);

Ini akan menskalakan imej berkadar untuk muat dalam dimensi lebar dan ketinggian yang disediakan. Parameter offsetX dan offsetY pilihan membenarkan pengimbangan imej dalam segi empat tepat destinasi.

Atas ialah kandungan terperinci Bagaimana untuk Mensimulasikan CSS `saiz latar belakang: penutup` dalam Kanvas?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!