Fill the intersection area of three circles: Difference between revisions

From JSXGraph Wiki
No edit summary
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:5});
     var c1 = brd.create('arc', [p1, i2, i1], {visible:true, strokeWidth:1});
     var c2 = brd.create('arc', [p3, i1, i3], {visible:true, strokeWidth:5});
     var c2 = brd.create('arc', [p3, i1, i3], {visible:true, strokeWidth:1});
     var c3 = brd.create('arc', [p5, i3, i2], {visible:true, strokeWidth:5});
     var c3 = brd.create('arc', [p5, i3, i2], {visible:true, strokeWidth:1});


/*
 
     // Join the two arcs and fill the area.
     // 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>



Revision as of 10:02, 15 August 2017

The underlying JavaScript code