라파엘, 배경에 이미지 채우기 (채우기)

다음 문제로 어려움을 겪고 있습니다.라파엘, 배경에 이미지 채우기 (채우기)

나는 하나의 이미지로 채우기를 원한다. Raphael은 기본 설정으로 패턴을 사용하므로 이미지가 반복됩니다.

이 작업을 수행해야하는 http://xn--dahlstrm-t4a.net/svg/raphaeljs/fill-shape-with-image.html이 발견되었지만 동일한 문제가 계속 발생합니다.

왼쪽 위 모서리에서 오른쪽 하단 모서리까지 하나의 이미지를 설정할 수있는 방법을 코드를 조정하는 방법을 알려주세요.

case "fillfit": 
     var isURL = Str(value).match(R._ISURL); 
     if (isURL) { 
      el = $("pattern"); 
      var ig = $("image"); 
      console.log('R', R); 
      el.id = R.createUUID(); 
      $(el, {x: 0, y: 0, height: 1, width: 1, "patternContentUnits": "objectBoundingBox"}); 
      $(ig, {x: 0, y: 0, width: 1, height: 1, "preserveAspectRatio": "none", "xlink:href": isURL[1]}); 

      el.appendChild(ig); 
      o.paper.defs.appendChild(el); 
      $(node, {fill: "url(#" + el.id + ")"}); 
      o.pattern = el; 
      o.pattern && updatePosition(o); 
     } 
     break;

repeating background

용액의 기초가 here를 찾을 수 원샷

출처

2013-06-18 Heikki Mustonen

봅니다 정확한 요소를 볼 쉽게있을 것입니다 어디에 어떻게 당신은 배경 이미지 주석의 – Brian

덕분에 로마를 설정합니다. 적절한 솔루션을 찾을 수 없기 때문에 그 솔루션을 쓰레기통에 버렸습니다. 나의 현재 해결책은 방금 상자를 투명하게 만들고 종이를 만들었다는 것입니다. 그것은 특성을 훨씬 잘 제어 할 수있는 것 같습니다. –

너의. 저는이 작업을 제가 작업하고있는 사이트에 통합하고 싶었지만 Raphael의 비표준 버전을 사용하고 싶지 않았습니다. 그리고 그것은 또한 내 손가락을 교차 시켜서 Raphael에서 일하는 사람들은 Dahlström에 의해 제안 된 솔루션을 통합 할 것입니다.

이 예는 완전히 자체적으로 작동합니다. jsfiddle 웹 사이트에 데모를 업로드 할

<html> 
    <head> 
     <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script> 
     <script src="http://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"></script> 
     <script> 
      $(function() { 
       var paper = Raphael(document.getElementById("paper"), 100, 100); 
       var circle = paper.circle(50, 50, 50); 
       var uuid = Raphael.createUUID(); 
       var pattern = document.createElementNS("http://www.w3.org/2000/svg", "pattern"); 
       var backgroundImage = paper.image("https://si0.twimg.com/profile_images/916160956/thumbnail_10502_bigger.jpg", 0, 0, 1, 1); 
       pattern.setAttribute("id", uuid); 
       pattern.setAttribute("x", 0); 
       pattern.setAttribute("y", 0); 
       pattern.setAttribute("height", 1); 
       pattern.setAttribute("width", 1); 
       pattern.setAttribute("patternContentUnits", "objectBoundingBox"); 

       $(backgroundImage.node).appendTo(pattern); 

       $(pattern).appendTo(paper.defs); 
       $(circle.node).attr("fill", "url(#" + pattern.id + ")"); 
      }); 
     </script> 
    </head> 
    <body> 
     <div id="paper"></div> 
    </body> 
</html>

출처

2013-08-19 18:49:19

라파엘, 배경에 이미지 채우기 (채우기)

답변

관련 문제