Search code examples
jsxgraph

how to make the vertices of a polygon not visible in JSXGraph


This is a beginner question. When I use board.create('polygon',[[0,0],[0,1],[1,1],[1,0]]), JSXgraph creates a polygon with vertices and border lines visible. I can hide the border with board.create('polygon',[[0,0],[0,1],[1,1],[1,0]],{withLines: false}), but I don't know how to hide the vertices. I see in the manual, that the attributes for the vertices can be changed, but I don't know the syntax how to do it. I can get around by defining the vertices as points separately and use the point names in the definition of the polygon, but I would prefer if the same could be achieved simply by adding something to the attribute list of the polygon. Any help would be appreciated.


Solution

  • There are essentially two possibilities:

    • set the visibility of the vertices directly by

         var board = JXG.JSXGraph.initBoard("jxgbox", {
                    boundingbox: [-5, 5, 5, -5],
                    axis: false
                });
          var pol = board.create('polygon',[[0,0],[0,1],[1,1],[1,0]], 
                      {vertices: {visible:false}});
    .jxgbox {
        /* for IE 7 */
        position: relative;
        overflow: hidden;
        background-color: #ffffff;
        border-style: solid;
        border-width: 1px;
        border-color: #356AA0;
        border-radius: 10px;
        -webkit-border-radius: 10px;
        -ms-touch-action: none;
    }
    
    .JXGtext {
        /* May produce artefacts in IE. Solution: setting a color explicitly. */
        background-color: transparent;
        font-family: Arial, Helvetica, Geneva, sans-serif;
        padding: 0;
        margin: 0;
    }
    
    .JXGinfobox {
        border-style: none;
        border-width: 1px;
        border-color: black;
    }
    <script src="//cdnjs.cloudflare.com/ajax/libs/jsxgraph/0.99.5/jsxgraphcore.js"></script>
    <div id="jxgbox" class="jxgbox" style="width:600px; height:600px;"></div>

    • set the visibility later:
    var pol = board.create('polygon',[[0,0],[0,1],[1,1],[1,0]], 
                 {vertices:  {visible:true}});
    for (i = 0; i < pol.vertices.length - 1; i++) {
        pol.vertices[i].setAttribute({visible: false});
    }