jquery - tooltip html

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

Question

¿Cómo puedo cambiar la escala de todos los elementos dentro de un lienzo de Raphael en el cambio de ventana?

teniendo en cuenta el siguiente código / DEMO si cambio el tamaño de mi ventana solo div container escalado ya que establezco su ancho al 50% del ancho de la ventana y ninguno de los rect ( rect , circle o path ) cambia

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

1.

Answer 1

Creo que encontré una solución: el siguiente código volverá a escalar todo el elemento cuando se ajuste el 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);

referencia de @Erik Dahlström: paper.setViewBox AND here

Answer 2

Puede usar este script una vez que lo haya usado antes:

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

Finalizar la compra Rellenar la ventana: no hay un ejemplo de recorte para cambiar el tamaño del lienzo:

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

Answer 3

Si tiene un conjunto de elementos para redimensionar, puede usar directamente en su 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 volver a cargar la página en el cambio de tamaño del navegador:

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

Answer 4

Si utiliza Raphaël versión 2.0 o posterior, una alternativa es llamar a 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 que Raphaël es un poco menos auto-escalable de lo que pensaba ... de todos modos, aquí hay un example (raphaël todavía establece un ancho / alto absoluto en la raíz <svg>, por lo que deben ser eliminados para svg normal escalar para tener lugar). El tamaño es decidido por CSS, y el svg se ajusta al área dada. Es posible modificar esto para hacer frente al contenido desbordado, lo que puede suceder debido a que la relación de aspecto de svg viewBox no coincide con el cuadro de CSS en el que se encuentra. Para ello, agrega un atributo preserveAspectRatio al elemento raíz svg.

Puede leer más sobre los valores que puede establecer en el atributo svg preserveAspectRatio here , pero los tres valores que probablemente sean de interés son ''none'' (para ajustar / ajustar para ajustarse a cualquier rect), ''xMidYMid slice'' (escalar hasta completar el rect, posiblemente recortando algunas partes si el aspecto no coincide), ''xMidYMid meet'' (este es el valor predeterminado, lo mismo que no especificar pAR en absoluto, y significa que el contenido estará centrado y se desbordará en uno dirección si el aspecto no coincide).

Answer 5

http://jsfiddle.net/vnTQT/

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

Usé esto (paper.setViewBox) con paper.setSize (''100%'', ''100%'') y cambio de tamaño de la ventana con el tamaño del contenido de svg trabajando sin usar funciones svg directamente.