Fill the intersection area of three circles: Difference between revisions
From JSXGraph Wiki
A WASSERMANN (talk | contribs) No edit summary |
A WASSERMANN (talk | contribs) No edit summary |
||
Line 3: | Line 3: | ||
var cu1 = parents[0], | var cu1 = parents[0], | ||
cu2 = parents[1], | cu2 = parents[1], | ||
cu3 = parents[2], | |||
attr = JXG.copyAttributes(attributes, board.options, 'curve'), | attr = JXG.copyAttributes(attributes, board.options, 'curve'), | ||
c = board.create('curve', [[0], [0]], attr); | c = board.create('curve', [[0], [0]], attr); | ||
Line 8: | Line 9: | ||
c.updateDataArray = function() { | c.updateDataArray = function() { | ||
// The two paths have to be connected | // The two paths have to be connected | ||
this.dataX = cu1.dataX.slice(0,-1).concat(cu2.dataX); | this.dataX = cu1.dataX.slice(0,-1).concat(cu2.dataX).concat(cu3.dataX); | ||
this.dataY = cu1.dataY.slice(0,-1).concat(cu2.dataY); | this.dataY = cu1.dataY.slice(0,-1).concat(cu2.dataY).concat(cu3.dataY); | ||
if (this.dataX.length<4) { | if (this.dataX.length<4) { | ||
this.bezierDegree = 1; | this.bezierDegree = 1; | ||
Line 42: | Line 43: | ||
// Create three arcs surrounding the intersection area | // Create three arcs surrounding the intersection area | ||
var c1 = brd.create('arc', [p1, i2, i1], {visible:true, strokeWidth: | var c1 = brd.create('arc', [p1, i2, i1], {visible:true, strokeWidth:1}); | ||
var c2 = brd.create('arc', [p3, i1, i3], {visible:true, strokeWidth: | var c2 = brd.create('arc', [p3, i1, i3], {visible:true, strokeWidth:1}); | ||
var c3 = brd.create('arc', [p5, i3, i2], {visible:true, strokeWidth: | var c3 = brd.create('arc', [p5, i3, i2], {visible:true, strokeWidth:1}); | ||
// Join the | // Join the three arcs and fill the area. | ||
var c3 = JXG.joinCurves(brd, [c1,c2], | var c3 = JXG.joinCurves(brd, [c1, c2, c3], | ||
{ strokeColor:'black', | { strokeColor:'black', | ||
strokeWidth:3, | strokeWidth:3, | ||
fillColor:'yellow', fillOpacity:0.2 | fillColor:'yellow', fillOpacity:0.2 | ||
}); | }); | ||
</jsxgraph> | </jsxgraph> | ||