Raphael.js通過多個對象創建透明度

Question

我正在創造一種「驚人的」效果來展示產品（從客戶那裏獲得的輝煌「絕對需要」）。

我已經意識到效果http://jsfiddle.net/EMpQd/9/（這比看更容易解釋）。我的問題是：在背景中設置一個矩形，然後在它的頂部設置一個圓，我不僅需要在圓中獲取透明度，還需要在矩形中獲取透明度（圓十字路口）。

我怎麼能做到這一點？拉斐爾可能嗎？該效果

碼（不透明度）：

var w = 800; 
var h = 600; 

var paper = Raphael(0, 0, w, h); 

// i want to show this image through the effect (it's just an example) 
paper.image("http://static.pourfemme.it/pfmoda/fotogallery/625X0/63617/borsa-alviero-martini-rodeo-drive.jpg", 0, 0, w, h); 

// colored background 
paper.rect(0, 0, w, h).attr("fill", "#999").attr("stroke-width", 0).attr("opacity", 1); 

// the circle in which i'll show the product 
var circle = paper.circle(400, 300, 1); 

circle.attr({fill: "#FFF", stroke: "#FFF", "stroke-width": 0}); 

//expand the circle 
circle.animate({r: w*2}, 10000); 

Answer 1

可以通過繪製外部對象，然後拉伸該內部對象逆時針到原始（多虧this SO answer）使與路徑「環形的」對象。所以你想通過繪製矩形然後在其內部的圓形創建一個遮罩對象。不幸的是，這意味着你必須繪製所有的路徑符號，而不是使用方便的矩形和圓形對象。

var w = 800; 
var h = 600; 

var paper = Raphael(0, 0, w, h); 

// i want to show this image through the effect 
paper.image("http://static.pourfemme.it/pfmoda/fotogallery/625X0/63617/borsa-alviero-martini-rodeo-drive.jpg", 0, 0, w, h); 

//path coordinates for bounding rectangle 
var outerpath = "M0,0L" + w + ",0L" + w + "," + h + "L0," + h + "L0,0z"; 

//path coordinates for inner circle 
var r = 1; 
//see https://stackoverflow.com/questions/5737975/circle-drawing-with-svgs-arc-path for explanation of the extra 0.1 pixel 
var innerpath = "M" + (w/2) + "," + (h/2 - r) + "A" + r + "," + r + " 0 1,0 " + (w/2 + 0.1) + "," + (h/2 - r) + "z"; 

var path1 = outerpath + innerpath; 
var mask = paper.path(path1).attr({stroke: 0, fill: "#999"}); 

然後您半徑，計算新的路徑，並以動畫播放：

r = 600; 

var innerpath = "M" + (w/2) + "," + (h/2 - r) + "A" + r + "," + r + " 0 1,0 " + (w/2 + 0.001) + "," + (h/2 - r) + "z"; 

var path2 = outerpath + innerpath; 

var anim = Raphael.animation({path: path2}, 2000); 
mask.animate(anim.delay(1000)); 

updated fiddle