web-dev-qa-db-fra.com

Comment puis-je redimensionner des éléments Raphael JS sur une fenêtre redimensionnée à l'aide de jQuery

Comment puis-je redimensionner tous les éléments dans un canevas Raphael lors du changement de fenêtre?

considérant le code suivant/ DEMO si je redimensionne ma fenêtre uniquement div container mis à l'échelle depuis que j'ai défini sa largeur à 50% de la largeur de la fenêtre et aucune des modifications (rect, circle ou path) 

CODE 

<div id="container"></div>​
 #container{border : 1px solid black ;
               width : 50% ;
               height:300px}​
var con = $("#container");
var paper = Raphael(con.attr('id'), con.attr('width'), con.attr('height'));
var win = paper.rect(0,0,400,300).attr({stroke: 'black' }) ; 
var path = paper.path("M 200 100 l 100 0 z") ; 
var cir = paper.circle(50, 50, 40);

Le plus grand centre commercial

jquerysvgraphaelhtml5-canvas
24
Mina Gabriel

Si vous utilisez Raphaël version 2.0 ou ultérieure, vous pouvez également appeler paper.setViewBox pour configurer votre système de coordonnées, puis laisser les navigateurs gérer le redimensionnement automatiquement.

Mise à jour: Ok, Raphaël est un peu moins évolutif que je ne le pensais ... en tout cas, voici un exemple (raphaël fixe toujours une largeur/hauteur absolue sur la racine <svg>, donc ils doivent être supprimés pour que la mise à l'échelle svg normale ait lieu). La taille est alors décidée par CSS, et le svg est simplement ajusté dans la zone donnée. Il est possible d'ajuster cela pour traiter le contenu débordant, ce qui peut arriver du fait que le rapport d'aspect svg viewBox ne correspond pas à la zone CSS dans laquelle il est placé. Pour ce faire, vous ajoutez un attribut preserveAspectRatio à l’élément racine svg.

Vous pouvez en savoir plus sur les valeurs que vous pouvez définir sur l'attribut svg preserveAspectRatiohere , mais les trois valeurs qui vous intéressent probablement sont 'none' (pour compresser/étirer pour correspondre à n'importe quel rect est donné), 'xMidYMid slice' (pour augmenter pour remplir le rect, éventuellement en coupant certaines parties si l'aspect ne correspond pas), 'xMidYMid meet' (par défaut, comme si vous ne spécifiiez pas du tout pAR, et que le contenu serait centré et déborderait dans une direction si l'aspect ne ne correspond pas).

31
Erik Dahlström

http://jsfiddle.net/vnTQT/ 

    var paper = Raphael("wrap");
    paper.setViewBox(0,0,w,h,true);
    paper.setSize('100%', '100%');

Utilisé (paper.setViewBox) avec paper.setSize ('100%', '100%') et redimensionner la fenêtre avec redimensionner le contenu svg sans utiliser directement les fonctions svg.

20
Sergey Krasnikov

Vous pouvez utiliser ce script une fois que j'ai déjà utilisé:

http://www.shapevent.com/scaleraphael/

Commander Remplissez la fenêtre - aucun exemple de découpage pour redimensionner la toile:

http://www.shapevent.com/scaleraphael/demo1.html

2
Luffy

Si vous avez un ensemble d’éléments à redimensionner, vous pouvez l’utiliser directement dans votre code js ...

for (var i = 0; i < your_set.length; i++) {
    your_set[i].scale(ratio, ratio, 0,0);
};

... et une fonction pour recharger la page lors du redimensionnement du navigateur: 

window.addEventListener('resize', function () { 
    "use strict";
    window.location.reload(); 
});
0
mquantin