Search code examples
jsxgraph

conditional update of line properties in jsxgraph

In jsxgraph, I want to draw a line between two points that is solid if the first point is on the left of the other but that is dashed otherwise. I want the appearance of the line to change dynamically when I move the first point around, with the mouse.

I have tried the following ways

var board = JXG.JSXGraph.initBoard('jxgbox', {boundingbox: [-7, 5, 12, -5], axis:true, keepAspectRatio:true});
var p1 = board.create('point', [-1, 0]);
var p2 = board.create('point', [0, 0]);
var s =  board.create('segment', [p1, p2]);
if (p1.XEval()>0) {s.setProperty({dash:2});}

and 

var board = JXG.JSXGraph.initBoard('jxgbox', {boundingbox: [-7, 5, 12, -5], axis:true, keepAspectRatio:true});
var p1 = board.create('point', [-1, 0]);
var p2 = board.create('point', [0, 0]);
var s =  board.create('segment', [p1, p2], {function(){if (p1.XEval()>0) {return 'dash:2';}}});

but they did not work (the line is always solid).

Thank you for any hint !!

Solution

  • The fastest way to do this is

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

var p1 = board.create('point', [-1, 1]);
var p2 = board.create('point', [0, 1]);
var s =  board.create('segment', [p1, p2], {
        dash: function() { return (p1.X() < p2.X()) ? 0 : 1 }
    });

    The values of most attributes in JSXGraph can be functions returning an appropiate value.

    See it live at http://jsfiddle.net/b59drc3u/ .