Я пытаюсь найти способ заполнить область двух произвольно перекрывающихся кругов.
В инструменте, над которым я работаю, пользователь может создавать круги и перетаскивать их по экрану. Если два или более круга перекрываются, пользователь может выбрать перекрывающуюся область (подумайте о диаграмме Венна). Мне нужно заполнить перекрывающуюся область цветом или градиентом.
Возможно ли это с помощью SVG и/или Canvas в браузере?
Я придумал способ:
код:
var s1 = new createjs.Shape(),
s2 = new createjs.Shape(),
s3 = new createjs.Shape(),
s4 = new createjs.Shape(),
c1 = new createjs.Container(),
c2 = new createjs.Container(),
container = new createjs.Container();
s1.graphics.ss(2).beginStroke("black").beginLinearGradientFill(["#f6f6f6","#e5e5e5"],[0,1],0,-40,0,40).drawCircle(0,0,40);
s1.x = s1.y = 80;
c1.addChild(s1);
s2.graphics.ss(2).beginStroke("black").beginLinearGradientFill(["#f6f6f6","#e5e5e5"],[0,1],0,-40,0,40).drawCircle(0,0,40);
s2.x = s2.y = 120;
c1.addChild(s2);
container.addChild(c1);
s3.graphics.ss(2).beginStroke("black").beginRadialGradientFill(["#FFF","#0FF"],[0,1],0,0,0,0,0,40).drawCircle(0,0,40);
s3.x = s3.y = 80;
c2.addChild(s3);
s4.graphics.ss(2).beginStroke("black").beginLinearGradientFill(["#f6f6f6","#e5e5e5"],[0,1],0,-40,0,40).drawCircle(0,0,40);
s4.x = s4.y = 120;
s4.compositeOperation = "destination-in"
c2.addChild(s4);
c2.cache(0,0,220,220);
container.addChild(c2);
