मैं Raphael.js में कैनवास का आकार कैसे बदलूं?

मुझे Raphael.js में कैनवास का आकार बदलने में कठिनाई हो रही है। मैंने सोचा कि मैं बस इस्तेमाल कर सकते हैं:मैं Raphael.js में कैनवास का आकार कैसे बदलूं?

var paper = Raphael("paper", 100, 100);

और यह एक कैनवास चौड़ाई और 100 पिक्सल की ऊंचाई के साथ आईडी "कागज" का उपयोग कर बना सकेगी। हालांकि जब मैं इसे कोशिश करता हूं तो कैनवास इन सेटिंग्स के साथ प्रारंभ नहीं होता है। मैं Raphael.js वेबसाइट पर कुछ मुफ्त आइकन का उपयोग कर रहा हूं और मैं सोच रहा था कि मैं आइकन के आकार को कैसे बदलूं? क्या मुझे ट्रांसफॉर्म फ़ंक्शन का भी उपयोग करना है? यदि ऐसा है तो कृपया कोई jsfiddle उदाहरण बना सकता है।

अग्रिम धन्यवाद।

क्षमा करें अगर मैंने खुद को बहुत अच्छी तरह से समझाया नहीं है, लेकिन राफेल.जेएस मेरे लिए बिल्कुल नया है।

संपादित करें:

मैं अपने सुझाव कोशिश की, लेकिन कोई लाभ नहीं हुआ। यहां वह कोड है जिस पर मैं काम कर रहा हूं। शायद मेरे पास एक संघर्ष या कुछ है। कोई विचार?

<!DOCTYPE html> 
<html> 
    <head> 
     <title>Logo Experiment</title> 
     <link rel="stylesheet" href="css/960_16_col.css"/> 
     <link rel="stylesheet" href="css/stylesheet.css"/> 
     <script src="js/jquery.min.js"></script> 
     <script src="js/raphael-min.js"></script> 
     <script src="js/script.js"></script> 
    </head> 
    <body> 
     <div class="container_16"> 
      <div class="grid_4"> 
       <div id="design"></div> 
      </div> 
      <div class="grid_2"> 
       <div class="arrow"></div> 
      </div> 
      <div class="grid_4"> 
       <div id="build"></div> 
      </div> 
      <div class="grid_2"> 
       <div class="arrow"></div> 
      </div> 
      <div class="grid_4"> 
       <div id="deliver"></div> 
      </div> 
      <div class="clear"></div>  
     </div> 
    </body> 
</html>

window.onload = function() { 
    var design = Raphael("design"); 
    design.path("M24.359,18.424l-2.326,1.215c0.708,1.174,1.384,2.281,1.844,3.033l2.043-1.066C25.538,20.822,24.966,19.652,24.359,18.424zM19.143,14.688c0.445,0.84,1.342,2.367,2.274,3.926l2.414-1.261c-0.872-1.769-1.72-3.458-2.087-4.122c-0.896-1.621-1.982-3.108-3.454-5.417c-1.673-2.625-3.462-5.492-4.052-4.947c-1.194,0.384,1.237,4.094,1.876,5.715C16.73,10.147,17.991,12.512,19.143,14.688zM26.457,22.673l-1.961,1.022l1.982,4.598c0,0,0.811,0.684,1.92,0.213c1.104-0.469,0.81-1.706,0.81-1.706L26.457,22.673zM24.35,15.711c0.168,0.339,2.924,5.93,2.924,5.93h1.983v-5.93H24.35zM18.34,15.704h-4.726l-3.424,5.935h11.66C21.559,21.159,18.771,16.479,18.34,15.704zM3.231,21.613l3.437-5.902H2.083v5.93h1.133L3.231,21.613zM15.048,10.145c0-0.93-0.754-1.685-1.685-1.685c-0.661,0-1.231,0.381-1.507,0.936l2.976,1.572C14.97,10.725,15.048,10.444,15.048,10.145zM14.343,12.06l-3.188-1.684L9.62,13.012l3.197,1.689L14.343,12.06zM3.192,26.886l-0.384,1.108v0.299l0.298-0.128l0.725-0.896l2.997-2.354l-3.137-1.651L3.192,26.886zM9.02,14.044l-4.757,8.17l3.23,1.706l4.728-8.186L9.02,14.044z").attr({fill: "#666", stroke: "#000"}); 

    var build = Raphael("build"); 
    build.path("M28.537,9.859c-0.473-0.259-1.127-0.252-1.609-0.523c-0.943-0.534-1.186-1.316-1.226-2.475c-2.059-2.215-5.138-4.176-9.424-4.114c-1.162,0.017-2.256-0.035-3.158,0.435c-0.258,0.354-0.004,0.516,0.288,0.599c-0.29,0.138-0.692,0.147-0.626,0.697c2.72-0.383,7.475,0.624,7.116,2.966c-0.08,0.521-0.735,1.076-1.179,1.563c-1.263,1.382-2.599,2.45-3.761,3.667l0.336,0.336c0.742-0.521,1.446-0.785,2.104-0.785c0.707,0,1.121,0.297,1.276,0.433c0.575-0.618,1.166-1.244,1.839-1.853c0.488-0.444,1.047-1.099,1.566-1.178l0.949-0.101c1.156,0.047,1.937,0.29,2.471,1.232c0.27,0.481,0.262,1.139,0.521,1.613c0.175,0.324,0.937,1.218,1.316,1.228c0.294,0.009,0.603-0.199,0.899-0.49l1.033-1.034c0.291-0.294,0.501-0.6,0.492-0.896C29.754,10.801,28.861,10.035,28.537,9.859zM13.021,15.353l-0.741-0.741c-3.139,2.643-6.52,5.738-9.531,8.589c-0.473,0.443-1.452,1.021-1.506,1.539c-0.083,0.781,0.95,1.465,1.506,2c0.556,0.533,1.212,1.602,1.994,1.51c0.509-0.043,1.095-1.029,1.544-1.502c2.255-2.374,4.664-4.976,6.883-7.509c-0.312-0.371-0.498-0.596-0.498-0.596C12.535,18.451,11.779,17.272,13.021,15.353zM20.64,15.643c-0.366-0.318-1.466,0.143-1.777-0.122c-0.311-0.266,0.171-1.259-0.061-1.455c-0.482-0.406-0.77-0.646-0.77-0.646s-0.862-0.829-2.812,0.928L7.44,6.569C7.045,6.173,7.203,4.746,7.203,4.746L3.517,2.646L2.623,3.541l2.1,3.686c0,0,1.428-0.158,1.824,0.237l7.792,7.793c-1.548,1.831-0.895,2.752-0.895,2.752s0.238,0.288,0.646,0.771c0.196,0.23,1.188-0.249,1.455,0.061c0.264,0.312-0.196,1.41,0.12,1.777c2.666,3.064,6.926,7.736,8.125,7.736c0.892,0,2.021-0.724,2.948-1.64c0.925-0.917,1.639-2.055,1.639-2.947C28.377,22.567,23.704,18.309,20.64,15.643z").attr({fill: "#666", stroke: "#000"}); 

    var deliver = Raphael("deliver"); 
    deliver.path("M17.078,22.004l-1.758-4.129l-2.007,4.752l-7.519-3.289l0.174,3.905l9.437,4.374l10.909-5.365l-0.149-4.989L17.078,22.004zM29.454,6.619L18.521,3.383l-3.006,2.671l-3.091-2.359L1.546,8.199l3.795,3.048l-3.433,5.302l10.879,4.757l2.53-5.998l2.257,5.308l11.393-5.942l-3.105-4.709L29.454,6.619zM15.277,14.579l-9.059-3.83l9.275-4.101l9.608,3.255L15.277,14.579z").attr({fill: "#666", stroke: "#000"}); 

    $('.arrow').each(function(i) { 
     arrow = Raphael($(this)[0]); 
     arrow.path("M10.129,22.186 16.316,15.999 10.129,9.812 13.665,6.276 23.389,15.999 13.665,25.725z").attr({fill: "#666", stroke: "#000"}); 
    }); 
};

#design { 
    width: 100px; 
    height: 100px; 
}

स्रोत

2013-02-10 user1408643

मैंने अपना कोड इस पहेली पर रखा है http://jsfiddle.net/twe7J/ ताकि आप परिणाम देख सकें। '$() में। प्रत्येक' आपको '$ (यह) [0] 'करने की आवश्यकता नहीं है क्योंकि यह वही बात है जो' यह 'डालने जैसा है (JQuery इस में प्रत्यक्ष डीओएम तत्व संदर्भ डालता है डिफ़ॉल्ट रूप से '। – Plynx

शीर्षक में अपने सटीक सवाल का जवाब करने के लिए, आप राफेल डॉक्स से प्रयोग करेंगे paper.setSize(width, height)

enter image description here

आपका अन्य प्रश्न अलग जवाब ।

var paper = Raphael("paper", 100, 100); आवश्यक है कि आपके पास पहले से ही आपके पृष्ठ पर id="paper" के साथ कुछ DOM तत्व है। उस डीओएम तत्व में आपके कैनवास को पकड़ने के लिए पर्याप्त चौड़ाई और ऊंचाई होनी चाहिए (इस मामले में, 100x100)। या, आप चौड़ाई और ऊंचाई को छोड़ सकते हैं और यह कंटेनर की चौड़ाई और ऊंचाई (बहुत सुविधाजनक) पर ले जाएगा। आप दस्तावेज के ऊपरी बाईं ओर 100x100 कैनवास बनाने के लिए var paper = Raphael(0, 0, 100, 100); जैसे सभी चार आयामों को डालकर एक डोम तत्व के बिना कैनवास भी बना सकते हैं।

राफेल आइकन का आकार बदलने के लिए, आप ट्रांसफॉर्म फ़ंक्शन का उपयोग कर सकते हैं। उदाहरण के लिए icon.transform("s2"); इसे दो बार बड़ा बनाने के लिए।

This fiddle दिखाता है कि राफेल कैनवास कैसे बनाएं और उस पर पेंसिल आइकन डालें, इसे पीला बनाएं, और दोहरा आकार दें। ध्यान दें कि पृष्ठ के शीर्ष और बाईं ओर क्लिपिंग से रोकने के लिए हमें शीर्ष बाएं कोने (आमतौर पर यह केंद्र के चारों ओर स्केल) के चारों ओर स्केल करने की आवश्यकता है।

var pencil = "M25.31,2.872l-3.384-2.127c-0.854-0.536-1.979-0.278-2.517,0.576l-1.334,2.123l6.474,4.066l1.335-2.122C26.42,4.533,26.164,3.407,25.31,2.872zM6.555,21.786l6.474,4.066L23.581,9.054l-6.477-4.067L6.555,21.786zM5.566,26.952l-0.143,3.819l3.379-1.787l3.14-1.658l-6.246-3.925L5.566,26.952z" 
var paper = Raphael(0,0,200,200); 
var icon = paper.path(pencil).attr({fill: "yellow"}).transform("s2,2,0,0");

स्रोत

2013-02-10 22:37:50 Plynx

मैं Raphael.js में कैनवास का आकार कैसे बदलूं?

उत्तर

संबंधित मुद्दे