Difference between revisions of "Working with layers"

From JSXGraph Wiki
Jump to navigationJump to search
 
Line 33: Line 33:
 
<source lang="javascript">
 
<source lang="javascript">
 
// Reordering of the layers:
 
// Reordering of the layers:
JXG.Options.layer['point'] = 7;
+
JXG.Options.layer.point = 7;
JXG.Options.layer['line'] = 9;
+
JXG.Options.layer.line = 9;
  
 
// A simple construction, consisting of three points , two lines, one circle.
 
// A simple construction, consisting of three points , two lines, one circle.
Line 43: Line 43:
 
var l1 = brd.create('line',[p1,p2]);
 
var l1 = brd.create('line',[p1,p2]);
 
var l2 = brd.create('line',[p1,p3]);
 
var l2 = brd.create('line',[p1,p3]);
var c = brd.create('circle',[p2,p3]);
+
var c = brd.create('circle',[p2,p3], {layer: 2});
 
</source>
 
</source>
 
In the example above the layers have to be changed BEFORE the initialization of the board.
 
In the example above the layers have to be changed BEFORE the initialization of the board.
Line 51: Line 51:
  
 
// Reordering of the layers:
 
// Reordering of the layers:
brd.options.layer['point'] = 7;
+
brd.options.layer.point = 7;
brd.options.layer['line'] = 9;
+
brd.options.layer.line = 9;
  
 
var p1 = brd.create('point',[3,0]);
 
var p1 = brd.create('point',[3,0]);
Line 59: Line 59:
 
var l1 = brd.create('line',[p1,p2]);
 
var l1 = brd.create('line',[p1,p2]);
 
var l2 = brd.create('line',[p1,p3]);
 
var l2 = brd.create('line',[p1,p3]);
var c = brd.create('circle',[p2,p3]);
+
var c = brd.create('circle',[p2,p3], {layer: 2});
 
</source>
 
</source>
  

Latest revision as of 15:38, 10 May 2021

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], {layer: 2});

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], {layer: 2});