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

您可以通过绘制外部对象然后逆时针绘制内部对象来制作带有路径的“ donut ”对象(感谢 this SO answer )。因此，您想通过绘制矩形然后在其内部绘制圆形来创建 mask 对象。不幸的是，这意味着您必须以路径表示法绘制所有内容，而不是使用方便的矩形和圆形对象。

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