Chciałbym dowiedzieć się, jak dodać niewyraźne krawędzi zacienionych do obiektów/ścieżek Raphael.js. O ile mi wiadomo, nie jest to możliwe z biblioteką tak jak jest, ale czy istnieje jakieś obejście?Jak dodać cień do obiektów Raphael.js?
Dodanie linku do Raphael.blur w oddzielnej odpowiedzi, zgodnie z żądaniem OP.
http://github.com/DmitryBaranovskiy/raphael/blob/master/plugins/raphael.blur.js
Updated przykładowy kod:
var shadow = canvas.path(p);
shadow.attr({stroke: "none", fill: "#555", translation: "4,4"});
shadow.blur(4);
var shape = canvas.path(p);
Należy pamiętać, że w komentarzach Dmitry on mówi, że nie ma wsparcia WebKit. Używa elementu <filter> i efektu filtra feGaussianBlur. WebKit wdrożył efekt feGaussianBlur, ale filtry są unstable i są wyłączone w Safari (może działać w Chrome 5 - zdecydowanie powinno działać w Chrome 6).
Najprostszym sposobem jest narysowanie obiektu wypełnieniem w kolorze cienia, przesunięcie o kilka pikseli, a następnie narysowanie rzeczywistego obiektu na wierzchu.
var shadow = canvas.path(p);
shadow.attr({stroke: "none", fill: "#555", translation: "4,4"});
var shape = canvas.path(p);
W razie potrzeby można również dostosować atrybut krycia.
ale cień kolorowe napełnienia będzie mieć stały brzeg. Szukam krawędzi, która jest zamazana, od jasnoszarego do 0% alfa. wiesz? –
Raphael ma wtyczkę rozmycia. Nigdy go nie używałem, więc nie mogę ręczyć za to, ale to Dmitry, więc możemy założyć, że wie, co robi ;-) http://github.com/DmitryBaranovskiy/raphael/blob/master/plugins/ raphael.blur.js –
To ciekawe. Powinieneś przesłać ją jako odpowiedź, a ja ją przyjmuję. Jeśli tego nie zrobisz, odpowiem sam za 3 dni. Dzięki. Cień powinien być zakodowany na Rafaela, aby był prostszy. –
Napisałem wtyczkę dodającą cień do elementu poprzez zastosowanie do niego filtra SVG. Jest to oparte na rozmycie rozmycie.
Można go znaleźć tutaj: https://github.com/dahoo/raphael.dropshadow.js
Można użyć Element.glow([glow]) aby uzyskać efekt cienia. http://raphaeljs.com/reference.html#Element.glow
+1, które sprawdziły się u mnie. Robię ogólny widget bąbelkowy za pomocą Raphaela i jQuery. To pomaga, dzięki. –
Dzięki temu nie pomyślałem o używaniu blasku. Wartości domyślne dla blasku to czarny kolor z kryciem 0,5, co sugeruje, że jest przeznaczony do rysowania cieni. –
Link w tej odpowiedzi jest teraz nieaktywny. Myślę, że musisz teraz użyć wtyczki. –
Możesz użyć blasku, aby dodać cienie.
.glow({ color: '#900', width:10, offsetx:5 }) // random example...
sprawdzenie się z documentation
Czy funkcja '.blur' jest nieudokumentowana? Nie można go znaleźć nigdzie w dokumentach Raphaela. Czy jest rodzimy? –
To jest wtyczka Raphael. Możesz go uzyskać pod linkiem powyżej i umieścić go na swojej stronie po raphael.js. –
Adres URL wtyczki wydaje się być uszkodzony (uzyskanie 404), ktoś ma działający link? – soulBit