Raphael.js에서 채우기 패턴 스케일링

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

문제 

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와 함께 충전 패턴을 확장하는 쉬운 방법이 있습니까?

도움이 되었습니까?

해결책

라파엘 라이브러리의 기능 만 사용하여이를 수행 할 수 있습니다.

라파엘의 객체에 스케일 함수를 적용하면 좌표가 스케일링 된 새로운 SVG 노드를 만듭니다. 불행히도 채우기 속성을 수정하지는 않습니다.

어쨌든 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 속성.

그것이 당신의 질문에 대답하기를 바랍니다.

다른 팁

왜 그런지 모르겠지만 내 버전의 Raphael Library (최신 사용)는 @thibthib가 설명한 것처럼 ID를 넣지 않습니다. 아마도 우리가 지금 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 채우기 이미지 액세스는 다음과 같습니다. VML에서 Raphael 채우기 이미지에 액세스하는 방법

  • 이미지 크기를 변경 한 후 VML 버전에 대한 스트로크를 재설정해야했습니다.

  • 어떤 이유로 jQuery .attr 나를 위해 일하지 않았으므로 사용했습니다 setAttribute (크롬)

  • 나는 설정했다 preserveAspectRatio VML과 동일한 효과를 달성합니다. 차이를보고 싶다면 비활성화 할 수 있습니다 (문서를 참조하십시오)

  • setTimeout 이미지가로드 된 후 SVG가 매개 변수를 설정하고 크기 변경을 덮어 쓰고 있었기 때문에 이미지가로드 될 때까지 기다리는 데 사용됩니다.

물론 다른 설정도 플레이 할 수 있습니다.

VML 요소 문서를 채우십시오

SVG 패턴

SVG 이미지 요소

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top