Skalierung eines Füllmusters in Raphael.js

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

Frage 

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

Mein Problem ist, dass die Füllung nicht mit der SVG -Leinwand skaliert ist. Proportional wird sie so doppelt so groß wie vor dem Weg des Pfades. Gibt es eine einfache Möglichkeit, das Füllmuster zusammen mit dem Rest des SVG zu skalieren?

War es hilfreich?

Lösung

Es ist möglich, dies zu tun, indem nur die Funktionen der Raphael -Bibliothek verwendet werden.

Wenn Sie die Skalierungsfunktion auf das Objekt eines Raphael anwenden, werden ein neuer SVG -Knoten erstellt, wobei die Koordinaten skaliert sind, aber leider ändert er die Fülleigenschaften nicht

Wenn Sie das Attribut "Füll" mit einer URL hinzufügen, erstellt die Bibliothek ein Muster. Wenn es das erste "Füll" -attribut ist, das Sie verwenden, wird dieses Muster aufgerufen raphael-pattern-0 Der nächste heißt raphael-pattern-1, etc...)

Wenn Sie dies wissen, ist es dann möglich, das Attribut des Musters gemäß dem zu ändern SVG -Spezifikationen

Sie können die Attribute des Musters mit erhalten document.getElementById("raphael-pattern-0") und ändern seine Eigenschaften mit dem setAttributeZum Beispiel (je nachdem, was Sie wirklich tun möchten) könnte es so etwas sein wie:

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

Sie können die auch ändern x, y, patternUnits und patternContentUnits Eigenschaften.

Ich hoffe, es wird Ihre Frage beantworten.

Andere Tipps

Ich weiß nicht warum, aber meine Version von Raphael Library (ich benutze das Neueste) hat ID nicht wie @Thibthib beschrieben. Es ist wahrscheinlich, weil wir jetzt 2013 haben :)

Ich werde auch meine Lösung veröffentlichen:

<!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>

Beachten Sie einige Dinge:

  • Der Zugriff auf VML -Füllbild wird hier beschrieben: So greifen Sie auf Raphael zu, das Bild in VML füllt

  • Nachdem ich die Größe des Bildes geändert habe, musste ich einen Schlaganfall für die VML -Version zurücksetzen

  • Aus irgendeinem Grund jQuery .attr hat bei mir nicht funktioniert, also habe ich benutzt setAttribute (Chrom)

  • ich setze preserveAspectRatio den gleichen Effekt wie in VML erreichen. Sie können es deaktivieren, wenn Sie Unterschiede sehen möchten (Siehe Dokumentation)

  • setTimeout Es wird verwendet, um auf das Laden des Bildes zu warten, da SVG Parames nach dem Laden des Bildes einstellte und meine Größenänderung überschrieben hat

Sie können natürlich auch mit verschiedenen Einstellungen spielen:

VML -Füllelement -Dokumentation

SVG -Muster

SVG -Bildelement

Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top