La escala de un patrón de relleno en Raphael.js

StackOverflow https://stackoverflow.com/questions/1098994

Pregunta 

paper=Raphael('previewBody',480,480);
paper.path({"stroke-width":1},'M0,0 L480,240 L480,480 L240,480 z')
  .attr('fill','url(bg.png)'))
  .scale(.5,.5,0,0);

Mi problema es el relleno no se escala con el lienzo SVG, por lo que proporcionalmente, que termina como el doble del tamaño que tenía antes de la escala de la ruta. ¿Hay alguna forma fácil de escalar el patrón de relleno, junto con el resto de la SVG?

¿Fue útil?

Solución

Es posible nota hacerlo usando sólo las funciones de la biblioteca Rafael.

Cuando se aplica la función de escala en el objeto de un Rafael, se crea un nuevo nodo SVG, con las coordenadas escala, pero, por desgracia, no modifica las propiedades de relleno

De todos modos, cuando se agrega el atributo de "rellenar" con una URL, la biblioteca crear un patrón. Si es la primera "llenar" atributo que se utiliza, este patrón se llama raphael-pattern-0 la siguiente se llama raphael-pattern-1, etc ...)

Sabiendo esto, entonces es posible cambiar el atributo del patrón, de acuerdo con la especificaciones SVG

Usted puede obtener los atributos del patrón con document.getElementById("raphael-pattern-0") y cambiar sus propiedades con el setAttribute Por ejemplo (dependiendo de lo que realmente quiere hacer), podría ser algo como: 

var pat = document.getElementById("raphael-pattern-0");
pat.setAttribute("height", pat.getAttribute("height")*0.5);
pat.setAttribute("width", pat.getAttribute("width")*0.5);

También puede modificar las propiedades x, y, patternUnits y patternContentUnits.

Esperamos que se puede responder a su pregunta.

Otros consejos

No sé por qué, pero mi versión de la biblioteca Rafael (yo uso más reciente) no pone ID que describe @ThibThib. Es probablemente porque tenemos 2013 ahora:)

Voy a publicar mi solución, así: 

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <meta charset="utf-8">
        <title>Raphael Test</title>

        <script type="text/javascript" src="js/libs/jquery.js"></script>
        <script type="text/javascript" src="js/libs/raphael.js"></script>
    </head>
    <body>
        <div id="raphael"></div>
        <script type="text/javascript">
            $(document).ready(function() {

                var raphael, path, pattern;

                raphael = Raphael(document.getElementById('raphael'), 500, 500);

                path = raphael.circle(200, 200, 180);
                path.attr('stroke', '#000000');
                path.attr('stroke-width', 3);
                path.attr('stroke-opacity', 1);
                path.attr('fill', 'url(http://3.bp.blogspot.com/_M4WdA9j-b-g/TLMF9JJJwcI/AAAAAAAAAV4/p0Y_Wo3S3sQ/s1600/Landscape1.jpg)');
                pattern = $(path.node).attr('fill');
                if(pattern) {
                    pattern = pattern.replace('url(', '').replace(')', '');
                    pattern = $(pattern);
                }

                // Shape element documentation: http://msdn.microsoft.com/en-us/library/hh846327(v=vs.85).aspx#shape_element
                // Fill element documentation: http://msdn.microsoft.com/en-us/library/bb229596(v=vs.85).aspx

                setTimeout(function() {
                    if(Raphael.vml) { // SVG not supported (IE7 & IE8) and it doesn't work :/

                        var html = $(path.node).html();
                        html = html.replace(/rvml:/g, ''); // remove prefix
                        html = html.replace(/ = /g, '=');
                        html = html.substr(html.indexOf('/>') + 2); // remove xml element

                        var src = '';
                        $(html).each(function() {
                            if($(this).prop("tagName") == 'FILL') {
                                src = $(this).attr('src');
                            }
                        });

                        if(src != '') {
                            var html = $(path.node).html();
                            html = html.replace(src, src + '" size="50,50');
                            $(path.node).html(html);
                            path.attr('stroke', '#000000');
                            path.attr('stroke-width', 3);
                            path.attr('stroke-opacity', 1);
                        }
                    }
                    else { // SVG supported and it prints correct URL
                        $(pattern)[0].setAttribute('width', 50);
                        $(pattern)[0].setAttribute('height', 50);
                        $(pattern).find('image')[0].setAttribute('width', 50);
                        $(pattern).find('image')[0].setAttribute('height', 50);
                        $(pattern).find('image')[0].setAttribute('preserveAspectRatio', 'defer none meet');
                    }
                }, 1000);
            });
        </script>
    </body>
</html>

Aviso pocas cosas:

  • acceso VML relleno de imagen se describe aquí: ¿Cómo acceder a Rafael relleno de imagen en VML

  • después de cambiar el tamaño de la imagen que tenía para restablecer golpe para la versión VML

  • por alguna razón jQuery .attr no funcionó para mí, así que utilicé setAttribute (Chrome)

  • I puse preserveAspectRatio para lograr mismo efecto que en VML. Se puede desactivar si se desea ver las diferencias ( consulte la documentación )

  • setTimeout se utiliza para esperar a que la imagen a cargar, como SVG se ponía params después se cargó la imagen, y se sobrescribe mi cambio de tamaño

Por supuesto, puede jugar con diferentes configuraciones, así:

VML Llenar la documentación elemento

SVG Patrones

SVG elemento de imagen

Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top