राफेल ड्रॉप छाया प्रभाव

क्या किसी को पता है कि राफेल ड्रॉप ड्रॉप के उपयोग का समर्थन करता है या नहीं। मैं अपने द्वारा बनाई गई वस्तु के लिए एक ड्रॉप छाया बनाने की कोशिश कर रहा हूं। यहां मेरे पास कोड है, लेकिन मैं यह नहीं समझ सकता कि मैं एक ड्रॉप छाया कैसे जोड़ूं। कृपया मेरी मदद करें यदि आप मेरे प्रबंधक मेरे साथ बहुत निराश हो रहे हैं।राफेल ड्रॉप छाया प्रभाव

<html> 
<head><title></title> 
<script src="raphael-min.js"></script> 
<script src="jquery-1.7.2.js"></script> 
</head> 

<body> 

<div id="draw-here-raphael" style="height: 200px; width: 400px;"> 
</div> 

<script type="text/javascript"> 
//all your javascript goes here 

var r = new Raphael("draw-here-raphael"), 

    // Store where the box is 
    position = 'left', 

    // Make our pink rectangle 
    rect = r.rect(20, 20, 50, 50).attr({"fill": "#fbb"}); 

</script> 

</body> 
</html>

स्रोत

2012-06-29 John Doe

.glow() -method कुछ हद तक इस्तेमाल किया जा सकता:

var circle = paper.circle(100,100,50); 
var path = paper.path('m200,50 l100,0 l100,100 l0,100 z'); 

circle.glow(); 

path.attr({ 
    fill: 'blue' 
}); 
path.glow({ 
    color: '#444', 
    offsety: 20 
});

यह देखें यहाँ कार्रवाई में: http://jsfiddle.net/sveinatle/gkayG/7/

यह केवल हालांकि लाइनों के लिए काम करने के लिए लगता है, यह वास्तव में भर नहीं परछाई।

स्रोत

2012-06-29 13:40:29 Supr

बहुत बहुत धन्यवाद !!! उसे काम करना होगा। –

ठीक है, बस भरने की संपत्ति सेट करें (जो भी मूल्य, कोई फर्क नहीं पड़ता, जो कुछ भी गलत नहीं है) और आपकी चमक() - उत्पादित ड्रॉप-छाया भर जाती है - http://jsfiddle.net/sveinatle/gkayG/ 3/ – rodneyrehm

@ रोडनीरेम, ग्रेट, जानना अच्छा है, धन्यवाद! जवाब अपडेट करेंगे। आप लिंक मुझे 404 देता है हालांकि ... – Supr

Raphaeljs ऐसी कार्यक्षमता में ही नहीं है, लेकिन plugins वहाँ मदद कर सकता है। इसके अलावा, सरल आकारों के लिए मुझे लगता है कि प्रभाव को दो बार प्रतिपादित करके अनुकरण किया जा सकता है, पहले आंशिक पारदर्शिता के साथ काले रंग में और थोड़ा ऑफसेट (छाया का अनुकरण करने के लिए), और उसके बाद आकार स्वयं ही होता है।

स्रोत

2012-06-29 13:24:33 Qnan

एक एक समारोह है कि किसी और का निर्माण किया है कि मैं सिर में शामिल करके उपयोग कर सकते हैं प्लगइन है? –

यह एक अजीब है, लेकिन लोग [यहां] (https://groups.google.com/d/msg/raphaeljs/S04MBOdf-v0/JxgIuE-24-8J) ऐसा लगता है कि इसका उपयोग कैसे किया जाए – Qnan

महान धन्यवाद श्रीमान !!! –

पुराना सवाल, लेकिन मैं इसके नीचे ऑब्जेक्ट के क्लोन खींचना पसंद करता हूं, प्रत्येक 3 डी प्रभाव प्राप्त करने के लिए, पिछले पिक्सेल को हटा दिया जाता है।

Raphael.el.depth = function(z, shade) { 
    z = (typeof z !== "undefined") ? z : 5; 
    shade = (typeof shade !== "undefined") ? shade : '#999'; 
    for (var c = 0; c < z; c += 1) { 
     var s = this.clone().attr({ 'fill': shade }).transform("t" + (c + 1) + "," + (c + 1)); 
    } 
    this.toFront(); 
};

स्रोत

2012-12-21 19:27:50

मैंने इस तरह की चीज़ों को संभालने के लिए एक विस्तार लिखा था। इसका उपयोग करना वास्तव में आसान है:

circle.shadow();

जो भी आप चाहते हैं वह करेंगे। साथ ही, यह एसवीजी फ़िल्टर प्रभावों का कार्यान्वयन है (जो glow() नहीं है) इसलिए यह एनिमेशन के साथ काम करेगा,

प्रोजेक्ट पेज यहां है: http://chrismichaelscott.github.io/fraphael/।

स्रोत

2013-07-23 17:22:24 chrismichaelscott

clone() फ़ंक्शन का उपयोग करने का एक और बहुत अच्छा समाधान है। यह अच्छा विकल्प है क्योंकि यह जटिल paths के साथ काम करेगा। और यह वास्तव में एक छाया की तरह दिखता है।

बाहर DEMO की जांच:

var r = new Raphael(10,10, 500, 500); 
var p = r.path("M100,300 L100,100 C100,100 250,100 250,300z"); 
p.attr({fill: 'yellow'}); 

p2 = p.clone(); 
p2.attr({fill:'gray', stroke:'none'}).transform('t7,5'); 

p.toFront();

स्रोत

2013-07-23 18:33:08 Brian

उत्तर

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