मैं यह जानना चाहता हूं कि Raphael.js ऑब्जेक्ट्स/पथों में धुंधली किनारे वाली ड्रॉप छाया कैसे जोड़ें। जहां तक मुझे पता है पुस्तकालय के साथ यह संभव नहीं है लेकिन क्या वहां कोई काम है?Raphael.js ऑब्जेक्ट्स में कोई छाया ड्रॉप कैसे जोड़ सकता है?
ओपी के अनुरोध के अनुसार, एक अलग उत्तर में Raphael.blur के लिए एक लिंक जोड़ना।
http://github.com/DmitryBaranovskiy/raphael/blob/master/plugins/raphael.blur.js
अपडेट किया गया कोड नमूना:
var shadow = canvas.path(p);
shadow.attr({stroke: "none", fill: "#555", translation: "4,4"});
shadow.blur(4);
var shape = canvas.path(p);
नोट दिमित्री की टिप्पणी में कहा गया है कि वह कोई वेबकिट समर्थन करता है। वह <filter> तत्व और feGaussianBlur फ़िल्टर प्रभाव का उपयोग करता है। वेबकिट ने feGaussianBlur प्रभाव लागू किया है, लेकिन फिल्टर unstable हैं और सफारी में अक्षम हैं (यह क्रोम 5 में काम कर सकता है - निश्चित रूप से क्रोम 6 में काम करना चाहिए)।
ऐसा करने का सबसे आसान तरीका ऑब्जेक्ट को छाया-रंगीन भरने के साथ खींचना है, कुछ पिक्सेल से ऑफ़सेट करना है, और उसके बाद वास्तविक वस्तु को शीर्ष पर खींचें।
var shadow = canvas.path(p);
shadow.attr({stroke: "none", fill: "#555", translation: "4,4"});
var shape = canvas.path(p);
यदि आवश्यक हो तो आप अस्पष्टता विशेषता को भी समायोजित कर सकते हैं।
लेकिन एक छाया रंग भरने एक ठोस बढ़त होगा। मैं हल्के भूरे रंग से 0% अल्फा तक धुंधला हुआ किनारा ढूंढ रहा हूं। तुम्हे पता हैं? –
राफेल में ब्लर प्लगइन है। मैंने इसका कभी भी उपयोग नहीं किया है, इसलिए मैं इसके लिए झुकाव नहीं कर सकता, लेकिन यह दिमित्री द्वारा है, इसलिए हम मान सकते हैं कि वह जानता है कि वह क्या कर रहा है ;-) http://github.com/DmitryBaranovskiy/raphael/blob/master/plugins/ raphael.blur.js –
ओह यह दिलचस्प है। आपको इसे एक उत्तर के रूप में प्रस्तुत करना चाहिए और मैं इसे स्वीकार करूंगा। यदि आप नहीं करते हैं तो मैं इसे अपने आप 3 दिनों में जवाब दूंगा। धन्यवाद। अभी भी छाया को सरल बनाने के लिए राफेल में कोड किया जाना चाहिए। –
मैंने एक प्लगइन लिखा है जो एक एसवीजी फ़िल्टर को लागू करके तत्व में एक ड्रॉप छाया जोड़ता है। यह धुंध प्लगइन पर आधारित है।
आप इसे यहाँ पा सकते हैं: https://github.com/dahoo/raphael.dropshadow.js
आप Element.glow([glow]) का प्रयोग कर एक छाया प्रभाव प्राप्त करने के लिए कर सकते हैं। http://raphaeljs.com/reference.html#Element.glow
+1 जो मेरे लिए काम करता है। मैं राफेल और jQuery का उपयोग कर एक सामान्य बबल विजेट कर रहा हूं। यह मदद करता है, धन्यवाद। –
इसके लिए धन्यवाद, चमक का उपयोग करने के बारे में नहीं सोचा था। चमक के लिए डिफ़ॉल्ट एक 0.5 रंग के साथ एक काला रंग है जो सुझाव देगा कि इसका उद्देश्य ड्रॉप-छाया को चित्रित करने के लिए किया जाना है। –
इस उत्तर में लिंक अब निष्क्रिय है। मुझे लगता है कि अब आपको इसके बजाय प्लगइन का उपयोग करने की आवश्यकता है। –
आप छाया जोड़ने के लिए एक चमक का उपयोग कर सकते हैं।
.glow({ color: '#900', width:10, offsetx:5 }) // random example...
जांच documentation
'.blur' फ़ंक्शन अनियंत्रित है? राफेल दस्तावेज़ों पर कहीं भी नहीं मिल रहा है। या यह मूल है? –
यह एक राफेल प्लगइन है। आप इसे उपरोक्त लिंक पर प्राप्त कर सकते हैं और इसे raphael.js के बाद अपने पृष्ठ में शामिल कर सकते हैं। –
प्लगइन का यूआरएल टूटा हुआ लगता है (404 प्राप्त करना), किसी को भी एक कामकाजी लिंक मिल गया है? – soulBit