comment manipuler une image ? (deplacement + rotation)Résolu

Question

bonjours


je voudrais savoir comment faire pour manipuler une image, a savoir la
deplacer, et lui appliquer une rotation. Mon but étant en fait de
deplacer des images sur un fond blanc, puis de les fusionner pour
generer une image unique.


apres une rapide recherche, je n'ai rien trouver de tel .............


quelqu'un aurait une idée, ou une piste pour un tel script? 


merci

Arto_8000 · Accepted Answer

Pour faire des rotations à ma connaissance c'est impossible. Sinon pour les déplacements il suffit que ton image soit en position absolue pour pouvoir la déplacer comme bon te semble dans l'écran.



Ensuite pour la déplacer il suffit d'utiliser les propriétés left et top css.

function moveImgTo(id,x,y)
{
    document.getElementById(id).style.left = x;
    document.getElementById(id).style.top = y;
}

franco_se · Answer

merci arto

par ailleurs, j'ai reussi a trouver une fojnction qui permette la rotaion d'une image:
http://www.walterzorn.com/rotate_img/rotate_img.htm

maintenant, il ne me reste plus qu'a :
1/ comprendre comment ça marche ( je debute en javascript )
2/ modifier tout ça pour que la rotation se fasse a la souris ( on clique sur un coin de l'image, et en bougeant la souris, ça la fait tourner ............... )

un jeu d'enfant ......................................................................

Arto_8000 · Answer

Le principle qu'il utilise est pas très compliqué ... Il découpe l'image avec des divs pour que chaque div contienne un pixel de l'image et ensuite il déplace les divs pour donner l'effet que l'image a subit une rotation.

PetoleTeam · Answer

B
onjour...
comme le dis Arto_8000 rien de complexe c'est la même approche que j'ai faite sur 


[code.aspx?ID=38317 EFFET 
D'EXPLOSION SUR TEXTE ET/OU IMAGE], les possibilités semble infinie si ce n'est la gourmandise en ressource

...
;0)

alcoveforlove · Answer

<?xml version="1.0" encoding="utf-8"?>
<html>

<head>

<style type="text/css">
body {
margin: 0px;
padding: 0px;
width: 100%;
height: 100%;
background-color : #fff;
}

</style>

</head>






<script type="text/javascript">



var oh = document.body.offsetHeight; // taille de l'écran
var ow = document.body.offsetWidth; 
var svgNS = "http://www.w3.org/2000/svg";


svg = document.createElementNS(svgNS,"svg"); // créer une zone svg
document.body.appendChild(svg); // l'insérer dans le body

var idobj = 0; // compteur d'objet rondOBJ ne sert pas à grand-chose ici


function rondOBJ()
{
    that = this;
this.o = document.createElementNS(svgNS,"image"); // créer une image svg 
this.x = ow/2.5; // positionner à peu près au milieu de l'écran
this.y = oh/2.5; 
    this.angle = 90; // définir l'angle de départ

this.o.setAttribute("x",this.x); // positionner l'image en x
this.o.setAttribute("y",this.y); // positionner l'image en y
this.o.setAttribute("width","100"); // taille de l'image en largeur
 	this.o.setAttribute("height","200"); // taille de l'image en hauteur  
this.o.setAttributeNS("http://www.w3.org/1999/xlink","href","2347.gif"); // xlink:href path de l'image

    this.o.setAttribute("transform","rotate("+that.angle+","+(this.x+50)+","+(this.y+100)+")"); // appliquer la rotation


    svg.appendChild(this.o); // afficher le tout
    idobj++;

  

}


function keyCheck(e)  { 
                        if(that.angle==360) { that.angle = 0; }
                        if(e.keyCode == 37) { that.angle=that.angle+10; } // changer d'angle en fonction des touches flèches
                        if(e.keyCode == 39) { that.angle=that.angle-10; }
                        if(e.keyCode == 38) {
                                                if(that.angle<180) // avancer
                                                {
                                                    that.x = that.x + 1; 
                                                    that.y = that.y + 1;
                                                }
                                                
                                                if(that.angle>180) // reculer
                                                {
                                                    that.x = that.x - 1; 
                                                    that.y = that.y - 1;                                                  
                                                }
                                            }   
                                            // afficher le tout
                                             that.o.setAttribute("transform","rotate("+that.angle+","+(that.x+50)+","+(that.y+100)+")");
                                             
                                            
                      }




var rd = new rondOBJ();

document.onkeydown = keyCheck; 





 


</script>




</html>

alcoveforlove · Answer

il y a un défaut sur le déplacement en x et en y SI quelqu'un trouve la solution je suis preneur

alcoveforlove · Answer

révision du code pourri produit ce matin lol....

alcoveforlove · Answer

CODE DEFINTIF (désolé pour le tatonnement) ce code fait intervenir SVG nécessaire notamment pour la rotation... SVG est compatible avec firefox pas encore avec IE à ce jour... D'autres solutions pour déplacer et exécuter des rotations sont CSS3, canvas, vml...

Comment manipuler une image ? (deplacement + rotation)

8 réponses

Votre réponse

Discussions similaires