Cách tạo đối tượng gradient với Raphael

Tôi đang cố sử dụng thư viện đồ họa Raphael JS. Tôi muốn sử dụng gradient thuộc tính nên chấp nhận một đối tượng. Tài liệu nói để tham khảo thông số SVG. Tôi đã tìm thấy đối tượng gradient trong SVG, ví dụ:Cách tạo đối tượng gradient với Raphael

<linearGradient id="myFillGrad" x1="0%" y1="100%" x2="100%" y2="0%"> 
<stop offset="5%" stop-color="red" /> 
<stop offset="95%" stop-color="blue" stop-opacity="0.5" /> 
</linearGradient>

nhưng làm cách nào để tôi tham khảo từ trong javascript của tôi?

circle.attr("gradient", "myFillGrad");

không hoạt động :) Cảm ơn trước

Nguồn

2009-02-22 tarella

UPDATE: Viết lại cho Raphael API mới nhất:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" 
    "http://www.w3.org/TR/html4/strict.dtd"> 
<html lang="en"> 
<head> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
    <title>Linear Gradient</title> 
    <script src="http://raphaeljs.com/raphael.js" type="text/javascript" charset="utf-8"></script> 
</head> 
<body> 
    <script type="text/javascript" charset="utf-8"> 
    var paper = Raphael(10, 10, 800, 600); 
    var circle = paper.circle(150, 150, 150); 
    circle.attr({ 
     "fill": "90-#f00:5-#00f:95", 
     "fill-opacity": 0.5 
    }); 
    </script> 
</body> 
</html>

Các tài liệu cho attr() API mới được tìm thấy here.

Nguồn

2009-02-25 05:46:06

Dường như API này không tồn tại nữa. Xem http://jsfiddle.net/GuQA6/ cho một trường hợp thử nghiệm. Bạn không biết API mới để thay đổi độ mờ đục của các điểm dừng màu, phải không? –

Tôi đã cập nhật mẫu mã để phản ánh API mới nhất. Đặt cược tốt nhất của bạn trong tương lai là đọc tài liệu để tìm hiểu cách các API đã thay đổi. –

Tôi đã cập nhật jsfiddle để khớp với mẫu mã @NathandeVries ... http://jsfiddle.net/GuQA6/155/ chỉ dành cho nhà phát triển tiếp theo muốn xem nó hoạt động. – scunliffe

Tôi không tin rằng raphael API hiện nay cho phép bạn thiết lập Opacity dừng cá nhân khác hơn là người cuối cùng, được đưa ra giá trị thông qua vào "opacity" attr, ví dụ:

this.ellipse(x, y, r, r).attr({stroke: "none", fill: "r(.5,.1)#ccc-#ccc", opacity: 0})

... sẽ có điểm dừng là 0 trong điểm dừng cuối cùng của nó. Để kiểm soát tốt hơn-grained tôi thêm này "trường hợp" vào thuộc tính phân tích cú pháp switch trong Raphaël.js tôi:

case "opacityStops": 
          if (attrs.gradient) { 
           var gradient = doc.getElementById(node.getAttribute(fillString)[rp](/^url\(#|\)$/g, E)); 
           if (gradient) { 
            var stops = gradient.getElementsByTagName("stop"); 
            var opacs=value.split("-"); 
            for(var ii=0;ii<stops.length;ii++){ 
             stops[ii][setAttribute]("stop-opacity", opacs[ii]||"1"); 
            } 
           } 
           break; 
          }

Bạn cũng phải thêm một mục tương ứng trong "availableAttrs" đối tượng, ví dụ:

availableAttrs = {<other attrs here>..., opacityStops:"1"}

một cuộc gọi để tạo ra một vòng tròn với một gradient xuyên tâm với opacity khác nhau ngừng sau đó sẽ như thế nào:

this.ellipse(x, y, r, r).attr({stroke: "none", fill: "r(.5,.5)#fff-#fff:70-#000", "opacityStops": "1-0-0.6"}

Nguồn

2010-08-30 21:58:41 lafncow

Cách tạo đối tượng gradient với Raphael

Trả lời

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