Raphael.js 여러 객체의 교차점을 투명하게 만듭니다.

Question

제품을 보여주기 위해 "놀라운"효과를 내고 있습니다 (고객이 '절대적으로'필요로하는 것!).

나는 이미 효과를 깨달았습니다 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); 

Answer 1

당신은 외부 객체 그리기 다음 ( this SO answer 덕분에) 원래 반 시계 방향으로 내부 그리기 개체에 의해 경로가 "도넛"개체를 만들 수 있습니다

. 따라서 직사각형을 그린 다음 안쪽에 원을 그려 마스킹 객체를 생성하려고합니다. 불행히도, 이것은 편리한 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)); 

updated fiddle