Options: Difference between revisions

From JSXGraph Wiki
No edit summary
No edit summary
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 13: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 
    }
};