2

私は製品を表示するための「驚くべき」効果を作成しています（顧客からの素晴らしい「絶対に必要なもの」です！）。

私はすでに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);
4

1 に答える 1

5

外側のオブジェクトを描画してから、内側のオブジェクトを元のオブジェクトに対して反時計回りに描画することで、パスを使用して「ドーナツ」オブジェクトを作成できます（このSOの回答に感謝します）。したがって、長方形を描画してからその中に円を描画して、マスキングオブジェクトを作成します。残念ながら、これは、便利なrectおよびcircleオブジェクトを使用する代わりに、パス表記ですべてを描画する必要があることを意味します。

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

更新されたフィドル

于 2013-01-23T14:39:42.440 に答える