Raphael.js create transparency through intersection of multiple objects
I create a "stunning" effect to show the product (this brilliant "absolutism needed" from the client!).
I already figured out the effect http://jsfiddle.net/EMpQd/9/ (easier to see than explain).
My problem is setting a rectangle in the background and then a circle on top of it, I need to get transparency not only in the circle, but also in the rectangle, in the section covered by the circle (aka intersection).
How can I achieve this? Is this possible with Raphael?
effect code (no transparency):
var w = 800;
var h = 600;
var paper = Raphael(0, 0, w, h);
// i want to show this image through the effect (it 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);
source to share
You can create "donut" objects using paths by pulling out the outer object and then drawing the inner object counterclockwise to the original (thanks to this SO answer ). Thus, you want to create a masking object by drawing a rectangle and then a circle within it. Unfortunately, this means that you have to do everything in path notation instead of using the convenient rectangular and round objects.
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"});
Then you raise the radius, calculate the new path, and animate it:
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));
source to share