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

From JSXGraph Wiki
Jump to navigationJump to search
(Created page with "<jsxgraph width="600" height="600"> JXG.joinCurves = function(board, parents, attributes) { var cu1 = parents[0], cu2 = parents[1], attr = JX...")
 
 
(3 intermediate revisions by the same user not shown)
Line 44: Line 44:
 
             fillColor:'yellow', fillOpacity:0.2
 
             fillColor:'yellow', fillOpacity:0.2
 
         });
 
         });
 +
 
</jsxgraph>
 
</jsxgraph>
  
 
===The underlying JavaScript code===
 
===The underlying JavaScript code===
 
<source lang="javascript">
 
<source lang="javascript">
 +
    JXG.joinCurves = function(board, parents, attributes) {
 +
        var cu1 = parents[0],
 +
            cu2 = parents[1],
 +
            attr = JXG.copyAttributes(attributes, board.options, 'curve'),
 +
            c = board.create('curve', [[0], [0]], attr);
 +
       
 +
        c.updateDataArray = function() {
 +
            // The two paths have to be connected
 +
            this.dataX = cu1.dataX.slice(0,-1).concat(cu2.dataX);
 +
            this.dataY = cu1.dataY.slice(0,-1).concat(cu2.dataY);
 +
            if (this.dataX.length<4) {
 +
                this.bezierDegree = 1;
 +
            } else {
 +
                this.bezierDegree = cu1.bezierDegree;
 +
            }
 +
        };
 +
        c.prepareUpdate().update().updateRenderer();
 +
        return c;
 +
    };
 +
 +
    var brd = JXG.JSXGraph.initBoard('jxgbox',{boundingbox: [-1,5,5,-1], axis:true});
 +
    // Create two arcs (or circles)
 +
    var p1 = brd.create('point', [1,1]);
 +
    var p2 = brd.create('point', [3,0]);
 +
    var a1 = brd.create('circle', [p1,p2]);
 +
 +
    var p3 = brd.create('point', [4,1]);
 +
    var p4 = brd.create('point', [2,0]);
 +
    var a2 = brd.create('circle', [p3,p4]);
 +
 +
    // Create two intersection points
 +
    var i1 = brd.create('intersection', [a1,a2,0], {visible:false});
 +
    var i2 = brd.create('intersection', [a1,a2,1], {visible:false});
 +
 +
    // Create two arcs surrounding the intersection area
 +
    var c1 = brd.create('arc', [p1, i1, i2], {visible:false});
 +
    var c2 = brd.create('arc', [p3, i2, i1], {visible:false});
 +
 +
    // Join the two arcs and fill the area.
 +
    var c3 = JXG.joinCurves(brd, [c1,c2],
 +
        {  strokeColor:'black',
 +
            strokeWidth:3,
 +
            fillColor:'yellow', fillOpacity:0.2
 +
        });
 
</source>
 
</source>
  
 
[[Category:Geometry]]
 
[[Category:Geometry]]
 
[[Category:Examples]]
 
[[Category:Examples]]

Latest revision as of 16:28, 6 July 2017

The underlying JavaScript code

    JXG.joinCurves = function(board, parents, attributes) {
        var cu1 = parents[0], 
            cu2 = parents[1],
            attr = JXG.copyAttributes(attributes, board.options, 'curve'),
            c = board.create('curve', [[0], [0]], attr);
        
        c.updateDataArray = function() {
            // The two paths have to be connected
            this.dataX = cu1.dataX.slice(0,-1).concat(cu2.dataX);
            this.dataY = cu1.dataY.slice(0,-1).concat(cu2.dataY);
            if (this.dataX.length<4) {
                this.bezierDegree = 1;
            } else {
                this.bezierDegree = cu1.bezierDegree;
            }
        };
        c.prepareUpdate().update().updateRenderer();
        return c;
    };

    var brd = JXG.JSXGraph.initBoard('jxgbox',{boundingbox: [-1,5,5,-1], axis:true});
    // Create two arcs (or circles)
    var p1 = brd.create('point', [1,1]);
    var p2 = brd.create('point', [3,0]);
    var a1 = brd.create('circle', [p1,p2]);

    var p3 = brd.create('point', [4,1]);
    var p4 = brd.create('point', [2,0]);
    var a2 = brd.create('circle', [p3,p4]);

    // Create two intersection points
    var i1 = brd.create('intersection', [a1,a2,0], {visible:false});
    var i2 = brd.create('intersection', [a1,a2,1], {visible:false});

    // Create two arcs surrounding the intersection area
    var c1 = brd.create('arc', [p1, i1, i2], {visible:false});
    var c2 = brd.create('arc', [p3, i2, i1], {visible:false});

    // Join the two arcs and fill the area.
    var c3 = JXG.joinCurves(brd, [c1,c2], 
        {   strokeColor:'black', 
            strokeWidth:3, 
            fillColor:'yellow', fillOpacity:0.2
        });