¿Cómo puedo escalar los elementos Raphael js en la ventana de cambiar el tamaño usando jQuery

Question

¿Cómo puedo cambiar la escala de todo el elemento dentro de un lienzo sobre el cambio Raphael ventana?

teniendo en cuenta el siguiente código/DEMO si mi ventana sólo div container escala desde que puse su anchura a 50% de la anchura de la ventana y ninguno de los cambios (rect, circle o path) de tamaño re

CÓDIGO

<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

Si utiliza Raphaël versión 2.0 o posterior alternativa es llamar paper.setViewBox para configurar su sistema de coordenadas , y luego deje que los navegadores manejen el cambio de tamaño automáticamente.

Actualización: Ok, resulta Raphaël es un poco menos de auto-escalable de lo que pensaba ... de todos modos, aquí hay un example (Rafael todavía establece una anchura/altura absoluta en el SVG raíz <>, por lo que necesitan para ser eliminado para que tenga lugar la escala svg normal). El tamaño es decidido por CSS, y el svg se ajusta al área dada. Es posible ajustar esta relación con los contenidos desbordante, lo que puede ocurrir debido a la relación de aspecto SVG viewBox que no coincida con el cuadro de CSS se coloca en. Esto se hace mediante la adición de un atributo preserveAspectRatio al elemento SVG raíz.

Puede leer más sobre los valores se pueden establecer en el SVG preserveAspectRatio atributo here, pero los tres valores que son probablemente de interés son 'none' (para exprimir/estiramiento para adaptarse a cualquier rect se da), 'xMidYMid slice' (para ampliar para llenar el rect, posiblemente de recortes de distancia algunas partes si el aspecto no coincide), 'xMidYMid meet' (este es el valor predeterminado, el mismo que no especificar pAR en absoluto, y significa que el contenido estará centrado y se desbordará en una dirección si aspecto doesn 't partido).

Answer 2

puede utilizar este script una vez que he usado antes:

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

Pedido llenar la ventana - ningún ejemplo de recorte para cambiar el tamaño del lienzo:

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

Answer 3

creo que he encontrado una solución: el siguiente código se volverá a escala de todo el elemento cuando se re tamaño de la ventana, y esto es lo que estaba buscando

  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); 

de referencia desde @Erik Dahlström: Paper.setViewBox(x, y, w, h, fit)Y ‘viewBox’ attribute

Answer 4

http://jsfiddle.net/vnTQT/

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

Utilizamos este (paper.setViewBox) con paper.setSize ('100%', '100%') y cambiar el tamaño de la ventana con cambio de tamaño del contenido SVG de trabajo sin necesidad de utilizar las funciones de SVG direcly.

Answer 5

Si usted tiene un conjunto de elementos para cambiar el tamaño, se puede utilizar directamente en el código JS ...

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

... y una función para recargar la página en el navegador de cambio de tamaño:

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