11527 sujets

JavaScript, DOM et API Web HTML5

Tourner une image avant de la dessiner sur un canvas

Bonjour,

J'essaye (laborieusement) de créer une petite appli web de dessin de circuits électriques simples (précision pour le contexte des noms dans le code). Les composants sont stockés dans un tableau schema et j'ai une fonction qui dessine sur un canvas (double buffer pour la fluidité de l'affichage)

function drawCanvas() {

    // création du double buffer
    const bufferCanvas = document.createElement('canvas');
    bufferCanvas.width = cnv.width;
    bufferCanvas.height = cnv.height;
    const bufferCtx = bufferCanvas.getContext('2d');

    // Effacer le buffer avant de dessiner les nouvelles images
    bufferCtx.clearRect(0, 0, bufferCanvas.width, bufferCanvas.height);

    // Parcourir chaque objet du tableau schema
    let nImg = 0;
    const totImg = schema.length;
    
    if (totImg == 0) {
        ctxFond.clearRect(0, 0, fond.width, fond.height);
        // quand il ne reste rien parce que l'on a supprimé le dernier composant
    }
    
    schema.forEach(item => {
        const img = new Image();  // Créer un nouvel objet Image
        img.src = item.image;     // Définir la source de l'image

        // Une fois l'image chargée, la dessiner aux coordonnées (x, y) dans le buffer
        img.onload = function() {
        
            bufferCtx.drawImage(img, item.x, item.y);
            nImg++;            
            
                if (nImg === totImg) {
                // Effacer le canvas visible
                ctxFond.clearRect(0, 0, fond.width, fond.height);
                // Dessiner le buffer sur le canvas visible
                ctxFond.drawImage(bufferCanvas, 0, 0);
            }
        };
    });
}


Ça marche comme je veux mais maintenant j'ai ajouté un paramètre aux composants : item.rotation (entre 0 et 3 : le nombre de quart de tour dans le sens horaire)

Je n'ai aucune idée de la manière dont je peux tourner img avant de la copier sur le canvas... J'ai trouvé des exemple sur le net pour faire tourner tout le canvas mais pas une image. Pourtant je me dit que ça doit bien être possible Smiley ohwell

Dubitatif je suis.

Est-ce que quelqu'un pourrait me donner un coup de pouce.

(Et puis si le miroir gauche-droite est possible je prend aussi Smiley cligne )

Merci d'avance
Bonsoir,

Intéressant, il faudra que je m'y colle un jour à ces canvas... En attendant voici un lien issu de StackOverflow :
https://stackoverflow.com/questions/17411991/html5-canvas-rotate-image

Vous y trouverez des réponses a priori pertinentes :
function drawImage(image, x, y, scale, rotation) {
    ctx.setTransform(scale, 0, 0, scale, x, y);
    ctx.rotate(rotation);
    ctx.drawImage(image, -image.width / 2, -image.height / 2);
}

Modifié par Olivier C (09 Oct 2024 - 17:46)
Merci pour cette piste, je n'ai pas trop le temps d'avancer pour le moment mais j'ai au moins compris pourquoi je n'avais pas compris. C'est déjà ça...
En fait il ne faut pas chercher à manipuler l'image source mais un canvas temporaire sur lequel on l'aura dessiné avent de le copier sur le canvas définitif.
Prévenir un modérateur
Répondre au sujet
Aller à