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

मेरी समस्या यह है कि एसपीजी कैनवास के साथ भरना नहीं है, इसलिए आनुपातिक रूप से, यह पथ के पैमाने से पहले आकार के दोगुने आकार के रूप में समाप्त होता है। क्या बाकी एसवीजी के साथ भरने के पैटर्न को स्केल करने का कोई आसान तरीका है?raphael.js में एक भरने पैटर्न स्केलिंग

स्रोत

2009-07-08 barbarianbob

रैफेल लाइब्रेरी के केवल कार्यों का उपयोग करके इसे करना संभव है।

जब आप एक राफेल की वस्तु पर पैमाने समारोह लागू होते हैं, यह एक नया svg नोड, निर्देशांक के साथ बढ़ाया बनाता है, लेकिन दुर्भाग्य से, यह भरने गुण

वैसे भी, जब आप विशेषता जोड़ संशोधित नहीं करता है " भरें "एक यूआरएल के साथ, पुस्तकालय एक पैटर्न बनाते हैं। यदि यह पहली "भरने" विशेषता है कि आप का उपयोग करें, इस पद्धति raphael-pattern-0 कहा जाता है अगले एक raphael-pattern-1 कहा जाता है, आदि ...)

यह जानने के बाद, यह है तो संभव पैटर्न की विशेषता को बदलने के लिए, कुछ SVG specifications

के अनुसार आप 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 गुणों को भी संशोधित कर सकते हैं।

आशा है कि यह आपके प्रश्न का उत्तर देगा।

स्रोत

2009-07-08 17:14:12 ThibThib

मुझे नहीं पता कि राफेल लाइब्रेरी का मेरा संस्करण (मैं नवीनतम उपयोग करता हूं) आईडी को @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 भरने छवि यहाँ वर्णित है: How to access Raphael fill image in VML
छवि के आकार को बदलने के बाद मुझे वीएमएल संस्करण
किसी कारण jQuery .attr मेरे लिए काम नहीं किया के लिए
, तो मैं setAttribute (क्रोम)
मैं preserveAspectRatio सेट VML में के रूप में ही प्रभाव को प्राप्त करने के लिए इस्तेमाल।आप इसे अक्षम अगर आप मतभेद (see documentation)
देखना चाहते हैं
setTimeout छवि के लिए प्रतीक्षा करने के लिए इस्तेमाल किया जाता है, लोड करने के लिए के रूप में एसवीजी पैरामीटर की स्थापना की गई थी के बाद छवि लोड किया गया था, और यह मेरी आकार परिवर्तन अधिलेखित था