JSX Graph Example

Reference: http://jsxgraph.uni-bayreuth.de/wp/

by migerh

HTML

<script src="http://jsxgraph.uni-bayreuth.de/distrib/jsxgraphcore.js"></script>
<link rel="stylesheet" href="http://jsxgraph.uni-bayreuth.de/distrib/jsxgraph.css">
<div id="jsxgbox" class="jxgbox" style="width:500px; height:500px;">
    </div

JavaScript

var board = JXG.JSXGraph.initBoard('jsxgbox', {
    axis: false,
    boundingbox: [-5, 11, 6, -5],
    keepaspectratio: true
});

var p1 = board.createElement('point', [0, 0], {
    name: ''
});
p1.isDraggable = false;

var p2 = board.createElement('point', [-5, 0], {
    name: ''
});

p2.isDraggable = false;

var currentGraph = board.create('circle', [p1, p2]);

var pointb = board.create('point', [3.86, 3.18], {
    name: 'B'
});

var pointc = board.create('point', [-2.12, -4.53], {
    name: 'C',
});

var pointa = board.create('point', [-4.54, 2.10], {
    name: 'A',
});

pointa.isDraggable = false;

var m = board.create('line', [pointc, pointb], {});

var o = board.create('line', [pointa, pointb]);

pointb.on('drag', function (e) {
    var point_ax, point_ay, point_bx, point_by, point_cx, point_cy;

    point_ax = pointa.coords.usrCoords[1].toFixed(2);
    point_ay = pointa.coords.usrCoords[2].toFixed(2);
    point_bx = pointb.coords.usrCoords[1].toFixed(2);
    point_by = pointb.coords.usrCoords[2].toFixed(2);
    point_cx = pointc.coords.usrCoords[1].toFixed(2);
    point_cy = pointc.coords.usrCoords[2].toFixed(2);

    var d = Math.sqrt((point_bx - point_ax) * (point_bx - point_ax) + (point_by - point_ay) * (point_by - point_ay));
    var d1 = Math.sqrt((point_bx - point_cx) * (point_bx - point_cx) + (point_by - point_cy) * (point_by - point_cy));

    if (d <= 0.5 || d1 <= 0.5) {
        this.moveTo(this.oldCoords);
    } else {
        this.oldCoords = [this.X(), this.Y()];
    }
});