Simulation de la taille de l'arrière-plan CSS : couverture dans Canvas
Le dessin sur toile implique le rendu d'images dans un contexte 2D. Cependant, lorsque vous dessinez des images à l'aide de la méthode drawImage(), il est possible de rencontrer des problèmes d'étirement ou de distorsion de l'image. Ce problème peut être résolu en simulant la propriété CSS background-size: cover, qui redimensionne l'image tout en préservant ses proportions pour l'adapter aux dimensions souhaitées.
Une méthode pour obtenir ce comportement dans Canvas consiste à utiliser la fonction suivante. :
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); }
Cette fonction peut être invoquée comme suit :
drawImageProp(ctx, image, 0, 0, width, height);
Cela mettra l'image à l'échelle proportionnellement pour l'adapter aux dimensions de largeur et de hauteur fournies. Les paramètres facultatifs offsetX et offsetY permettent le décalage de l'image dans le rectangle de destination.
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!