Comment manipuler une image ? (deplacement + rotation) [Résolu]

franco_se 150 Messages postés samedi 1 novembre 2003Date d'inscription 14 février 2009 Dernière intervention - 19 déc. 2006 à 00:09 - Dernière réponse : alcoveforlove 12 Messages postés mercredi 8 décembre 2004Date d'inscription 18 novembre 2011 Dernière intervention
- 18 nov. 2011 à 18:53
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
Afficher la suite 

Votre réponse

8 réponses

Meilleure réponse
Arto_8000 1051 Messages postés lundi 7 mars 2005Date d'inscription 13 juillet 2010 Dernière intervention - 19 déc. 2006 à 03:30
3
Merci
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;
}

Merci Arto_8000 3

Avec quelques mots c'est encore mieux Ajouter un commentaire

Codes Sources a aidé 93 internautes ce mois-ci

Commenter la réponse de Arto_8000
franco_se 150 Messages postés samedi 1 novembre 2003Date d'inscription 14 février 2009 Dernière intervention - 19 déc. 2006 à 11:16
0
Merci
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 ......................................................................
Commenter la réponse de franco_se
Arto_8000 1051 Messages postés lundi 7 mars 2005Date d'inscription 13 juillet 2010 Dernière intervention - 21 déc. 2006 à 03:22
0
Merci
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.
Commenter la réponse de Arto_8000
PetoleTeam 3435 Messages postés lundi 26 décembre 2005Date d'inscription 14 janvier 2011 Dernière intervention - 21 déc. 2006 à 20:38
0
Merci
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)
Commenter la réponse de PetoleTeam
alcoveforlove 12 Messages postés mercredi 8 décembre 2004Date d'inscription 18 novembre 2011 Dernière intervention - 18 nov. 2011 à 12:49
0
Merci
<?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>
Commenter la réponse de alcoveforlove
alcoveforlove 12 Messages postés mercredi 8 décembre 2004Date d'inscription 18 novembre 2011 Dernière intervention - 18 nov. 2011 à 12:59
0
Merci
il y a un défaut sur le déplacement en x et en y SI quelqu'un trouve la solution je suis preneur
Commenter la réponse de alcoveforlove
alcoveforlove 12 Messages postés mercredi 8 décembre 2004Date d'inscription 18 novembre 2011 Dernière intervention - 18 nov. 2011 à 17:26
0
Merci
révision du code pourri produit ce matin lol....

<?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

// petit témoin
document.title = "angle:"+that.angle+" | x="+that.x+" | y="+that.y;
svg.appendChild(this.o); // afficher le tout
idobj++;



}


function keyCheck(e) {

if(that.angle==0) { that.angle = 360; }
if(that.angle==370) { that.angle = 10; }

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 + 2;
if(that.angle<90) { that.y = that.y - 2; }
if(that.angle>90) { that.y = that.y + 2; }
that.o.setAttribute("x",that.x);
that.o.setAttribute("y",that.y);
}

if(that.angle>180)
{
that.x = that.x -2;
if(that.angle<270) { that.y = that.y + 2; }
if(that.angle>270) { that.y = that.y - 2; }
that.o.setAttribute("x",that.x);
that.o.setAttribute("y",that.y);
}

}
//
that.o.setAttribute("transform","rotate("+that.angle+","+(that.x+50)+","+(that.y+100)+")");
document.title = "angle:"+that.angle+" | x="+that.x+" | y="+that.y;
}

var rd = new rondOBJ();

document.onkeydown = keyCheck;


</script>




</html>
Commenter la réponse de alcoveforlove
alcoveforlove 12 Messages postés mercredi 8 décembre 2004Date d'inscription 18 novembre 2011 Dernière intervention - 18 nov. 2011 à 18:53
0
Merci
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...

<?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","150"); // taille de l'image en largeur
this.o.setAttribute("height","90"); // taille de l'image en hauteur
this.o.setAttributeNS("http://www.w3.org/1999/xlink","href","avion.gif"); // xlink:href path de l'image

this.o.setAttribute("transform","rotate("+that.angle+","+(this.x+75)+","+(this.y+45)+")"); // appliquer la rotation

// petit témoin
document.title = "angle:"+that.angle+" | x="+that.x+" | y="+that.y;
svg.appendChild(this.o); // afficher le tout
idobj++;



}


function keyCheck(e) {

if(that.angle==0) { that.angle = 360; }
if(that.angle==370) { that.angle = 10; }

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!=360&&that.angle!=0&&that.angle!=180)
{
if(that.angle<180)
{
that.x = that.x + 2;
if(that.angle<90&&that.angle!=0) { that.y = that.y - 2; }
if(that.angle>90&&that.angle!=360) { that.y = that.y + 2; }
}
else
{
that.x = that.x -2;
if(that.angle<270) { that.y = that.y + 2; }
if(that.angle>270) { that.y = that.y - 2; }
}
}
else
{
if(that.angle==360||that.angle==0) { that.y = that.y - 2; }
if(that.angle==180) { that.y = that.y + 2; }
}

that.o.setAttribute("x",that.x);
that.o.setAttribute("y",that.y);
}
//
that.o.setAttribute("transform","rotate("+that.angle+","+(that.x+75)+","+(that.y+45)+")");
document.title = "angle:"+that.angle+" | x="+that.x+" | y="+that.y;
}

var rd = new rondOBJ();

document.onkeydown = keyCheck;


</script>




</html>
Commenter la réponse de alcoveforlove

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !

Les membres obtiennent plus de réponses que les utilisateurs anonymes.

Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.

Le fait d'être membre vous permet d'avoir des options supplémentaires.