2010-11-15 17 views
21

भरने के बजाय राफेल कैनवास की चौड़ाई और ऊंचाई निर्दिष्ट करने के बजाय, मुझे इसे अपने कंटेनर के आकार का 100% होना चाहिए। तो मैं सिर्फ राफेल ("कंटेनर", कंटेनर एलिमेंट.विड्थ, कंटेनर एलिमेंट.हेइट) कर सकता हूं और उन मानों को रीसेट करने के लिए ऑनरेज़ फ़ंक्शन सेट कर सकता हूं। लेकिन तब सामग्री बहुत अजीब और व्यस्त हो जाती है क्योंकि मैं खिड़की या कंटेनर का आकार बदलता हूं क्योंकि स्क्रॉलबार (जो मैं चाहता हूं कि यह बहुत छोटा हो) अस्तित्व में और बाहर फ्लैश हो।राफेल कैनवास एक कंटेनर div

क्या राफेल के कैनवास को कंटेनर के पूर्ण आकार में बांधने का यह सही तरीका है? मैं राफेल कैनवास "पूर्ण स्क्रीन" को संपूर्ण ब्राउज़र विंडो को लेने का विकल्प भी प्रदान करना चाहता हूं।

उत्तर

27

यदि आप एक div का उपयोग कर रहे हैं तो आप सीएसएस का उपयोग चौड़ाई और ऊंचाई के 100% तक सेट करने के लिए कर सकते हैं। फिर आप Raphael("container", "100%", "100%")

इसे पूर्ण स्क्रीन बनाने के लिए, अधिकांश ब्राउज़रों के पास ऐसा करने का आदेश होता है। तो यदि आप वास्तव में 100% कर रहे हैं तो जब आप कमांड बटन दबाते हैं उदा। (फ़ायरफ़ॉक्स में एफ 11) यह पूर्ण स्क्रीन बन जाएगा।

+0

मुझे अपने Google समूह चर्चा मंच में दस्तावेज़ों और अन्य पोस्टों को पढ़ने से छाप मिली है कि आपको राफेल कन्स्ट्रक्टर में एक संख्या (पिक्सल की संख्या के लिए) दर्ज करना था, प्रतिशत नहीं। मैं कोशिश करूँगा, धन्यवाद। पूर्ण स्क्रीन के बारे में, मेरा मतलब सिर्फ ब्राउज़र विंडो की पूर्ण स्क्रीन है, इसलिए 100%, 100% इसकी अनुमति देंगे। –

+2

राफेल दस्तावेज विशिष्ट आकारों का उपयोग करके दिखाता है लेकिन प्रतिशत का उपयोग स्वयं अनुभव से काम करता है। मुझे लगता है कि आप राफेल दस्तावेज़ीकरण के बारे में जानते हैं, लेकिन अगर आप ऐसा नहीं करते हैं तो यहां एक लिंक है: http://raphaeljs.com/reference.html –

+1

धन्यवाद एडम, ऐसा लगता है कि यह जवाब है! मैंने प्रलेखन पढ़ा, लेकिन यह विशेष रूप से कहा गया कि हमें वहां कई पिक्सल डालना पड़ा था। –

1

Raphael("container", "100%", "100%"); कैनवास को डीवी कंटेनर की चौड़ाई/ऊंचाई तक भर देगा। यह क्रोम और सफारी में ठीक काम करता है। बोर्ड पर फ़ायरफ़ॉक्स प्राप्त करने के लिए आपको सीएसएस में शरीर और एचटीएमएल 100% चौड़ाई/ऊंचाई देना होगा, अन्यथा वेक्टर को फिसल दिया जाएगा।

+2

क्या यह स्वीकार्य एक के समान सटीक उत्तर नहीं है? –

+1

नहीं, स्वीकृत उत्तर 100% एचटीएमएल और फ़ायरफ़ॉक्स पर शरीर के बारे में कुछ भी नहीं कहता है – supercrabtree

0

इस पर थोड़ा देर हो चुकी है लेकिन मैं यहां अन्य लोगों के लिए पोस्ट करूंगा।

var h = $('container').height(); //get the container height into variable h  
    var w = $('container').width(); //get the container width into variable w 
    //set your Raphael canvas to the variables 
    var contpaper = Raphael("container", w, h); 
    var doit; 
    //function to reload the page and/or do other adjustments 
    function resizedw(){ 
     document.location.reload()     
    } 
    //call function 200 ms after resize is complete. 
    $(window).resize(function(){clearTimeout(doit); 
     doit = setTimeout(function() { 
     resizedw(); 
    }, 200)}); 

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

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