मैं jquery

Question

का उपयोग कर विंडो आकार बदलने पर राफेल जेएस तत्वों को कैसे स्केल कर सकता हूं। मैं विंडो परिवर्तन पर Raphael कैनवास के अंदर सभी तत्वों को कैसे पुन: सहेज सकता हूं?

पर विचार निम्नलिखित कोड/DEMO अगर मैं फिर से आकार अपनी खिड़की केवल div container बढ़ाया के बाद से मैं खिड़की चौड़ाई का 50% करने के लिए अपनी चौड़ाई सेट और (rect, circle या path) परिवर्तन से कोई भी

कोड

<div id="container"></div>​ 
#container{border : 1px solid black ; 
       width : 50% ; 
       height:300px}​ 
var con = $("#container"); 
var paper = Raphael(con.attr('id'), con.attr('width'), con.attr('height')); 
var win = paper.rect(0,0,400,300).attr({stroke: 'black' }) ; 
var path = paper.path("M 200 100 l 100 0 z") ; 
var cir = paper.circle(50, 50, 40); 

Answer 1

आप Raphaël संस्करण 2.0 या का उपयोग करते हैं बाद में एक वैकल्पिक सेटअप आपके सिस्टम का समन्वय करने के paper.setViewBox कॉल करने के लिए है , और उसके बाद ब्राउज़र स्वचालित रूप से आकार बदलने को संभालते हैं।

अद्यतन: ठीक है, पता चला है Raphaël थोड़ा कम ऑटो स्केलेबल से मैंने सोचा था कि ... वैसे भी, यहाँ एक example (Raphaël अभी भी जड़ < svg> पर एक पूर्ण चौड़ाई/ऊंचाई सेट है, इसलिए वे की जरूरत है सामान्य svg स्केलिंग के लिए हटाया जाना है)। तब आकार सीएसएस द्वारा तय किया जाता है, और एसवीजी बस दिए गए क्षेत्र में फिट है। अतिप्रवाह सामग्री से निपटने के लिए इसे ट्विक करना संभव है, जो एसवीजी व्यूबॉक्स पहलू अनुपात के कारण हो सकता है जो उस सीएसएस बॉक्स से मेल नहीं खाता है। आप रूट svg तत्व में preserveAspectRatio विशेषता जोड़ कर ऐसा करते हैं।

आप ये मान svg preserveAspectRatio विशेषता here पर सेट कर सकते हैं के बारे में और अधिक पढ़ सकते हैं, लेकिन तीन मानों कि शायद हित में होते हैं (फैलाएंगे के लिए/फिट करने के लिए जो कुछ भी रेक्ट दिया जाता है खींच) 'none' हैं, 'xMidYMid slice' (अप पैमाने पर करने के अगर पहलू मेल नहीं खाता है तो संभवतः कुछ हिस्सों को क्लिप करने के लिए, 'xMidYMid meet' (यह डिफ़ॉल्ट है, जैसा कि बिल्कुल पीएआर निर्दिष्ट नहीं है, और इसका मतलब है कि सामग्री केंद्रित होगी और यदि पहलू नहीं है तो एक दिशा में बह जाएगा मैच नहीं)।

Answer 2

आप एक बार मैं पहले का इस्तेमाल किया है इस स्क्रिप्ट का उपयोग कर सकते हैं:

http://www.shapevent.com/scaleraphael/

चेकआउट खिड़की भरें - कैनवास का आकार बदलने के लिए कोई कतरन उदाहरण:

http://www.shapevent.com/scaleraphael/demo1.html

Answer 3

मुझे लगता है कि मैं एक समाधान नहीं मिला: निम्नलिखित कोड जब आकार खिड़की फिर पैमाने सभी तत्व फिर से होगा, और यह मैं

  var w = $(window).width(); 
      var h = $(window).height(); 
      function draw(w, h) { 
       var paper = Raphael($('#wrap').attr('id'), w, h); 
       paper.setViewBox(0, 0, 1500, 1500, true); 
       var rec = paper.rect(0, 0, 200, 200).attr({ stroke: 'black' }); 
       var cir = paper.circle(100, 100, 50); 
      }; 
      draw(w, h); 
      function resize() { 
       var xw = $(window).width(); 
       var xh = $(window).height(); 
       draw(xw, xh) 
      } 
      $(window).resize(resize); 

@Erik Dahlström से संदर्भ के लिए क्या देख रहा था है: Paper.setViewBox(x, y, w, h, fit)और ‘viewBox’ attribute

Answer 4

http://jsfiddle.net/vnTQT/

var paper = Raphael("wrap"); 
    paper.setViewBox(0,0,w,h,true); 
    paper.setSize('100%', '100%'); 

पेपर.सेट आकार ('100%', '100%') के साथ इस (paper.setViewBox) का उपयोग किया गया है और svg सामग्री का उपयोग किए बिना svg सामग्री के आकार के साथ खिड़की का आकार बदलना है।

Answer 5

यदि आपके पास आकार बदलने के लिए तत्वों का एक सेट है, तो आप सीधे अपने जेएस कोड में उपयोग कर सकते हैं ...

for (var i = 0; i < your_set.length; i++) { 
    your_set[i].scale(ratio, ratio, 0,0); 
}; 

... और एक समारोह ब्राउज़र का आकार बदलने पर पृष्ठ पुनः लोड करने के लिए:

window.addEventListener('resize', function() { 
    "use strict"; 
    window.location.reload(); 
});