我正在创造一种“惊人”的效果来展示一种产品(那种来自顾客的绝对“绝对需要它”)。
我已经意识到效果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);
您可以通过绘制外部对象,然后将内部对象逆时针绘制到原始对象来制作带路径的“圆环”对象(感谢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));