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.
There are essentially two possibilities:
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>
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});
}