Fill the intersection area of three circles

From JSXGraph Wiki
Revision as of 10:14, 15 August 2017 by A WASSERMANN (talk | contribs)
(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)
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 curves = parents, 
            attr = JXG.copyAttributes(attributes, board.options, 'curve'),
            c = board.create('curve', [[0], [0]], attr);
        
        c.updateDataArray = function() {
            var i, le = curves.length;

            // The paths have to be connected
            this.dataX = [];
            this.dataY = [];
            for (i = 0; i < le; i++) {
                if (i < le - 1) {
                    this.dataX = this.dataX.concat(curves[i].dataX.slice(0,-1));
                    this.dataY = this.dataY.concat(curves[i].dataY.slice(0,-1));
                } else {
                    this.dataX = this.dataX.concat(curves[i].dataX);
                    this.dataY = this.dataY.concat(curves[i].dataY);
                }
            }

            if (this.dataX.length<4) {
                this.bezierDegree = 1;
            } else {
                this.bezierDegree = curves[0].bezierDegree;
            }
        };
        c.prepareUpdate().update().updateVisibility().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]);

    var p5 = brd.create('point', [2.5, 4.5]);
    var p6 = brd.create('point', [-0.5, 4.5]);
    var a3 = brd.create('circle', [p5,p6]);


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


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


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