2

我正在创造一种“惊人的”效果来展示产品（客户“绝对需要它”！）。

我已经意识到效果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);
4

1 回答 1

5

您可以通过绘制外部对象然后将内部对象逆时针绘制到原始对象来制作带有路径的“甜甜圈”对象（感谢这个 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));

更新的小提琴

于 2013-01-23T14:39:42.440 回答