franco_se
Messages postés151Date d'inscriptionsamedi 1 novembre 2003StatutMembreDernière intervention30 juillet 2018
-
19 déc. 2006 à 00:09
alcoveforlove
Messages postés12Date d'inscriptionmercredi 8 décembre 2004StatutMembreDernière intervention18 novembre 2011
-
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?
Arto_8000
Messages postés1044Date d'inscriptionlundi 7 mars 2005StatutMembreDernière intervention13 juillet 20107 19 déc. 2006 à 03:30
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;
}
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
Messages postés1044Date d'inscriptionlundi 7 mars 2005StatutMembreDernière intervention13 juillet 20107 21 déc. 2006 à 03:22
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.
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++;
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++;
alcoveforlove
Messages postés12Date d'inscriptionmercredi 8 décembre 2004StatutMembreDernière intervention18 novembre 20111 18 nov. 2011 à 18:53
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...
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++;