Come è possibile ridimensionare elementi Raphael js al ridimensionamento della finestra utilizzando jquery

Question

Come posso ridimensionare tutto l'elemento all'interno di una tela Raphael durante il cambio della finestra?

considerando il seguente codice/DEMO se i ri-size mia finestra solo div container scalato dal regolo sua larghezza al 50% della larghezza della finestra e nessuno del cambio (rect, circle o 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); 

Answer 1

Se si utilizza Raphaël versione 2.0 o successiva in alternativa è quella di chiamare paper.setViewBox la configurazione di un sistema di coordinate e quindi lasciare che i browser gestiscano il ridimensionamento automaticamente.

Aggiornamento: Ok, scopre Raphaël è un po 'meno auto-scalabile di quanto pensassi ... Comunque, ecco un example (Raffaello imposta ancora una larghezza/altezza assoluta sulla radice < svg>, quindi hanno bisogno da rimuovere per il normale svg del ridimensionamento da effettuare). La dimensione viene quindi decisa dal CSS, e lo svg è appena inserito nell'area indicata. È possibile modificare questo aspetto per gestire il contenuto traboccante, che può accadere a causa della proporzione svg viewBox che non corrisponde alla casella CSS in cui è stata inserita. A tale scopo, aggiungi un attributo preserveAspectRatio all'elemento svg root.

Potete leggere di più sui valori che è possibile impostare sul svg preserveAspectRatio attributo here, ma i tre valori che sono probabilmente di interesse 'none' (per spremere/stiramento per adattarsi a qualunque rect è dato), 'xMidYMid slice' (a scalare per riempire il rettangolo, eventualmente ritagliando alcune parti se l'aspetto non corrisponde), 'xMidYMid meet' (questo è l'impostazione predefinita, uguale a non specificare affatto pAR, e significa che il contenuto sarà centrato e traboccherà in una direzione se l'aspetto non abbinare).

Answer 2

È possibile utilizzare questo script una volta ho usato prima:

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

Checkout riempire la finestra - nessun esempio di clipping per il ridimensionamento della tela:

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

Answer 3

Credo di avere trovato una soluzione: il seguente codice si ri scala tutta l'elemento quando ri dimensioni della finestra, e questo è quello che cercavo

  var w = $(window).width(); 
      var h = $(window).height(); 
      function draw(w, h) { 
       var paper = Raphael($('#wrap').attr('id'), w, h); 
       paper.setViewBox(0, 0, 1500, 1500, true); 
       var rec = paper.rect(0, 0, 200, 200).attr({ stroke: 'black' }); 
       var cir = paper.circle(100, 100, 50); 
      }; 
      draw(w, h); 
      function resize() { 
       var xw = $(window).width(); 
       var xh = $(window).height(); 
       draw(xw, xh) 
      } 
      $(window).resize(resize); 

riferimento da @Erik Dahlström: Paper.setViewBox(x, y, w, h, fit)E ‘viewBox’ attribute

Answer 4

http://jsfiddle.net/vnTQT/

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

Utilizzato questo (paper.setViewBox) con paper.setSize ('100%', '100%') e ridimensiona la finestra con ridimensionamento del contenuto svg funzionante senza utilizzare le funzioni svg direttamente.

Answer 5

Se si dispone di un set di elementi da ridimensionare, è possibile utilizzare direttamente nel codice js ...

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

... e una funzione per ricaricare la pagina nel browser ridimensionamento:

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