Fill the intersection area of two circles

From JSXGraph Wiki
Revision as of 12:08, 15 October 2012 by A WASSERMANN (talk | contribs)
The printable version is no longer supported and may have rendering errors. Please update your browser bookmarks and please use the default browser print function instead.

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
        });