javascript - Scaling SVG(Raphael.js) como un SWF
flash vml (5)
Bien hola Zévan,
Encontré una buena respuesta, hecha por un tipo llamado Zevan. Sin embargo, encontré el código demasiado complicado para mi gusto (se requiere jquery, hice cosas extrañas como "$ (esto)", etc.).
Así que lo simplifiqué. Ahora es lo suficientemente corto como para caber en stackoverflow;):
var paper;
window.ScaleRaphael = function(container, width, height) {
var wrapper = document.getElementById(container);
wrapper.style.width = width + "px";
wrapper.style.height = height + "px";
wrapper.style.overflow = "hidden";
wrapper.innerHTML = "<div id=''svggroup''><//div>";
var nestedWrapper = document.getElementById("svggroup");
paper = new Raphael(nestedWrapper, width, height);
paper.w = width;
paper.h = height;
paper.canvas.setAttribute("viewBox", "0 0 "+width+" "+height);
paper.changeSize = function() {
var w = window.innerWidth
var h = window.innerHeight
var ratioW = w / width;
var ratioH = h / height;
var scale = ratioW < ratioH ? ratioW : ratioH;
var newHeight = Math.floor(height * scale);
var newWidth = Math.floor(width * scale);
wrapper.style.width = newWidth + "px";
wrapper.style.height = newHeight + "px";
paper.setSize(newWidth, newHeight);
}
window.onresize = function() {
paper.changeSize();
}
paper.changeSize();
return paper;
}
El único inconveniente de su versión es que requiere SVG, no hace VML. ¿Es esto un problema?
Lo estoy usando con una versión simplificada de tu página de demostración:
<!DOCTYPE html>
<html lang="en">
<head>
<title>ScaleRaphaël Demo 1</title>
<meta charset="utf-8">
<script type="text/javascript" src="raphael.js"></script>
<script type="text/javascript" src="scale.raphael.js"></script>
<script type="text/javascript">
window.onload = function() {
var paper = new ScaleRaphael("wrap", 600, 400);
// draw some random vectors:
var path = "M " + paper.w / 2 + " " + paper.h / 2;
for (var i = 0; i < 100; i++){
var x = Math.random() * paper.w;
var y = Math.random() * paper.h;
paper.circle(x, y,
Math.random() * 60 + 2).
attr("fill", "rgb("+Math.random() * 255+",0,0)").
attr("opacity", 0.5);
path += "L " + x + " " + y + " ";
}
paper.path(path).attr("stroke","#ffffff").attr("stroke-opacity", 0.2);
paper.text(200,100,"Resize the window").attr("font","30px Arial").attr("fill","#ffffff");
}
</script>
<style type="text/css">
body, html {
margin: 0;
padding: 0;
overflow: hidden;
}
#wrap{
background-color: orange;
}
</style>
</head>
<body>
Empecé a usar Raphael.js hace unos días y realmente lo estoy disfrutando. Lo único que no he podido descifrar es cómo obtener la etiqueta "papel" o svg / vml para llenar la ventana del navegador como un swf. Mira este ejemplo.
Tenga en cuenta la forma en que el ejemplo anterior cambia de tamaño con la ventana del navegador
Pude obtener el "papel" para cambiar el tamaño con la ventana del navegador, pero no tuve suerte al obtener todos los gráficos vectoriales para ajustar su tamaño. Cualquier comentario sería muy apreciado.
EDITAR
Probé varias rutas diferentes con esto. viewBox funcionó muy bien, pero es solo SVG. Acabo de descubrir cómo hacerlo usando conjuntos de Raphael y un pequeño código en el evento window.onresize. Publicaré mis hallazgos más tarde esta noche o mañana. Todavía me gustaría ver otras soluciones a la pregunta si hay alguna.
Esto podría ser demasiado viejo para un hilo, pero Raphael 2.0 al menos tiene un método setViewBox - http://raphaeljs.com/reference.html#Paper.setViewBox
Aún necesitará establecer el tamaño real del lienzo en un 100%, de modo que el contenedor se setViewBox a la ventana, pero llamar a setViewBox con la setViewBox w / h adecuada en su callback de windows.resize debería ser el truco.
Me tomó un tiempo, pero finalmente se me ocurrió una solución a este problema. Envolví la solución en un pequeño archivo js que se puede usar con Raphael. Puede obtener el archivo js junto con una documentación simple here . Véalo en acción .
Cómo funciona:
- usar viewBox para svg
- envolver todos los nodos vml en un nodo de grupo
- Envuelva el constructor Raphael para que el nodo del grupo vml se pase al constructor Raphael
- altere algunas propiedades de css cuando el papel se redimensiona para hacer frente al centrado, recorte y mantenimiento de la relación de aspecto correcta.
Cualquier comentario sería muy apreciado.
Puede agregar un atributo ''viewBox'' en el elemento raíz svg para definir el sistema de coordenadas, las formas se escalarán a cualquiera que sea el tamaño del contenedor. Sin embargo, no estoy seguro de cómo lidiar con el lado VML de las cosas. Sugiero informar un problema, https://github.com/DmitryBaranovskiy/raphael/issues .
Puede recorrer todas las rutas y escalarlas () de acuerdo con la nueva escala del papel después de cambiar su tamaño.