IdentifiantMot de passe
Loading...
Mot de passe oubli� ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les r�ponses en temps r�el, voter pour les messages, poser vos propres questions et recevoir la newsletter

JavaScript Discussion :

[canvas] Utiliser la fonction rotate() sur une image


Sujet :

JavaScript

  1. #1
    Membre confirm�
    Homme Profil pro
    Webmaster
    Inscrit en
    D�cembre 2021
    Messages
    81
    D�tails du profil
    Informations personnelles :
    Sexe : Homme
    �ge : 57
    Localisation : France, H�rault (Languedoc Roussillon)

    Informations professionnelles :
    Activit� : Webmaster

    Informations forums :
    Inscription : D�cembre 2021
    Messages : 81
    Par d�faut [canvas] Utiliser la fonction rotate() sur une image
    Salut

    j'ai regard� sur plusieurs lieux pour trouver comment faire tourner une image autour de son centre avec canvas de HTML5, mais c'est toujours la meme m�thode de faire tourner le canvas.
    Moi c'est l'image que je veux tourner pas la surface, car le canvas re�oit aussi d'autres images qui ne doivent pas etre retourn�es.

    j'avais vu une fonction sur gamecreator qui tournait des images (rotate) sans toucher au reste, c'est dommage que canvas le propose pas.

    Le html et javascript ne proposent que le css et le canvas pour faire tourner une image, hors si on touche au canvas �a se r�percute sur les autres images qui sont sur le canvas, c'est en plus dommage de g�rer un canvas juste pour une image, imaginons que j'ai plusieurs munitions qui tournent dans le ciel, je vais pas faire un canvas pour chacune, la gestion de rotate par le canvas c'est pas pratique.
    Et le CSS �a fait pas vraiment programmation jeu, �a fait programmation site internet, et c'est pas fluide en plus.
    C'est dommage, y a des langages de programmation qui proposent la rotation d'images, et une grande pub est faite pour le canvas mais il est pas pratique pour les jeux.
    Je me demande comment font les jeux androids pour avoir plein d'effets de rotation ?

  2. #2
    Membre exp�riment�
    Homme Profil pro
    OoW
    Inscrit en
    Juin 2019
    Messages
    150
    D�tails du profil
    Informations personnelles :
    Sexe : Homme
    �ge : 55
    Localisation : Ukraine

    Informations professionnelles :
    Activit� : OoW

    Informations forums :
    Inscription : Juin 2019
    Messages : 150
    Par d�faut
    \�/
    l'Api canvas te permet d'avoir une ardoise comme terrain de jeu, une image bitmap en quelque sorte ni plus ni moins.

    Moi c'est l'image que je veux tourner pas la surface,
    Lorsque tu dessines une image et que tu souhaites la redessiner plus loin ou en rotation, il te faut effacer la zone et redessiner ton image.

    Peut-�tre devrais-tu montrer le code que tu as pour que quelqu'un puisse t'aider.

    Lecture : Efficient animation for web games

  3. #3
    Membre confirm�
    Homme Profil pro
    Webmaster
    Inscrit en
    D�cembre 2021
    Messages
    81
    D�tails du profil
    Informations personnelles :
    Sexe : Homme
    �ge : 57
    Localisation : France, H�rault (Languedoc Roussillon)

    Informations professionnelles :
    Activit� : Webmaster

    Informations forums :
    Inscription : D�cembre 2021
    Messages : 81
    Par d�faut
    Salut, merci de ta r�ponse, pour le moment je n'ai pas de code ayant besoin de la rotation mais je souhaite en faire un, ce sera un bonhomme vu de dessus comme dans GTA2 et qu'on pourrait tourner selon l'angle qu'on veut, pas seulement les 8 angles, mais sur 360 degr�s.
    Mais il serait affich� sur la m�me surface que d'autres personnages, alors c'est ce qui m'embette avec la rotation du canvas, c'est qu'elle vise tout le canvas, alors que je voudrais seulement tourner l'image du perso principal.

    Merci pour le lien ;=

  4. #4
    Membre Expert
    Avatar de Archim�de
    Homme Profil pro
    Enseignant
    Inscrit en
    Avril 2005
    Messages
    1 644
    D�tails du profil
    Informations personnelles :
    Sexe : Homme
    �ge : 60
    Localisation : France, Charente Maritime (Poitou Charente)

    Informations professionnelles :
    Activit� : Enseignant
    Secteur : Enseignement

    Informations forums :
    Inscription : Avril 2005
    Messages : 1 644
    Par d�faut
    Salut, avec contexte.save() et contexte.restore(), tu dois pouvoir le faire...Apr�s, il faut effacer entre chaque frame avec contexte.clearRect(..... ) pour une animation.

  5. #5
    Membre confirm�
    Homme Profil pro
    Webmaster
    Inscrit en
    D�cembre 2021
    Messages
    81
    D�tails du profil
    Informations personnelles :
    Sexe : Homme
    �ge : 57
    Localisation : France, H�rault (Languedoc Roussillon)

    Informations professionnelles :
    Activit� : Webmaster

    Informations forums :
    Inscription : D�cembre 2021
    Messages : 81
    Par d�faut
    Je te remercie, je ferais surement avec �a, canvas c'est pas la facilit� :/

  6. #6
    Membre Expert
    Avatar de Archim�de
    Homme Profil pro
    Enseignant
    Inscrit en
    Avril 2005
    Messages
    1 644
    D�tails du profil
    Informations personnelles :
    Sexe : Homme
    �ge : 60
    Localisation : France, Charente Maritime (Poitou Charente)

    Informations professionnelles :
    Activit� : Enseignant
    Secteur : Enseignement

    Informations forums :
    Inscription : Avril 2005
    Messages : 1 644
    Par d�faut
    Apr�s, canvas, c'est plut�t simple et efficace seulement c'est du bitmap avec les inconv�nients associ�s...
    J'avais tent� hier un essai de rotation d'une image au centre avec un trait en d�placement horizontal simultan�ment...
    (Si �a peut t'aider pour te montrer que c'est possible) Apr�s j'utilise Snap SVG et peu les m�thodes de canvas...
    Code html : S�lectionner tout - Visualiser dans une fen�tre � part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
     
    <!doctype html>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
    <title>rotation composée</title>
    <style>
      canvas { 
        border: 1px solid black; 
      }
    </style>
    </head>
    <body>
     
    <canvas id="cancan" width="1000" height="500"></canvas>
     
    <script>
    let ctx = document.getElementById("cancan").getContext("2d");
    let image = new Image();
    image.src = "image.png";
     
    const dgTord= Math.PI/180;
    const ctxw=ctx.canvas.width, ctxh=ctx.canvas.height;
    const posx = ctxw / 2, posy = ctxh / 2;
    const pw=6;
     
    const cx=64, cy=64;//centre de ton image
    var angle=0,dx=0;// angle de rotation en degrés et déplacement dx horizontal d'un trait
     
     
    function newframe() {
      draw();
      rotation();
    }
     
    function rotation() {
       angle += dgTord;
       dx++;
    }
     
    function draw() {
      ctx.clearRect(0,0,ctxw,ctxh );
      ctx.lineWidth=pw;
      ctx.beginPath();
      ctx.moveTo(20+dx,posy-pw/2);
      ctx.lineTo(dx,posy-pw/2);
      ctx.stroke();
      ctx.save();
      ctx.translate(posx, posy);
      ctx.rotate(angle);
      ctx.translate(-cx,-cy);
      ctx.drawImage(image,0,0);
      ctx.restore();
    }
     
    setInterval(newframe, 1000/60); 
    </script>
     
    </body>
     
    </html>

    Sinon pour le faire en vectoriel, voici un lien int�ressant :
    https://darchevillepatrick.info/svg/svg20.php

  7. #7
    Mod�rateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    Janvier 2011
    Messages
    17 211
    D�tails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Is�re (Rh�ne Alpes)

    Informations forums :
    Inscription : Janvier 2011
    Messages : 17 211
    Par d�faut
    Bonjour,
    Citation Envoy� par Archim�de
    setInterval(newframe, 1000/60);
    il existe window.requestAnimationFrame(callback) qui est plus adapt�.


    Citation Envoy� par Programir
    je ferais surement avec �a, canvas c'est pas la facilit�
    ...c'est vrai avec tout ce que l'on connais mal.
    Il existe �galement des biblioth�ques, qui sont bien faites, pour t'aider � r�aliser tes animations.

    Il te faut savoir que ce n'est pas forc�ment la seule solution car si j'en crois ce que tu souhaites faire, rotation d'une image sur un fond, tu peux tout aussi bien l'envisager en CSS pur avec ou sans keyframe.

  8. #8
    Membre Expert
    Avatar de Archim�de
    Homme Profil pro
    Enseignant
    Inscrit en
    Avril 2005
    Messages
    1 644
    D�tails du profil
    Informations personnelles :
    Sexe : Homme
    �ge : 60
    Localisation : France, Charente Maritime (Poitou Charente)

    Informations professionnelles :
    Activit� : Enseignant
    Secteur : Enseignement

    Informations forums :
    Inscription : Avril 2005
    Messages : 1 644
    Par d�faut
    Bonjour,
    il existe window.requestAnimationFrame(callback) qui est plus adapt�.

    Oui, mais avec les machines de guerre que l'on a maintenant, setInterval() ne provoque pas de saccades dans la plupart des cas...Au moins les intervalles entre chaque frame sont constants. Apr�s 30 fps suffisent largement...
    Mais window.requestAnimationFrame(newframe) est plus recommand� pour les diesels...

  9. #9
    Membre confirm�
    Homme Profil pro
    Webmaster
    Inscrit en
    D�cembre 2021
    Messages
    81
    D�tails du profil
    Informations personnelles :
    Sexe : Homme
    �ge : 57
    Localisation : France, H�rault (Languedoc Roussillon)

    Informations professionnelles :
    Activit� : Webmaster

    Informations forums :
    Inscription : D�cembre 2021
    Messages : 81
    Par d�faut
    Oh merci, bien s�r que �a va m'aider

    requestframe je l'ai essay� en premier mais vraiment j'ai �t� d��u par mes animations mais d�s que je l'ai remplac� par interval tout s'est r�gl�

    En plus un des avantages suppos� de request d'apr�s ce que j'ai lu, c'est le fait que le navigateur stoppe l'anim quand on est passe � un autre onglet, mais je me suis apper�u qu'interval fait de m�me.


    EDIT :

    Archim�de : Ton code fonctionne bien
    il rotate autour du coin haut gauche de l'image mais c'est normal et c'est un truc que je peux r�gler je crois en donnant un nouveau centre � l'image avec les commentaires que tu as mis dedans

  10. #10
    Membre Expert
    Avatar de Archim�de
    Homme Profil pro
    Enseignant
    Inscrit en
    Avril 2005
    Messages
    1 644
    D�tails du profil
    Informations personnelles :
    Sexe : Homme
    �ge : 60
    Localisation : France, Charente Maritime (Poitou Charente)

    Informations professionnelles :
    Activit� : Enseignant
    Secteur : Enseignement

    Informations forums :
    Inscription : Avril 2005
    Messages : 1 644
    Par d�faut
    En effet, il faut adapter Cx et Cy en fonction de la taille de ton image. Pour moi, c'�tait une image de 128 sur 128 pixels, d'o� mes valeurs fix�es � 64...

  11. #11
    Mod�rateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    Janvier 2011
    Messages
    17 211
    D�tails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Is�re (Rh�ne Alpes)

    Informations forums :
    Inscription : Janvier 2011
    Messages : 17 211
    Par d�faut
    Citation Envoy� par Archim�de
    Oui, mais avec les machines de guerre que l'on a maintenant, setInterval() ne provoque pas de saccades dans la plupart des cas...
    � Les m�thodes setTimeout, setIntervalet requestAnimationFrame n�utilisent pas la m�me gestion des piles d�appel.

    setTimeout ne met � jour l'�cran que lorsqu'il le � souhaite/peut �, et non lorsque le contexte le permet.

    requestAnimationFrame est synchronis�es avec la GPU et monopolise moins de CPU.
    Le navigateur optimise l�affichage de l�animation fonction de la configuration, c�est lui qui fixe la fr�quence de rafraichissement.



    Au moins les intervalles entre chaque frame sont constants. Apr�s 30 fps suffisent largement...
    � Que cela soit la m�thode, setTimeout, setInterval ou encore requestAnimationFrame on n�a absolument aucune garantie que les frames se succ�dent � intervalle r�gulier ou toutes les xms.



    Mais window.requestAnimationFrame(newframe) est plus recommand� pour les diesels...
    � Non toutes les litt�ratures, r�centes, que tu pourras trouver te dirons qu'il est pr�f�rable d'utiliser requestAnimationFrame.



    Citation Envoy� par Programir
    requestframe je l'ai essay� en premier mais vraiment j'ai �t� d��u par mes animations mais d�s que je l'ai remplac� par interval tout s'est r�gl�
    ... sur ce coup j'aimerais voir le code que tu as utilis� car au pire cela ne peut pas �tre pire

  12. #12
    Membre Expert
    Avatar de Archim�de
    Homme Profil pro
    Enseignant
    Inscrit en
    Avril 2005
    Messages
    1 644
    D�tails du profil
    Informations personnelles :
    Sexe : Homme
    �ge : 60
    Localisation : France, Charente Maritime (Poitou Charente)

    Informations professionnelles :
    Activit� : Enseignant
    Secteur : Enseignement

    Informations forums :
    Inscription : Avril 2005
    Messages : 1 644
    Par d�faut
    Salut, je n'ai pas dit que tu avais tort mais l'objectif �tait de combiner une rotation du context avec une autre animation donc je ne me suis pas polaris� sur la mani�re d'afficher les frames qui me paraissait secondaire vis � vis de la question...
    Et puis, je ne vois pas une diff�rence fondamentale entre les deux propositions en terme de fluidit� :
    Code html : S�lectionner tout - Visualiser dans une fen�tre � part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
     
    <!doctype html>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
    <title>rotation composée</title>
    <style>
      canvas { 
        border: 1px solid black; 
      }
    </style>
    </head>
    <body>
     
    <canvas id="cancan" width="1000" height="500"></canvas>
     
    <script>
    let ctx = document.getElementById("cancan").getContext("2d");
    let image = new Image();
    image.src = "image.png";
     
    const dgTord= Math.PI/180;
    const ctxw=ctx.canvas.width, ctxh=ctx.canvas.height;
    const posx = ctxw / 2, posy = ctxh / 2;
    const pw=6;
     
    const cx=64, cy=64;//centre de ton image
    var angle=0,dx=0;// angle de rotation en degrés et déplacement dx horizontal d'un trait
     
     
    function newframe() {
      draw();
      rotation();
      window.requestAnimationFrame(newframe);
    }
     
    function rotation() {
       angle += dgTord;
       dx++;
    }
     
    function draw() {
      ctx.clearRect(0,0,ctxw,ctxh );
      ctx.save();
      ctx.translate(posx, posy);
      ctx.rotate(angle);
      ctx.translate(-cx,-cy);
      ctx.drawImage(image,0,0);
      ctx.restore();
      ctx.lineWidth=pw;
      ctx.beginPath();
      ctx.moveTo(20+dx,posy-pw/2);
      ctx.lineTo(dx,posy-pw/2);
      ctx.stroke();
    }
    //setInterval(newframe,1000/60);
    window.requestAnimationFrame(newframe); 
    </script>
     
    </body>
     
    </html>

  13. #13
    Membre Expert
    Avatar de Archim�de
    Homme Profil pro
    Enseignant
    Inscrit en
    Avril 2005
    Messages
    1 644
    D�tails du profil
    Informations personnelles :
    Sexe : Homme
    �ge : 60
    Localisation : France, Charente Maritime (Poitou Charente)

    Informations professionnelles :
    Activit� : Enseignant
    Secteur : Enseignement

    Informations forums :
    Inscription : Avril 2005
    Messages : 1 644
    Par d�faut
    Citation Envoy� par Programir Voir le message
    requestframe je l'ai essay� en premier mais vraiment j'ai �t� d��u par mes animations mais d�s que je l'ai remplac� par interval tout s'est r�gl�
    En effet comme le dit NoSmoking, il ne faut pas exag�rer tout de m�me, c'est du plus ou � peu pr�s l'�quivalent mais pas du moins...

  14. #14
    Membre confirm�
    Homme Profil pro
    Webmaster
    Inscrit en
    D�cembre 2021
    Messages
    81
    D�tails du profil
    Informations personnelles :
    Sexe : Homme
    �ge : 57
    Localisation : France, H�rault (Languedoc Roussillon)

    Informations professionnelles :
    Activit� : Webmaster

    Informations forums :
    Inscription : D�cembre 2021
    Messages : 81
    Par d�faut
    Pour ceux qui seraient interess�s, voici une formule pour calculer x et y pour une rotation voulue, en d�pla�ant chaque pixel de l'image.

    Rotation d'une image par pixel :

    Code : S�lectionner tout - Visualiser dans une fen�tre � part
    1
    2
    3
    4
    5
    6
     
    pxX = pxX + width/2
    pxY = pxY + height/2
     
    newPxX = imgX + width/2 + pxX.cos(a) - pxY.sin(a)
    newPxY = imgY + height/2 + pxX.sin(a) + pxY.cos(a)
    Ce code pourrait �tre mis dans le dossier jeux 2D peut-�tre.


    Ce code est issu d'une aide d'un matheu � un programmeur sur un forum d'entraide.

+ R�pondre � la discussion
Cette discussion est r�solue.

Discussions similaires

  1. ImageJ fonctions math�matique sur une image
    Par cpi63 dans le forum ImageJ
    R�ponses: 4
    Dernier message: 05/04/2021, 00h38
  2. Affichage d'un dessin dans un Canvas lors d'un clic sur une image
    Par totooo dans le forum D�veloppement Mobile en Java
    R�ponses: 1
    Dernier message: 19/06/2009, 11h26
  3. R�ponses: 4
    Dernier message: 19/06/2008, 14h58
  4. R�ponses: 1
    Dernier message: 29/02/2008, 14h18
  5. Comment utiliser usemap sur une image png transparente
    Par master_kb2 dans le forum G�n�ral JavaScript
    R�ponses: 1
    Dernier message: 03/01/2008, 14h00

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo