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