Création basique d’un point sous JSXGraph (CP-YS)

Le point est l’élément de base de JSXGraph. Toutes les figures sont construites à partir des points.

Pour créer un point dans JSXGraph, il faut au préalable avoir défini un objet de type board car tout point est construit dans un board. Pour créer un point vous devez utiliser la méthode create de l’objet board de la façon suivante:

board.create('point', [...], {options})

Le deuxième argument est un tableau spécifiant les coordonnées ou la manière dont le point est défini et le troisième argument est un objet contenant diverses options.

Points statiques : la forme la plus simple est

board.create('point', [x, y])       où x et y sont les coordonnées du point.

Points dynamiques : on peut définir les coordonnées sous forme de fonctions :

board.create('point', [functionX, functionY])

avec functionX : “()=>{return l’opération que vous désirez ;}”

Attributs (Options):

• name : (String) C’est l’étiquette du point. Si elle est définie par ‘ ‘, le point n’aura pas d’étiquette.
  ==> {name: ‘A’}
• size : (Entier) C’est la taille du point.
  ==> {size: 3}
• fixed : (Boolean) si la valeur est ‘true’, le point ne peut être déplacé par l’utilisateur.
  ==> {fixed: true}.
• color : (String) C’est la couleur du point définie par une couleur CSS (HTML).
  ==> {color: ‘red’} or {color: ‘#ff5733’}
• fillColor : (String) C’est la couleur intérieur du point définie par une valeur CSS (HTML).
  ==> {fillColor: ‘red’} or {FillColor: ‘#ff5733’}
• strokeColor : (String) C’est la couleur du tour du point définie par une valeur CSS (HTML).
  ==> {strokeColor: ‘red’} or {strokeColor: ‘#ff5733’}
• visible : (Boolean) Si la valeur est ‘true’, le point est visible ; si elle est ‘false’, le point n’apparaît pas.
  ==> {visible: true}
• opacity : (Nombre) Définit l’opacité d’un point, pour des valeurs allant de 0 (transparence) à 1.
  ==> {opacity: 0.5}
• strokeOpacity : (Nombre) Définit l’opacité de la ligne qui entoure un point, pour des valeura allant de 0 (transparence) à 1 (opacité).
  ==> {strokeOpacity: 0.5}
• fillOpacity : (Nombre) Définit l’opacité de l’intérieur du point, pour des valeurs allant de 0 (transparence) à 1 (opacité).
  ==> {fillOpacity: 0.5}
• highlight : (Boolean) si la valeur est ‘true’, le point est surligné quand on passe dessus avec la souris ou quand on clique dessus.
  ==> {highlight: true}
• highlightFillColor : (String)
  highlightFillOpacity, highlightStrokeColor, highlightStrokeOpacity, highlightStrokeWidth
• withLabel : (Boolean) si la valeur est ‘true’, le label du point est visible.
  ==> {withLabel: true}.
• face : (String) C’est la forme du point. Les valeurs possibles sont ‘o’ (cercle), ‘x’ (croix), ‘[]’ (carrés),
  ‘^’ (triangle vers le haut), ‘v’ (triangle vers le bas), ‘>’ (triangle vers la droite), ‘<‘ (triangle vers la gauche).
  Exemple : {face: ‘x’}
• snapToGrid : (Boolean) si la valeur est ‘true’, le point est attiré vers le point le plus proche sur le treillis, quand on le déplace.
  ==> {snapToGrid: true}
• snapSizeX and snapSizeY : (Number) Donne la taille du grid pour l’attration (n’a de sens que si l’on utilise snapToGrid).
  ==> {snapSizeX: 1, snapSizeY: 1}
• showInfobox : (Boolean) si la valeur est ‘true’, une boîte d’information est affichée donnant les coordonnées du point quand la souris passe dessus.
  ==> {showInfobox: false}

Attributs avancés :

• trace : (Boolean) si la valeur est ‘true’, le point laisse une trace quand on le déplace.
  ==> {trace: true}.
• draggable : (Boolean) permet que l’utilisateur puisse draguer le point. Identique à fixed: false.
  ==> {draggable: true}.
• label : (Objet) An object to customize the label further, with options like fontSize, fontColor, and offset.
  ==> {label: {fontSize: 15, fontColor: ‘blue’, offset: [10, 10]}}.
• showCoords : (Boolean) si la valeur est ‘true’, les coordonnées du point sont affichées près du point.
  ==> {showCoords: true}.
• visibleCoords : (Boolean) si la valeur est ‘true’, les coordonnées sont une partie du panel.
  ==> {visibleCoords: true}.

Contraintes:

• slideObject : (Objet) Le point est contraint à bouger soit sur une ligne, une courbe ou tout autre object.
  ==> {slideObject: line}. (line est le nom de la ligne)
• slideAlong : (Array) Le point est contraint à se déplacer sur un chemin ou une courbe donnés.
  ==> {slideAlong: [0, 1]}.
• attractorDistance : (Nombre) Combiné avec un attracteur (un autre objet géométrique), cette option tire le point dans les limites d’une distance spécifique.
  ==> {attractorDistance: 2}.
• attractors : (Array) un tableau d’objets qui attirent le points.
  ==> {attractors: [circle, line]}.
• snapWidth : (Number) le monant par lequel le point est attiré au treillis, c’est une commande similaire à snapSizeX et snapSizeY.
  ==> {snapWidth: 1}.

Event Handling:

down, up, drag, over, out: gestionnaires d’évènements pour les interactions avec la souris.
Ce sont des fonctions JavaScript que l’on peut attacher au point pour répondre aux actions de l’utilisateur.
==> {down: function() { alert(‘Point clicked!’); }}.

Illustrations et mise en pratique : création, modification et suppression

// Création dans un board de plusieurs points à partir d'une liste. 
const points = [[-2, 3],[0, 4], [1, -2], [4, 1], [-3, -3] ];
for (var i = 0; i < points.length; i++) {
     board.create('point', points[i], {name: 'P' + i});
}

Fonctions utilitaires :

Si la liste points n’existe pas, on commence par la définir (elle est initialement vide mais elle existe) :

points=[];

function addPoint(x, y) {
     points.push([x, y]); // Push new point to the list
     board.create('point',points[points.length-1], {name: 'P' + (points.length - 1)});
}
addPoint(x, y);