राफेल तत्व के लिए चमक कैसे जोड़ें और निकालें?

Question

मैं राफेल तत्व के लिए एक होवर स्थापित करने की कोशिश कर रहा हूं ताकि जब माउस तत्व पर हो, तो इसमें चमक हो और जब माउस छोड़ देता है, तो चमक हटा दी जाती है। मैंने यह पता लगाया है कि चमक कैसे जोड़नी है, लेकिन मुझे इसे हटाने में परेशानी हो रही है। यहाँ मेरी स्क्रिप्ट कैसा दिखता है:

$(document).ready(function() { 
    var paper = Raphael(0,0,360,360); 
    var myCircle = paper.circle(180,180,30).attr('stroke','#FFF'); 
    myCircle.hover(function() { 
     myCircle.glow().attr('stroke','#FFF'); 
    }, function() { 
     // removing the glow from the circle?? 
    }); 
}); 

तो बात यह है कि काम करता है सर्कल के चमक जोड़ रहा है जब मैं उस पर होवर करें। हालांकि, मुझे नहीं पता कि माउस को सर्कल तत्व से दूर ले जाने पर चमक को कैसे हटाया जाए। क्या आप जानते हैं कि मैं तत्व से चमक कैसे हटा सकता हूं?

नोट: शरीर तत्व की पृष्ठभूमि काला (# 000) पर सेट है।

पुस्तकालय उपयोग किया:

• JQuery
• Raphael.js

Answer 1

समाधान आपके विचार से कहीं अधिक सरल है।

http://jsfiddle.net/vszkW/2/ (मैट बेला से कांटा)

तुम बस "चमक" जो एक तत्व है शेयर करना पड़ता है।

myCircle.hover(
    // When the mouse comes over the object // 
    // Stock the created "glow" object in myCircle.g 
    function() { 
     this.g = this.glow({color: "#FFF", width: 100}); 
    }, 
    // When the mouse goes away // 
    // this.g was already created. Destroy it! 
    function() { 
     this.g.remove(); 
    }); 

Answer 2

यह विचित्र व्यवहार है। उदाहरण के लिए (मैं काफी कुछ मिनट के लिए इस के साथ fiddled):

http://jsfiddle.net/FPE6y/

जहां तक ​​मेरा बता सकते हैं, यह हो रहा हो नहीं करना चाहिए। शायद एक बग। राफेलजेएस को ऐतिहासिक रूप से अन-काम करने वाली चीजों के साथ समस्याएं प्रतीत होती हैं: How do you make an element undragable in Raphael?

क्षमा करें मैं एक समाधान प्रस्तुत नहीं कर सकता हूं सिवाय इसके कि शायद सर्कल मिटा दिया गया है और तुरंत एक नए के साथ प्रतिस्थापित किया गया है जिस पर कभी चमक नहीं थी?

इस बीच, report the behavior at GitHub अगर यह नहीं पहले से ही वहाँ है। यदि आप चाहें तो रिपोर्ट में आप मेरे जेएसफ़िल्ड को संदर्भित कर सकते हैं (या इसे फोर्क करें और अपना खुद का सबमिट करें)।

Answer 3

ठीक है, एक हैक का थोड़ा सा।

आप क्योंकि चमक वास्तव में तत्वों की एक सरणी, किसी भी कारण है आसानी से चमक दूर करने के लिए सक्षम होने के लिए वहाँ एक removeGlow समारोह अभी तक नहीं है नहीं जा रहे हैं कि कैप्चर और उन्हें नाखून।

यहाँ, मैं वास्तव में कि यह कार्यक्षमता की जरूरत एक परियोजना है कि अभी क्या मैं के साथ आया है, यहाँ इसे ठीक करने पर आया और लगा एक बार मैं अपने पोस्ट को देखा मैं कुछ के साथ आने चाहते हैं।

ठीक है, चरण 1:

अपने init सामान के ऊपर एक खाली सरणी जोड़े, यह आपके चमक धारण करने के लिए जा रहा है।

var glowsToBeRemoved = [];

चरण 2: Raphael.js में जाकर लगता है (elproto.glow भीतर):

for (var i = 1; i < c + 1; i++) { 
     out.push(r.path(path).attr({ 
      stroke: s.color, 
      fill: s.fill ? s.color : "none", 
      "stroke-linejoin": "round", 
      "stroke-linecap": "round", 
      "stroke-width": +(s.width/c * i).toFixed(3), 
      opacity: +(s.opacity/c).toFixed(3) 
     })); 
    } 

अधिकार इस के बाद (और वापसी से पहले) जोड़ें:

glowsToBeRemoved.push(out); 

तो यह क्या है कर रहे हैं, सभी चमक को धक्का दे रहा है क्योंकि वे एक सरणी में बनाए गए हैं।

अब उन्हें हटाने के लिए, आप .remove() के साथ एक लूप बनायेंगे; अपने होवर-आउट पर।

var i = 0; 
var size=glowsToBeRemoved.length; 
for(i=0; i < size; i++) 
{ 
    glowsToBeRemoved[i].remove(); 
} 

आप एक समारोह में कहा कि तोड़ और अपने मंडराना बाहर, या जो भी आप इसे साथ क्या करना चाहते करने के लिए इसे संलग्न कर सकते हैं: यहाँ यह क्या की तरह लग रही होगी है।

अच्छा लग रहा है?

Answer 4

जबकि Lajarre के जवाब निश्चित रूप से जाने का रास्ता है, वर्तमान में राफेल में एक बग है, निकालें() विधि के कारण न केवल दूर करने के लिए: और राफेल में हमेशा की तरह, तत्वों एक .remove() है चमक तत्व, लेकिन वह तत्व जिस पर चमक लागू की गई थी।

यह अभी भी लाजर के पहेली में क्यों काम कर रहा है मेरी समझ से परे है।

कि इस मुद्दे के बारे में अधिक जानकारी के लिए यहाँ देखें: https://github.com/DmitryBaranovskiy/raphael/issues/508

Answer 5

यह मैं कैसे जोड़ें/का उपयोग कर चमक प्रभाव को दूर है राफेल:

paper.circle(x, y, r) 
    .attr({fill: "lightblue", stroke: "lightblue", "stroke-width": 6}) 
    .hover(function() { 
       this.glowEffect = this.glow({color:"#1693A5", width: 2});       
      }, function() { 
       this.glowEffect.remove();      
      }) 
    .id = "example"; 

मैं सिर्फ राफेल तत्व को ".hover" जोड़ने । अद्यतन jsfiddle लिंक सहित के लिए

var c = paper.circle(x, y, r); 
c.hover(function() { 
       this.glowEffect = this.glow({color:"#1693A5", width: 2});       
      }, function() { 
       this.glowEffect.remove();      
      });