Javascript Girl
  1. Javascript Girl
  3. Comment réinitialiser les transformations SVG (c.-à-d. Renvoyer un objet SVG à son état d'origine)?
Intereting Posts
Dois-je avoir besoin de js quand j'utilise Babel? Utilisation de zxing Barcode Scanner dans une page Web OpenGraph sur le site Web basé sur Ajax Accès à un nom de propriété d'un objet Appeler une fonction JavaScript à partir du bean géré Détection et réparation de références circulaires en JavaScript Les objets fusionnant JavaScript par ID Impossible d'encoder le fichier en fonction de l'API du système de fichiers Chrome Date de backbone + autres paramètres de tri Travailler autour de l'implémentation Broken Object de l'objet IE8 implémentée Inclure un modèle angulaire dans un autre Comment intégrer un fichier XML en HTML? Comment déployer l'application ReactJS + NodeJS Express sur AWS? Calculer la différence de temps avec JavaScript Passez et renvoyez les valeurs de javascript et d'Android et utilisez-les comme un plugin d'espace de téléphone

Comment réinitialiser les transformations SVG (c.-à-d. Renvoyer un objet SVG à son état d'origine)?

Je crée une application où les utilisateurs peuvent manipuler des objets svg (p. Ex. Images) un nombre infini de fois, à savoir les faire pivoter et les étaler. Et j'utilise Raphael.js pour travailler avec les SVG.

Comment puis-je "réinitialiser" un objet à son état initial avant d'appliquer une nouvelle transformation afin que la nouvelle transformation ne chevauche pas la précédente?

Bellow est un test (et voici un violon de travail: jsfiddle.net/5TsW6/3/ ) où j'ai essayé de réinitialiser l'objet dans la deuxième fenêtre avant d'appliquer la même transformation que la première, mais ma tentative n'avait pas Effet, car le résultat dans les deux fenêtres est différent, alors qu'il est censé être le même: 

<div id="wrapper1" style="width:250px; height:250px; outline:1px solid invert; float:left; margin-right:5px;"></div> <div id="wrapper2" style="width:250px; height:250px; outline:1px solid invert; float:left;"></div>​

Et le script: 

 var img_width=100, img_height=75, canvas1, canvas2, image1, image2, w1, w2, // contours x,y, // attributes "x" and "y" rx,ry; // coordinates for the rotation pivot // Create the canvases canvas1 = new Raphael(document.getElementById("wrapper1"), 250, 250); canvas2 = new Raphael(document.getElementById("wrapper2"), 250, 250); // Add the images to the canvases image1 = canvas1.image("http://picselbocs.com/projects/cakemyface/image-gallery/intermediate/3295094303_2b50e5fe03_z.jpg",0,0,img_width,img_height); image2 = canvas2.image("http://picselbocs.com/projects/cakemyface/image-gallery/intermediate/3295094303_2b50e5fe03_z.jpg",0,0,img_width,img_height); // Modify (x,y) x = 40; y = 80; image1.attr({"x":x,"y":y}); image2.attr({"x":x,"y":y}); // Add the objects' contours canvas1.rect(x,y,img_width,img_height).attr({"stroke-width":"1px","stroke":"#00F"}); canvas2.rect(x,y,img_width,img_height).attr({"stroke-width":"1px","stroke":"#00F"}); // Compute the rotation pivot coordinates (the pivot should coincide with the object's center) var scaling = 1.2; rx = (x + img_width / 2) * scaling; ry = (y + img_height / 2) * scaling; // Apply transformations image1.transform("S"+scaling+","+scaling+",0,0R45,"+rx+","+ry); image2.transform("S"+scaling+","+scaling+",0,0R45,"+rx+","+ry); // ----- Here starts second transformation ------ // image2.transform("").transform("S"+scaling+","+scaling+",0,0r45,"+rx+","+ry); // I've attempted to reset the transform string, but with no effect​

La réinitialisation fonctionne. Vous avez créé une faute de frappe dans la deuxième transformation, en utilisant r45 au lieu de R45 , ce qui signifie "prendre en compte la transformation précédente avant d'appliquer", d'où la différence.