Difference between revisions of "Options"

From JSXGraph Wiki
Jump to: navigation, search
Line 1: Line 1:
 
Below are the default values for many parameters of a JSXGraph construction. These values have to be overwritten before the initialization of the JSXGraph board via
 
Below are the default values for many parameters of a JSXGraph construction. These values have to be overwritten before the initialization of the JSXGraph board via
 
<source lang="javascript">
 
<source lang="javascript">
JXG.Options.fontSize = 14;
+
JXG.Options.text.fontSize = 14;
 
JXG.Options.text.useASCIIMathML = true;
 
JXG.Options.text.useASCIIMathML = true;
 
</source>
 
</source>
Line 9: Line 9:
 
JXG.Options = {
 
JXG.Options = {
 
     /* Options that are used directly within the board class */
 
     /* Options that are used directly within the board class */
    fontSize : 12,
 
 
     showCopyright : true,
 
     showCopyright : true,
 
     showNavigation : true,
 
     showNavigation : true,
     takeSizeFromFile : true, // If true, the construction - when read from a file or string - the size of the div can be changed.
+
     takeSizeFromFile : false, // If true, the construction - when read from a file or string - the size of the div can be changed.
 
     renderer: 'svg',
 
     renderer: 'svg',
    takeFirst: false, // If true take the first element in the object list where hasPoint() returns true (mouseDownListener).
 
                    // Otherwise take the element which has been constructed last ("lays above").
 
                    // takeFirst is faster, if there is a huge list of elements.
 
  
 
     /* grid options */
 
     /* grid options */
Line 40: Line 36:
 
     elements : {
 
     elements : {
 
         /* color options */
 
         /* color options */
         color : {
+
         strokeColor: '#0000ff',
            strokeOpacity : 1,
+
        highlightStrokeColor: '#C3D9FF',
            highlightStrokeOpacity : 1,
+
        fillColor: 'none',
            fillOpacity : 1,
+
        highlightFillColor: 'none',
            highlightFillOpacity : 1,
 
  
            strokeColor : '#0000ff',
+
        strokeOpacity: 1,
            highlightStrokeColor : '#C3D9FF',
+
        highlightStrokeOpacity: 1,
            fillColor : 'none',
+
        fillOpacity: 1,
            highlightFillColor : 'none'
+
        highlightFillOpacity: 1,
        },
+
         strokeWidth: '2px',
         strokeWidth : '2px',
+
    withLabel: false,
  
 
         /*draft options */
 
         /*draft options */
Line 64: Line 59:
 
     /* special point options */
 
     /* special point options */
 
     point : {
 
     point : {
         style : 5, //1;
+
    withLabel: true,
 +
         style : 5, // deprecated
 +
        face : 'o',
 +
        size : 3,
 
         fillColor : '#ff0000',
 
         fillColor : '#ff0000',
 
         highlightFillColor : '#EEEEEE',
 
         highlightFillColor : '#EEEEEE',
 +
        strokeWidth: '2px',
 
         strokeColor : '#ff0000', //'#0000ff',
 
         strokeColor : '#ff0000', //'#0000ff',
 
         highlightStrokeColor : '#C3D9FF',
 
         highlightStrokeColor : '#C3D9FF',
Line 104: Line 103:
 
     /*special circle options */
 
     /*special circle options */
 
     circle : {
 
     circle : {
 +
        fillColor : 'none',
 +
        highlightFillColor : 'none',
 +
        strokeColor : '#0000ff',
 +
        highlightStrokeColor : '#C3D9FF'
 +
    },
 +
 +
    /* special conic options */
 +
    conic : {
 
         fillColor : 'none',
 
         fillColor : 'none',
 
         highlightFillColor : 'none',
 
         highlightFillColor : 'none',
Line 112: Line 119:
 
     /* special angle options */
 
     /* special angle options */
 
     angle : {
 
     angle : {
 +
    withLabel:true,
 
         radius : 1.0,
 
         radius : 1.0,
 
         fillColor : '#FF7F00',
 
         fillColor : '#FF7F00',
Line 140: Line 148:
 
     /* special sector options */
 
     /* special sector options */
 
     sector : {
 
     sector : {
         fillColor : '#00FF00',
+
         fillColor: '#00FF00',
         highlightFillColor : '#00FF00',
+
         highlightFillColor: '#00FF00',
         fillOpacity : 0.3,
+
         fillOpacity: 0.3,
         highlightFillOpacity : 0.3
+
         highlightFillOpacity: 0.3
 
     },
 
     },
  
 
     /* special text options */
 
     /* special text options */
 
     text : {
 
     text : {
 +
        fontSize : 12,
 
         strokeColor : '#000000',
 
         strokeColor : '#000000',
 
         useASCIIMathML : false,
 
         useASCIIMathML : false,
Line 166: Line 175:
 
     /* precision options */
 
     /* precision options */
 
     precision : {
 
     precision : {
         hasPoint : 4,
+
         touch    : 20,
         epsilon : 0.0001
+
        mouse    : 4,
 +
         epsilon : 0.0001,
 +
        hasPoint : 4
 
     },
 
     },
  
Line 173: Line 184:
 
     layer : {
 
     layer : {
 
         numlayers:20, // only important in SVG
 
         numlayers:20, // only important in SVG
 +
        text  : 9,
 
         point : 9,
 
         point : 9,
 
         arc  : 8,
 
         arc  : 8,
Line 184: Line 196:
 
         image : 0  
 
         image : 0  
 
     }
 
     }
 
 
};
 
};
  
 
</source>
 
</source>

Revision as of 15:23, 21 March 2010

Below are the default values for many parameters of a JSXGraph construction. These values have to be overwritten before the initialization of the JSXGraph board via

JXG.Options.text.fontSize = 14;
JXG.Options.text.useASCIIMathML = true;

Here is the complete list of default values:

JXG.Options = {
    /* Options that are used directly within the board class */
    showCopyright : true,
    showNavigation : true,
    takeSizeFromFile : false, // If true, the construction - when read from a file or string - the size of the div can be changed.
    renderer: 'svg',

    /* grid options */
    grid : {
        /* grid styles */
        hasGrid : false,
        gridX : 2,
        gridY : 2,
        gridColor : '#C0C0C0',
        gridOpacity : '0.5',
        gridDash : true,
        /* snap to grid options */
        snapToGrid : false,
        snapSizeX : 2,
        snapSizeY : 2
    },
    /* zoom options */
    zoom : {
        factor : 1.25
    },

    /* geometry element options */
    elements : {
        /* color options */
        strokeColor: '#0000ff',
        highlightStrokeColor: '#C3D9FF',
        fillColor: 'none',
        highlightFillColor: 'none',

        strokeOpacity: 1,
        highlightStrokeOpacity: 1,
        fillOpacity: 1,
        highlightFillOpacity: 1,
        strokeWidth: '2px',
	    withLabel: false,

        /*draft options */
        draft : {
            draft : false,
            color : '#565656',
            opacity : 0.8,
            strokeWidth : '1px'
        }
    },

    /* special point options */
    point : {
    	withLabel: true,
        style : 5, // deprecated
        face : 'o', 
        size : 3, 
        fillColor : '#ff0000',
        highlightFillColor : '#EEEEEE',
        strokeWidth: '2px',
        strokeColor : '#ff0000', //'#0000ff',
        highlightStrokeColor : '#C3D9FF',
        zoom: false             // Change the point size on zoom
    },

    /* special line options */
    line : {
        firstArrow : false,
        lastArrow : false,
        straightFirst : true,
        straightLast : true,
        fillColor : '#000000',
        highlightFillColor : 'none',
        strokeColor : '#0000ff',
        highlightStrokeColor : '#888888',
        /* line ticks options */
        ticks : {
            drawLabels : true,
            drawZero : false,
            insertTicks : false,
            minTicksDistance : 50,
            maxTicksDistance : 300,
            minorHeight : 4,
            majorHeight : 10,
            minorTicks : 4,
            defaultDistance : 1
        }
    },

    /* special axis options */
    axis : {
        strokeColor : '#666666',
        highlightStrokeColor : '#888888'
    },
    
    /*special circle options */
    circle : {
        fillColor : 'none',
        highlightFillColor : 'none',
        strokeColor : '#0000ff',
        highlightStrokeColor : '#C3D9FF'
    },

    /* special conic options */
    conic : {
        fillColor : 'none',
        highlightFillColor : 'none',
        strokeColor : '#0000ff',
        highlightStrokeColor : '#C3D9FF'
    },

    /* special angle options */
    angle : {
	    withLabel:true,
        radius : 1.0,
        fillColor : '#FF7F00',
        highlightFillColor : '#FF7F00',
        strokeColor : '#FF7F00',
        fillOpacity : 0.3,
        highlightFillOpacity : 0.3
    },

    /* special arc options */
    arc : {
        firstArrow : false,
        lastArrow : false,
        fillColor : 'none',
        highlightFillColor : 'none',
        strokeColor : '#0000ff',
        highlightStrokeColor : '#C3D9FF'
    },

    /* special polygon options */
    polygon : {
        fillColor : '#00FF00',
        highlightFillColor : '#00FF00',
        fillOpacity : 0.3,
        highlightFillOpacity : 0.3
    },

    /* special sector options */
    sector : {
        fillColor: '#00FF00',
        highlightFillColor: '#00FF00',
        fillOpacity: 0.3,
        highlightFillOpacity: 0.3
    },

    /* special text options */
    text : {
        fontSize : 12,
        strokeColor : '#000000',
        useASCIIMathML : false,
        defaultDisplay : 'html' //'html' or 'internal'
    },

    /* special curve options */
    curve : {
        strokeWidth : '1px',
        strokeColor : '#0000ff',
        RDPsmoothing : false,    // Apply the Ramen-Douglas-Peuker algorithm
        numberPointsHigh : 1600, // Number of points on curves after mouseUp
        numberPointsLow : 400,   // Number of points on curves after mousemove
        doAdvancedPlot : true    // Use the algorithm by Gillam and Hohenwarter
                                 // It is much slower, but the result is better
    },

    /* precision options */
    precision : {
        touch    : 20,
        mouse    : 4,
        epsilon  : 0.0001,
        hasPoint : 4
    },

    // Default ordering of the layers
    layer : {
        numlayers:20, // only important in SVG
        text  : 9,
        point : 9,
        arc   : 8,
        line  : 7,
        circle: 6, 
        curve : 5,
        polygon: 4,
        sector: 3,
        angle : 2,
        grid  : 1,
        image : 0 
    }
};