Масштабирование шаблона заливки в raphael.Яш

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

моя проблема заключается в том, что заливка не масштабируется холстом svg, поэтому пропорционально она заканчивается в два раза больше, чем до масштаба пути. Есть ли простой способ масштабировать шаблон заливки вместе с остальной частью svg?

6
design-patterns fill javascript raphael scale

2 ответов

это примечание можно сделать, используя только функции библиотеки Рафаэля.

когда вы применяете функцию масштаба к объекту Рафаэля, он создает новый узел svg с масштабированными координатами, но, к сожалению, он не изменяет свойства заливки

в любом случае, когда вы добавляете атрибут "fill" с url, библиотека создает шаблон. Если это первый атрибут "fill", который вы используете, этот шаблон называется raphael-pattern-0 под названием raphael-pattern-1, так далее...)

зная это, тогда можно изменить атрибут шаблона в соответствии с SVG технические характеристики

вы можете получить атрибуты шаблона с помощью document.getElementById("raphael-pattern-0") и изменить его свойства с помощью тега setAttribute Например (в зависимости от того, что вы действительно хотите сделать), это может быть что-то вроде:

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

вы также можете изменить x, y, patternUnits и patternContentUnits свойства.

надеюсь, что он ответит свой вопрос.

7

Я не знаю, почему, но моя версия библиотеки Рафаэля (я использую новейшую) не ставит ID как @ThibThib описано. Это наверное потому, что у нас есть 2013 сейчас:)

Я также опубликую свое решение:

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

обратите внимание на несколько вещей:

  • доступ к изображению заливки VML описан здесь:как получить доступ к Raphael fill image в VML

  • после изменения размера изображения мне пришлось сбросить ход для VML версия

  • почему-то jQuery .attr не работал на меня, поэтому я использовал setAttribute (Chrome)

  • Я preserveAspectRatio для достижения того же эффекта, что и в VML. Вы можете отключить его, если хотите увидеть различия (документации)

  • setTimeout используется для ожидания загрузки изображения, поскольку SVG устанавливал параметры после загрузки изображения, и он перезаписывал мой размер изменить

вы можете, конечно, играть с различными настройками, а также:

документация по элементам заполнения VML

SVG Шаблоны

SVG элемент изображения

3