Raphael.js通过多个对象的交集创建透明度 [英] Raphael.js create transparency through 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).

我如何实现这一目标？拉斐尔可以吗？

效果代码（没有透明度）：

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

推荐答案

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