Difference between revisions of "Fill the intersection area of three circles"

From JSXGraph Wiki
Jump to: navigation, search
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 11:02, 15 August 2017

The underlying JavaScript code