Search code examples
javascriptjsxgraph

JSXGraph: how to draw a vector with an arrow and no point marker?

In JSXGraph, I am trying to draw a vector AB. I want to display both point labels, i.e. letters A and B, and an arrow next to point B. At the same time, I do not want to display point B marker (attribute 'face' in JSXGraph) because it does not look well next to the arrow.

This is what I have tried:

var a = board.create('point',[0,0],{name:'A'});
var b = board.create('point',[1,3],{name:'B'});
var vector = board.create('arrow',[a,b]);
//alternative version of the last line:
var vector = board.create('segment',[a,b], {lastArrow: true});

This draws a vector that looks like this (http://jsxgraph.uni-bayreuth.de/docs/symbols/Arrow.html) - with an arrow and both point markers. When I am trying to remove the point marker by setting {visible: false} for point B, this also hides the label B, which I do not want. Is there any way around this?

Of course, I can hide point B and use the command 'text' to create label B manually, but this does not seem right.

Solution

  • A point can be set to invisible by using color 'none'.

    Example:

        b = board.create('point', [1, 3], {
             color:'none', 
             highlightStrokeColor:'none', 
             highlightFillColor:'none'});