begin process at 2012 05 29 04:27:18
  Trouver un code source :
 
dans
 
[ Dernières recherches ]
Accueil > Forum > 

Javascript / DHTML / Ajax

 > 

JavaScript Orienté objet (POO)

 > 

Function & Méthodes

 > 

comment manipuler une image ? (deplacement + rotation)

Derniers messages déposésPoser une question dans le forum ou lancer une discussion

comment manipuler une image ? (deplacement + rotation)

mardi 19 décembre 2006 à 00:09:43 | comment manipuler une image ? (deplacement + rotation)

franco_se

Membre Club
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
mardi 19 décembre 2006 à 03:30:24 | Re : comment manipuler une image ? (deplacement + rotation)

Arto_8000
Réponse acceptée !
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; }
mardi 19 décembre 2006 à 11:16:56 | Re : comment manipuler une image ? (deplacement + rotation)

franco_se

Membre Club
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 ......................................................................
jeudi 21 décembre 2006 à 03:22:20 | Re : comment manipuler une image ? (deplacement + rotation)

Arto_8000
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.
jeudi 21 décembre 2006 à 20:38:33 | Re : comment manipuler une image ? (deplacement + rotation)

PetoleTeam

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

vendredi 18 novembre 2011 à 12:49:29 | Re : comment manipuler une image ? (deplacement + rotation)

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

<body>

<div id="pos" ></div>

<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>
</body>



</html>
vendredi 18 novembre 2011 à 12:59:25 | Re : comment manipuler une image ? (deplacement + rotation)

alcoveforlove
il y a un défaut sur le déplacement en x et en y SI quelqu'un trouve la solution je suis preneur
vendredi 18 novembre 2011 à 17:26:55 | Re : comment manipuler une image ? (deplacement + rotation)

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

<body>

<div id="pos" ></div>

<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>
</body>



</html>
vendredi 18 novembre 2011 à 18:53:04 | Re : comment manipuler une image ? (deplacement + rotation)

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

<body>


<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>
</body>



</html>


Cette discussion est classée dans : image, deplacer, rotation, manipuler, deplacement

Répondre à ce message

Sujets en rapport avec ce message

affiche vitesse de deplacement d'un calque [ par kartoon ] Bonjour,J'ai besoin d'aide!!!Je souhaiterai savoir comment afficher les coordonnées de la vitesse de déplacement d'un calque (que j'ai deplacer en cli Deplacement d'une image [ par missceline33 ] Bonjour, j'ai un petit problème. J'ai un tableau contenant une image et je souhaite pouvoir déplacer cette image de manière assez fluide (cet outil e rotation d'image [ par WebInitiation ] Bonjour j'ai un petit soucis.En fait ce que je voudrais faire c'est afficher un logo portable sur mon site.(Un roulement).Pour ce faire j'ai essayer p deplacer une image [ par lesnouesremy ] bonjour je voudrai céer un jeu en javascript mais je n'arrive pas a déplacer le personnage.merci de m'aider moi svp! deplacement d'image par l'utilisateur d'une frame a une autre [ par elodie1511 ] Bonjour, enfait voilà je cherche un script, qui permettrait aux utilisateurs lorsqu'ils cliquent sur une image qu'elle aille dans l'autre frame mercie Faire une ROTATION d'une image avec HTML ou JAVASCRIPT ? [ par maxxcbenny ] Bonjour,Quelqu'un connait-il le moyen de faire subir une rotation à une image dans un navigateur web ? Avec un angle libre de 0° à 360° évidement ?Par drag n drop d'image [ par crasse ] bonsoir !Je suis en train d'essayer de realiser une interface simple de drag n drop d'image mais je n'y parviens pas completement...pour commencer, je deplacer une image [ par lesnouesremy ] bonjour je voudrai savoir comment deplacer une image avec le clavier.aider svp rotation d'une image par un bouton [ par absolu123 ] Bonjour à toutes et tous, Je glane des idées, depuis peu, sur le site et j'essaye de comprendre (en tant que petit scarabée). Je cherche donc à fair


Nos sponsors


Sondage...

CalendriCode

Mai 2012
LMMJVSD
 123456
78910111213
14151617181920
21222324252627
28293031   

Consulter la suite du CalendriCode

A découvrir
 
Développement réalisé par Nicolas SOREL (Nix) avec l'aide de : Cyril DURAND et Emmanuel (EBArtSoft), Merci à Vincent pour ses précieux conseils.
CodeS-SourceS.com© Toute reproduction même partielle est interdite sauf accord écrit du Webmaster
CodeS-SourceS.com© est une marque déposée tous droits réservés

Google Coop CodeS-SourceS Google Coop CodeS-SourceS
Temps d'éxécution de la page : 1,264 sec (4)

Nous contacter | Annoncer sur CodeS-SourceS | Mentions légales
Outils Convertisseur VB/C# Snippets et scripts Outils en ligne La ToolBox
Communauté Programmation Photographie Technologie Newsgroups Emploi Forum Blogs
Guide d'achat Téléphonie mobile Image et son Informatique Bureautique Jeux vidéo
Logiciels Internet & Réseau Développement Market Android Jeux & Loisirs Graphisme Multimédia Sécurité Pilotes
Loisirs Cartes virtuelles Vidéos droles Jeux en ligne Géoguide AndroLib (Android Market)