राफेल जेएस

Question

में अपने पेपर के चारों ओर सीमा खींचें ठीक है ... राफेल के लिए बेहद नया।

वैसे भी, मैं अपने ड्राइंग के चारों ओर एक सीमा कैसे आकर्षित करूं ताकि मैं अपने कैनवास का आकार देख सकूं?

<script type="text/javascript"> 
    $(document).ready(function() { 

      var paper = Raphael('drawing', 100, 100); 
      var circle = paper.circle(50, 40, 30); 
      var rectangle = paper.rect(60, 60, 100, 20, 5); 
      var filler = { fill: 'red', cursor: 'pointer' }; 

      circle.attr(filler); 
      circle.node.id = 'myCircle'; 

      rectangle.attr(filler); 
    }); 
</script> 

<div id="drawing" class="canvass"> 
</div> 

Answer 1

डिफ़ॉल्ट रूप से यह मत भूलना कि आपका div किसी भी उपलब्ध चौड़ाई को भरने जा रहा है, इसलिए यह कैनवास के समान ही आवश्यक नहीं होगा।

मुझे नहीं लगता कि राफेल आप इसे सीधे करने की अनुमति देता है, लेकिन यहां एक तरह से आप यह कर सकते jQuery उपयोग कर रहा है है:

$('div#drawing').find('> svg,div').css({'border': '1px solid #f00'}); 

या आप बस एक समान तरीके से सीएसएस का उपयोग कर सकते हैं:

div#drawing svg, div#drawing div { 
    border: 1px solid #f00; 
} 

Answer 2

आपने यहां कैनवास का आकार निर्दिष्ट किया है: राफेल ('ड्राइंग', 100, 100);

उस पंक्ति का अर्थ है: ड्राइंग तत्व के अंदर एक 100x100 कैनवास जोड़ें।

यदि आप सीमा जोड़ना चाहते हैं तो ऐसा करने का सबसे सरल और सबसे सही तरीका केवल div को सीमाबद्ध करना है।

<div id="drawing" style="border 2px solid #f00;" class="canvass"></div> 

ऐसा करना चाहिए।