Raphael.js create transparency thorugh the intersection of multiple object

I'm creating an "amazing" effect to show a product (that brilliant 'absolutedy need it' from the customer!).

I've already realized the effect http://jsfiddle.net/EMpQd/9/ (it's easier to see than to 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 the intersection).

How i can achieve this? Is this possible with Raphael?

code for the effect (without transparency):

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);

Answers


You can make "donut" objects with paths by drawing the outside object and then drawing the inside object counterclockwise to the original (thanks to this SO answer). So you want to create a masking object by drawing the rectangle and then the circle inside it. Unfortunately, this means you have to draw everything in path notation instead of using the convenient rect and circle 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 http://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 up 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));

updated fiddle


Need Your Help

How to inspect elements using Firebug while building a custom addon

firefox firefox-addon firebug

I am building a custom firefox addon,But unlike chrome where I can inspect the HTML within the extension I cannot do the same for FF.

How to open Google Doc in WebView?

c# windows-8 windows-runtime microsoft-metro google-drive-sdk

I am developing a Google Drive app for Windows 8. I need to open Google Docs in WebView. I am using this URL. GoogleDoc is an object deserialized from JSON.

About UNIX Resources Network

Original, collect and organize Developers related documents, information and materials, contains jQuery, Html, CSS, MySQL, .NET, ASP.NET, SQL, objective-c, iPhone, Ruby on Rails, C, SQL Server, Ruby, Arrays, Regex, ASP.NET MVC, WPF, XML, Ajax, DataBase, and so on.