Javascript Girl
  1. Javascript Girl
  3. Le chemin Raphael redimensionne et se déplace par rapport au conteneur
Intereting Posts
Passez de grandes quantités de données entre le travailleur Web et le fil principal Routing réactif fonctionne dans une machine locale mais pas Heroku Ne peut pas ajouter un auditeur à un SVG dans Internet Explorer en utilisant SVGweb Comment passer une valeur d'une fenêtre parent à une autre page html à l'aide de javascript? Les textures répétées sont gravement déformées / tremblantes lors de la rotation de la caméra Meilleure stratégie pour utiliser le modèle HAML avec Backbone.js Gardez le choix de la liste sélectionnée après rafraîchissement Couch DB filter par clé et tri par un autre champ Alors que 3 * 0.1 ne peuvent pas être représentés exactement, pourquoi Javascript peut-il calculer correctement 0,15 * 2? Comment convertir ISOString en ISOString local en javascript? Problème JavaScript: getElementsByName () ne fonctionne pas pour moi Comment afficher les images redimensionnées sur une page Web tout en maintenant le rapport d'aspect? Ajouter par programme un fichier à jquery fileupload Comment obtenir la clé json et la valeur en javascript? Comment obtenir la hauteur d'un iframe avec javascript à partir de l'iframe? Qu'en est-il des pages avec des iframes multiples?

Le chemin Raphael redimensionne et se déplace par rapport au conteneur

J'essaie d'étaler / déplacer un chemin SVG créé avec l'api Raphael. Je veux que le chemin s'intègre parfaitement dans un conteneur, quelle que soit la taille du conteneur. J'ai cherché la référence, le Web et je suis toujours en difficulté pour que cela fonctionne.

Si quelqu'un peut me dire pourquoi cela ne fonctionne pas, je serais très heureux.

Cette violon vous montre ce que je fais: http://jsfiddle.net/tolund/3XPxL/5/

JavaScript: 

var draw = function(size) { var $container = $("#container").empty(); $container.css("height",size+"px").css("width",size+"px"); var paper = Raphael("container"); var pathStr = "M11.166,23.963L22.359,17.5c1.43-0.824,1.43-2.175,"+ "0-3L11.166,8.037c-1.429-0.826-2.598-0.15-2.598,"+ "1.5v12.926C8.568,24.113,9.737,24.789,11.166,23.963z"; // set the viewbox to same size as container paper.setViewBox(0, 0, $container.width(), $container.height(), true); // create the path var path = paper.path(pathStr) .attr({ fill: "#000", "stroke-width": 0, "stroke-linejoin": "round", opacity: 1 }); // get the path outline box (may be different size than view box. var box = path.getBBox(); // move the path as much to the top/left as possible within container path.transform("t" + 0 + "," + 0); // get the width/height based on path box relative to paper (same size as container) var w = (paper.width) / box.width; var h = (paper.height) / box.height; // scale the path to the container (use "..." to compound transforms) path.transform('...S' + w + ',' + h + ',0,0'); } $(function() { var currentSize = 30; draw(currentSize); $("#smaller").click(function(){ currentSize = currentSize < 10 ? currentSize : currentSize * 0.5; draw(currentSize); }); $("#bigger").click(function(){ currentSize = 300 < currentSize ? currentSize : currentSize * 2; draw(currentSize); }); });

HTML: 

 <button id="smaller">-</button> <button id="bigger">+</button> <div id="container" style="border: 1px #ddd solid; margin: 30px"> </div>

Merci, Torgeir.

Je pense que votre problème est un malentendu fondamental de ce que la boîte de dialogue est utile. Dans votre code, vous essayez de configurer la zone de visualisation de l'élément svg afin qu'il corresponde à l'espace de coordonnées de l'écran, puis transformer le chemin d'accès pour correspondre à cet espace de coordonnées. Il n'y a aucune raison technique pour laquelle vous ne pouvez pas le faire, mais cela prend effectivement le "Scalable" sur "Scalable Vector Graphics". Le point entier de la boîte de dialogue est de rendre la traduction entre l'espace de coordonnées du vecteur et l'image relative.

La meilleure façon de résoudre votre problème n'est donc pas de transformer le chemin d'accès à l'élément SVG, mais d'utiliser la fenêtre de visualisation pour permettre à l'évolutivité intrinsèque de SVG de le faire pour vous.

Tout d'abord: créez votre chemin afin que nous ayons un objet à travailler. Nous ne nous soucions pas de ce que la boîte de vision est à ce stade. 

 var pathStr = "..."; // The content of the path and its coordinates are completely immaterial var path = paper.path(pathStr) .attr({ fill: "#000", "stroke-width": 0, "stroke-linejoin": "round", opacity: 1 });

Maintenant, tout ce que nous devons faire, c'est utiliser la fenêtre de visualisation pour "focaliser" le SVG sur l'espace de coordonnées qui nous intéresse. 

 var box = path.getBBox(); var margin = Math.max( box.width, box.height ) * 0.1; // because white space always looks nice ;-) paper.setViewBox(box.x - margin, box.y - margin, box.width + margin * 2, box.height + margin * 2);

Et c'est tout. Le SVG (quelle que soit sa taille) se traduira par les coordonnées internes spécifiées dans la zone de visualisation à ses coordonnées physiques à l'écran.

Voici une fourchette de votre violon comme preuve de concept .