Hiệu ứng đổ bóng Raphael

Có ai biết nếu Raphael hỗ trợ việc sử dụng bóng đổ. Tôi đang cố gắng tạo ra một bóng đổ cho một đối tượng mà tôi đã tạo ra. Đây là mã tôi có, nhưng tôi không thể tìm ra cách tôi sẽ thêm một bóng đổ. Xin hãy giúp tôi nếu bạn có thể quản lý của tôi đang trở nên rất thất vọng với tôi.Hiệu ứng đổ bóng Raphael

<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>

Nguồn

2012-06-29 John Doe

Các .glow() -method thể được sử dụng trong chừng mực nào:

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 
});

Nhìn thấy nó trong hành động ở đây: http://jsfiddle.net/sveinatle/gkayG/7/

~~Nó dường như chỉ làm việc cho các dòng, mặc dù nó không thực sự điền cái bóng.~~

Nguồn

2012-06-29 13:40:29 Supr

Cảm ơn bạn rất nhiều !!! Điều đó sẽ phải làm việc. –

Vâng, chỉ cần đặt thuộc tính điền (cho bất kỳ giá trị nào, không quan trọng, bất kỳ thứ gì không gây phiền toái sẽ làm) và ánh sáng đổ bóng() của bạn được lấp đầy - http://jsfiddle.net/sveinatle/gkayG/ 3/ – rodneyrehm

@rodneyrehm, Tuyệt vời, tốt để biết, cảm ơn! Sẽ cập nhật câu trả lời. Bạn đang liên kết cho tôi một 404 mặc dù ... – Supr

Raphaeljs không có chức năng như vậy chính nó, nhưng có thể giúp plugins đó. Ngoài ra, đối với các hình dạng đơn giản, tôi nghĩ hiệu ứng có thể được mô phỏng bằng cách hiển thị nó hai lần, đầu tiên là màu đen với độ trong suốt một phần và một chút bù đắp (để bắt chước bóng), và sau đó là hình dạng của nó.

Nguồn

2012-06-29 13:24:33 Qnan

là một plugin một chức năng mà người khác xây dựng mà tôi có thể sử dụng bằng cách bao gồm nó trong đầu? –

điều này khá lạ, nhưng những người [ở đây] (https://groups.google.com/d/msg/raphaeljs/S04MBOdf-v0/JxgIuE-24-8J) dường như đã tìm ra cách sử dụng nó – Qnan

Tuyệt vời cảm ơn bạn !!! –

Câu hỏi cũ, nhưng tôi thích vẽ bản sao của đối tượng bên dưới nó, mỗi pixel bị xóa khỏi ảnh trước đó, để có hiệu ứng 3D.

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(); 
};

Nguồn

2012-12-21 19:27:50

Tôi đã viết phần mở rộng để xử lý loại điều này. Nó thực sự dễ sử dụng:

circle.shadow();

sẽ làm những gì bạn muốn. Ngoài ra, đó là việc thực hiện các hiệu ứng bộ lọc SVG (mà glow() không phải là) vì vậy nó sẽ hoạt động với hình động, v.v.

Trang dự án ở đây: http://chrismichaelscott.github.io/fraphael/.

Nguồn

2013-07-23 17:22:24 chrismichaelscott

Một giải pháp rất tốt khác là sử dụng chức năng clone(). Đây là lựa chọn tốt vì nó sẽ làm việc với phức tạp paths. Và nó thực sự trông giống như một cái bóng.

Kiểm tra các 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();

Nguồn

2013-07-23 18:33:08 Brian

Hiệu ứng đổ bóng Raphael

Trả lời

Các vấn đề liên quan