Raphael.js创建透明度多个对象 [英] 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!).

我已经实现效果 http://jsfiddle.net/EMpQd/9/ （比看到更容易理解）。

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

我可以如何实现这一点？这是否可能与Raphael？

代码（不透明）：

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

推荐答案

外部对象，然后逆时针绘制内部对象到原始（感谢此SO回答）。因此，您要通过绘制矩形，然后在其中的圆形创建一个掩蔽对象。不幸的是，这意味着你必须以路径符号绘制所有东西，而不是使用方便的矩形和圆形对象。

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

更新小提琴

这篇关于Raphael.js创建透明度多个对象的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！