Mở rộng mẫu tô đầy trong raphael.js

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

Vấn đề của tôi là điền không được chia tỷ lệ với canvas svg, vì vậy tỷ lệ này sẽ lớn hơn gấp đôi kích thước của đường dẫn. Có cách nào dễ dàng để mở rộng mẫu điền cùng với phần còn lại của svg không?Mở rộng mẫu tô đầy trong raphael.js

Nguồn

2009-07-08 barbarianbob

Đó là lưu ý khả năng để làm điều đó bằng cách chỉ sử dụng các chức năng của thư viện raphael.

Khi bạn áp dụng các chức năng quy mô trên đối tượng của raphael, nó tạo ra một nút svg mới, với các tọa độ quy mô, nhưng không may, nó không sửa đổi các thuộc tính fill

Dù sao, khi bạn thêm thuộc tính " điền vào "bằng url, thư viện sẽ tạo mẫu. Nếu nó là người đầu tiên "lấp đầy" thuộc tính mà bạn sử dụng, mô hình này được gọi là raphael-pattern-0 người tiếp theo được gọi là raphael-pattern-1, vv ...)

Biết được điều này, đó là sau đó có thể thay đổi các thuộc tính của mô hình, theo SVG specifications

bạn có thể nhận được các thuộc tính của mô hình với document.getElementById("raphael-pattern-0") và thay đổi thuộc tính của nó với setAttribute Ví dụ (tùy thuộc vào những gì bạn thực sự muốn làm), nó có thể là một cái gì đó như:

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

Bạn cũng có thể thay đổi x, y, patternUnits và patternContentUnits tài sản.

Hy vọng nó sẽ trả lời câu hỏi của bạn.

Nguồn

2009-07-08 17:14:12 ThibThib

Tôi không biết tại sao nhưng phiên bản của tôi về Raphael thư viện (tôi sử dụng mới nhất) không đặt ID như @ThibThib mô tả. Có lẽ vì chúng ta có 2013 bây giờ :)

tôi sẽ gửi giải pháp của tôi cũng như:

vài điều

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

Chú ý:

truy cập VML điền hình ảnh được mô tả ở đây: How to access Raphael fill image in VML
sau khi thay đổi kích thước của hình ảnh tôi đã phải thiết lập lại đột quỵ cho phiên bản VML
vì một lý do jQuery .attr không làm việc cho tôi, vì vậy tôi sử dụng setAttribute (Chrome)
tôi đặt preserveAspectRatio để đạt được tác dụng tương tự như trong VML.Bạn có thể vô hiệu hóa nó nếu bạn muốn thấy sự khác biệt (see documentation)
setTimeout được sử dụng để chờ đợi hình ảnh được nạp, như SVG được thiết params sau khi hình ảnh đã được nạp, và nó đã được ghi đè lên thay đổi kích thước của tôi