2009-11-09 11 views
5

मैं राफेल के लिए नया ब्रांड हूं और वास्तव में अटक गया हूं, मैं राफेल के साथ एक बटन का उपयोग करके एक div और इसकी सामग्री को घूमना चाहता हूं।मैं राफेल.जेएस के साथ एक div कैसे घुमा सकता हूं?

आदर्श रूप से, मैं एक चिकनी एनीमेशन रखना चाहता हूं जो बटन क्लिक होने पर 0 डिग्री से -90 डिग्री तक हो, फिर जब बटन फिर से क्लिक किया जाता है, तो एनीमेशन विपरीत होगा। मुझे लगता है कि मैं माउस पर आईडी या कक्षा को बदल दूंगा ताकि मैं दोनों एनिमेशन के लिए एक ही बटन का उपयोग कर सकूं। क्या यह बुद्धिमान होगा?

मैं वास्तव में चाहते हैं कुछ मदद कृपया, मेरे सैंडबॉक्स http://jsbin.com/isijo/ पर है और आप किसी भी मदद के लिए अग्रिम में http://jsbin.com/isijo/edit

बहुत धन्यवाद में संपादित कर सकें।

उत्तर

7

हैलो और राफेल में आपका स्वागत है!

मैं राफेल को कुछ महीनों से अधिक समय से देख रहा हूं और हालांकि दस्तावेज बहुत व्यापक नहीं है, सॉफ्टवेयर शानदार है।

मैं कई तरीकों से राफेल वस्तुओं के साथ divs मिश्रण कर रहा हूं और क्या काम करता है और क्या काम नहीं करता है के लिए "महसूस" हो गया है।

मैं सिफारिश कर रहा हूं कि आप divs को घूर्णन करने की कोशिश न करें लेकिन (इसके बजाय) राफेल ऑब्जेक्ट्स।

सब आप इस "tweakable" नीचे दिए गए कोड का उपयोग कर राफेल बटन का एक शाइनी सेट कर सकता है की

पहले ..

var bcontrols = new Array(); 
var yheight = 300; 

for (var i = 0; i < 3; i++) { 
    bcontrols[i] = paper.circle(15 + (35 * i), yheight, 15).attr({ 
     fill: "r(.5,.9)#39c-#036", 
     stroke: "none" 
    }); 

    bcontrols[i].shine = paper.ellipse(15 + (35 * i), yheight, 14, 14).attr({ 
     fill: "r(.5,.1)#ccc-#ccc", 
     stroke: "none", 
     opacity: 0 
    }); 

    bcontrols[i].index = i; 
    bcontrols[i].shine.index = i; 

    bcontrols[i].shine.mouseover(function (e) { 
     this.insertBefore(bcontrols[this.index]); 
    }); 

    bcontrols[i].mouseout(function() { 
     this.insertBefore(bcontrols[this.index].shine); 
    }); 

    /* Called from Raphael buttons */ 
    bcontrols[i].click(function() { 
     alert("Hello you just clicked " + this.index); 

    }); 
} 

इसके बाद आप घूर्णन सेट के बारे में अधिक जानने की जरूरत:

var s = paper.set(); 

s.push(paper.rect(10, 10, 30, 30, 10).attr({fill:'red'})); 

s.push(paper.rect(50, 10, 30, 30, 5).attr({fill:'blue'})); 

s.push(paper.rect(90, 10, 30, 30).attr({fill:'orange'})); 

s.animate({rotation: "360 65 25"}, 2000); 

यह रोटेशन की डिग्री और अंतिम पंक्ति पर "सेट" के घूर्णन के केंद्र को दिखाता है।

मेरे अतिरिक्त राफेल संसाधनों वेबसाइट जो प्रलेखन के पूरक के लिए करना है (अन्य बातों के बीच):

http://www.irunmywebsite.com/raphael/raphaelsource.html

Heres जहां आप परिवर्तन के बिना ऊपर 2 कोड उदाहरण चला सकते हैं:

http://raphaeljs.com/playground.html

मुझे उम्मीद है कि यह मदद मिलेगी ...

+0

आपके इनपुट के लिए धन्यवाद, लेकिन मुझे एक div और घुमावदार एक div को घुमाने की आवश्यकता है, क्या यह सब राफेल ऑब्जेक्ट बन सकता है? सामग्री को गतिशील होने की आवश्यकता है क्योंकि साइट को लगातार अपडेट किया जाएगा। मैं मूल रूप से घूर्णन छवि उदाहरण http://raphaeljs.com/image-rotation.html में क्या करना चाहता हूं लेकिन एक div और इसकी सामग्री के साथ। क्या तुम देखते हो? धन्यवाद फिर से – Zander

+0

ज़ेंडर, किसी भी विशेष कोण पर डीआईवी घुमाने के तरीके हैं लेकिन वे क्रॉस-ब्राउज़र नहीं हैं। यदि यह मैं था तो मैं राफेल ऑब्जेक्ट्स का उपयोग करूंगा। एकमात्र चीज जो मैं नहीं कर सका, उसके पास एक कोण वाला पाठ है लेकिन मुझे नहीं लगता कि उनके लिए कोई मांग है। मेरी साइट पर 10 उदाहरण हैं: http://www.irunmywebsite.com/raphael/raphaelsource.html और वहां एक वाक्यविन्यास जनरेटर भी .. – Chasbeen

2

मेरे ज्ञान के लिए , एक div को राफेल ऑब्जेक्ट में कनवर्ट करने का कोई तरीका नहीं है। चूंकि राफेल घुमावदार आदेश केवल राफेल ऑब्जेक्ट्स के लिए परिभाषित किया गया है, इसलिए आपकी सबसे अच्छी शर्त है कि HTML के बजाय राफेल में अपने div (छवियों, टेक्स्ट, बटन और सभी) के प्रमुख तत्वों को बनाना, उन्हें एक सेट में एक साथ रखना, और, जैसा कि सेट एक राफेल ऑब्जेक्ट है, सेट घुमाएं।

2

Rotate a div in CSS and in IE filters से परामर्श लें। यह SVG जैसा नहीं है, इसलिए यदि आपको अधिक लेआउट जादू की आवश्यकता है, तो राफेल आकारों को जाने का तरीका संभव है। आप अपनी खिड़की में दोनों में हेरफेर करने के लिए राफेल के साथ संगीत कार्यक्रम में JQuery का उपयोग करने में सक्षम होना चाहिए, लेकिन मैं राफेल के लिए नया ब्रांड हूं और ऐसा कभी नहीं किया है।

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