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）。因此，您想通过绘制矩形然后在其中绘制圆形来创建遮罩对象。不幸的是，这意味着您必须使用路径符号来绘制所有内容，而不是使用方便的 rect 和 circle 对象。

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