Half filled circle or point

[Eric Peters]

Dear all,

how can I create a circle or point which is filled on one half?

It should look like this:

It would be optimal, if we don't have a group of objects for creating such a structure. I hope to get just one object (circle or point) which is half-filled.

Thanks in advance for your help.

Best regards,

Eric

[Alfred Wassermann]

Such an element is not part of JSXGraph, yet. 

Here is an example how you can extend JSXGraph by an element named "halffilledcircle", see it in action at https://jsfiddle.net/onot6d8c/

var board = JXG.JSXGraph.initBoard('box', {
 boundingbox:[-5, 5, 5, -5],
              axis: true});


// Extend JSXGraph by a new element
JXG.createHalfFilledCircle = function(board, parents, attributes) {
    var circ, attr, points, center, radius;


    if (JXG.isPointType(board, parents[0])) {
        points = JXG.providePoints(board, [parents[0]], {visible:false}, 'circle');
    }
 
    if (points === false || points.length !== 1 ||parents.length < 2 || !JXG.isNumber(parents[1])) {
        throw new Error("JSXGraph: Can't create half filled circlewith parent types '" +
            (typeof parents[0]) + "' and '" + (typeof parents[1]) + "'." +
            "\nPossible parent types: [point,number]");
    }


    radius = parents[1];
    center = points[0];
       
    attr = JXG.copyAttributes(attributes, board.options, 'circle');
    circ = board.create('circle', [center, radius], attr);

    attr.fillcolor = attr.strokecolor;
    attr.highlightfillcolor = attr.highlightstrokecolor;
    attr.strokeWidth = 1;
   
    circ.curve = board.create('curve', [[0,1], [0,1]], attr);
    circ.curve.updateDataArray = function() {
        var arc,
            c = center.coords.usrCoords,
            r = circ.Radius();
 
        arc = JXG.Math.Geometry.bezierArc(
            [c[0], c[1], c[2] + r],
            c,
            [c[0], c[1], c[2] - r], true, -1);
           
        this.dataX = arc[0];
        this.dataY = arc[1];
        this.bezierDegree = 3;
    };
    circ.prepareUpdate().update();
    circ.curve.prepareUpdate().update().updateRenderer();
    return circ;
};

JXG.registerElement('halffilledcircle', JXG.createHalfFilledCircle);

// Use the new element
var cc = board.create('halffilledcircle', [[0, 0], 4], {
 strokeColor: 'black',
    highlightStrokeColor:'black',
    strokeWidth: 40});

Best wishes,

Alfred

[Eric Peters]

Thank you very much!

I think that's it :-)