Working with layers: Difference between revisions

From JSXGraph Wiki
(New page: <jsxgraph width="600" height="600"> // Reordering of the layers: JXG.Options.layer['point'] = 7; JXG.Options.layer['line'] = 9; // A simple construction, consisting of three points , two ...)
 
No edit summary
Line 45: Line 45:
var c = brd.create('circle',[p2,p3]);
var c = brd.create('circle',[p2,p3]);
</source>
</source>
In the example above the layers have to be changed BEFORE the initialization of the board.
Otherwise the reordering has to be done in the copy of the options specific to the board:
<source lang="javascript">
var brd = JXG.JSXGraph.initBoard('jxgbox', {boundingbox: [-5, 5, 5, -5], grid: false});
// Reordering of the layers:
brd.options.layer['point'] = 7;
brd.options.layer['line'] = 9;
var p1 = brd.create('point',[3,0]);
var p2 = brd.create('point',[-1,0]);
var p3 = brd.create('point',[0,4]);
var l1 = brd.create('line',[p1,p2]);
var l2 = brd.create('line',[p1,p3]);
var c = brd.create('circle',[p2,p3]);
</source>
[[Category:Examples]]
[[Category:Examples]]

Revision as of 16:59, 18 December 2009

The JavaScript code

Here are the default layers of the JSXGraph geometry elements. High values mean "laying on top".

    layer : {
        point : 9,
        arc   : 8,
        line  : 7,
        circle: 6, 
        curve : 5,
        polygon: 4,
        sector: 3,
        angle : 2,
        grid  : 1,
        image : 0 
    }

Here we change the layers of points and lines:

// Reordering of the layers:
JXG.Options.layer['point'] = 7;
JXG.Options.layer['line'] = 9;

// A simple construction, consisting of three points , two lines, one circle.
var brd = JXG.JSXGraph.initBoard('jxgbox', {boundingbox: [-5, 5, 5, -5], grid: false});
var p1 = brd.create('point',[3,0]);
var p2 = brd.create('point',[-1,0]);
var p3 = brd.create('point',[0,4]);
var l1 = brd.create('line',[p1,p2]);
var l2 = brd.create('line',[p1,p3]);
var c = brd.create('circle',[p2,p3]);

In the example above the layers have to be changed BEFORE the initialization of the board. Otherwise the reordering has to be done in the copy of the options specific to the board:

var brd = JXG.JSXGraph.initBoard('jxgbox', {boundingbox: [-5, 5, 5, -5], grid: false});

// Reordering of the layers:
brd.options.layer['point'] = 7;
brd.options.layer['line'] = 9;

var p1 = brd.create('point',[3,0]);
var p2 = brd.create('point',[-1,0]);
var p3 = brd.create('point',[0,4]);
var l1 = brd.create('line',[p1,p2]);
var l2 = brd.create('line',[p1,p3]);
var c = brd.create('circle',[p2,p3]);