{"id":1468,"date":"2024-09-07T10:11:56","date_gmt":"2024-09-07T08:11:56","guid":{"rendered":"https:\/\/spgoo.org\/?page_id=1468"},"modified":"2025-06-19T09:31:20","modified_gmt":"2025-06-19T07:31:20","slug":"jsxgraph-tuto-points","status":"publish","type":"page","link":"https:\/\/spgoo.org\/?page_id=1468","title":{"rendered":"JSXGraph Tuto – Points"},"content":{"rendered":"\n

Cr\u00e9ation basique d’un point sous JSXGraph (CP-YS)<\/p>\n\n\n\n

Le point est l’\u00e9l\u00e9ment de base de JSXGraph. Toutes les figures sont construites \u00e0 partir des points.<\/p>\n\n\n\n

Pour cr\u00e9er un point dans JSXGraph, il faut au pr\u00e9alable avoir d\u00e9fini un objet de type board car tout point est construit dans un board. Pour cr\u00e9er un point vous devez utiliser la m\u00e9thode create<\/strong> de l’objet board de la fa\u00e7on suivante: <\/p>\n\n\n\n

board.create('point', [...], {options})<\/code><\/pre>\n\n\n\n
Le deuxi\u00e8me argument est un tableau sp\u00e9cifiant les coordonn\u00e9es ou la mani\u00e8re dont le point est d\u00e9fini et le troisi\u00e8me argument est un objet contenant diverses options.<\/p>\n\n\n\n
Points statiques<\/strong> : la forme la plus simple est<\/p>\n\n\n\n
board.create('point', [x, y])       o\u00f9 x et y sont les coordonn\u00e9es du point.<\/code><\/pre>\n\n\n\n
Points dynamiques<\/strong> : on peut d\u00e9finir les coordonn\u00e9es sous forme de fonctions : <\/p>\n\n\n\n
board.create('point', [functionX, functionY])<\/code><\/pre>\n\n\n\n
avec functionX : “()=>{return  l’op\u00e9ration que vous d\u00e9sirez ;}”<\/p>\n\n\n\n
Attributs (Options):<\/p>\n\n\n\n
    \n
  • name<\/strong> : (String) C’est l’\u00e9tiquette du point. Si elle est d\u00e9finie par ‘ ‘, le point n’aura pas d’\u00e9tiquette. 
     ==> {name: ‘A’}<\/li>\n\n\n\n
  • size<\/strong> : (Entier) C’est la taille du point. 
     ==> {size: 3}<\/li>\n\n\n\n
  • fixed<\/strong> : (Boolean) si la valeur est ‘true’, le point ne peut \u00eatre d\u00e9plac\u00e9 par l’utilisateur.
     ==> {fixed: true}.<\/li>\n\n\n\n
  • color<\/strong> : (String) C’est la couleur du point d\u00e9finie par une couleur CSS (HTML).
     ==> {color: ‘red’} or {color: ‘#ff5733’}<\/li>\n\n\n\n
  • fillColor<\/strong> : (String) C’est la couleur int\u00e9rieur du point d\u00e9finie par une valeur CSS (HTML).
     ==> {fillColor: ‘red’} or {FillColor: ‘#ff5733’}<\/li>\n\n\n\n
  • strokeColor<\/strong> : (String) C’est la couleur du tour du point d\u00e9finie par une valeur CSS (HTML).
     ==> {strokeColor: ‘red’} or {strokeColor: ‘#ff5733’}<\/li>\n\n\n\n
  • visible<\/strong> : (Boolean) Si la valeur est ‘true’, le point est visible ; si elle est ‘false’, le point n’appara\u00eet pas. 
     ==>  {visible: true}<\/li>\n\n\n\n
  • opacity<\/strong> : (Nombre) D\u00e9finit l’opacit\u00e9 d’un point, pour des valeurs allant de 0 (transparence) \u00e0 1. 
     ==>  {opacity: 0.5}<\/li>\n\n\n\n
  • strokeOpacity<\/strong> : (Nombre) D\u00e9finit l’opacit\u00e9 de la ligne qui entoure un point, pour des valeura allant de 0 (transparence) \u00e0 1 (opacit\u00e9). 
     ==> {strokeOpacity: 0.5}<\/li>\n\n\n\n
  • fillOpacity<\/strong> : (Nombre) D\u00e9finit l’opacit\u00e9 de l’int\u00e9rieur du point, pour des valeurs allant de 0 (transparence) \u00e0 1 (opacit\u00e9). 
    ==> {fillOpacity: 0.5}<\/li>\n\n\n\n
  • highlight<\/strong> : (Boolean) si la valeur est ‘true’, le point est surlign\u00e9 quand on passe dessus avec la souris ou quand on clique dessus. 
    ==> {highlight: true}<\/li>\n\n\n\n
  • highlightFillColor<\/strong> : (String) 
     highlightFillOpacity, highlightStrokeColor, highlightStrokeOpacity, highlightStrokeWidth<\/li>\n\n\n\n
  • withLabel<\/strong> : (Boolean) si la valeur est ‘true’, le label du point est visible. 
    ==> {withLabel: true}.<\/li>\n\n\n\n
  • face<\/strong> : (String) C’est la forme du point. Les valeurs possibles sont ‘o’ (cercle), ‘x’ (croix), ‘[]’ (carr\u00e9s), 
     ‘^’ (triangle vers le haut), ‘v’ (triangle vers le bas), ‘>’ (triangle vers la droite), ‘<‘ (triangle vers la gauche). 
    Exemple : {face: ‘x’}<\/li>\n\n\n\n
  • snapToGrid<\/strong> : (Boolean) si la valeur est ‘true’, le point est attir\u00e9 vers le point le plus proche sur le treillis, quand on le d\u00e9place. 
    ==> {snapToGrid: true}<\/li>\n\n\n\n
  • snapSizeX<\/strong> and snapSizeY<\/strong> : (Number) Donne la taille du grid pour l’attration (n’a de sens que si l’on utilise snapToGrid). 
    ==>  {snapSizeX: 1, snapSizeY: 1}<\/li>\n\n\n\n
  • showInfobox<\/strong> : (Boolean) si la valeur est ‘true’, une bo\u00eete d’information est affich\u00e9e donnant les coordonn\u00e9es du point quand la souris passe dessus. 
    ==> {showInfobox: false}<\/li>\n<\/ul>\n\n\n\n
    Attributs avanc\u00e9s :<\/p>\n\n\n\n
      \n
    • trace<\/strong> : (Boolean) si la valeur est ‘true’, le point laisse une trace quand on le d\u00e9place. 
       ==> {trace: true}.<\/li>\n\n\n\n
    • draggable<\/strong> : (Boolean) permet que l’utilisateur puisse draguer le point. Identique \u00e0 fixed: false. 
       ==> {draggable: true}.<\/li>\n\n\n\n
    • label<\/strong> : (Objet) An object to customize the label further, with options like fontSize, fontColor, and offset. 
      ==> {label: {fontSize: 15, fontColor: ‘blue’, offset: [10, 10]}}.<\/li>\n\n\n\n
    • showCoords<\/strong> : (Boolean) si la valeur est ‘true’, les coordonn\u00e9es du point sont affich\u00e9es pr\u00e8s du point. 
       ==> {showCoords: true}.<\/li>\n\n\n\n
    • visibleCoords<\/strong> : (Boolean) si la valeur est ‘true’, les coordonn\u00e9es sont une partie du panel. 
       ==> {visibleCoords: true}.<\/li>\n<\/ul>\n\n\n\n
      Contraintes:<\/p>\n\n\n\n
        \n
      • slideObject<\/strong> : (Objet) Le point est contraint \u00e0 bouger soit sur une ligne, une courbe ou tout autre object. 
         ==> {slideObject: line}. (line est le nom de la ligne)<\/li>\n\n\n\n
      • slideAlong<\/strong> : (Array) Le point est contraint \u00e0 se d\u00e9placer sur un chemin ou une courbe donn\u00e9s. 
         ==> {slideAlong: [0, 1]}.<\/li>\n\n\n\n
      • attractorDistance<\/strong> : (Nombre) Combin\u00e9 avec un attracteur (un autre objet g\u00e9om\u00e9trique), cette option tire le point dans les limites d’une distance sp\u00e9cifique. 
         ==> {attractorDistance: 2}.<\/li>\n\n\n\n
      • attractors<\/strong> : (Array) un tableau d’objets qui attirent le points. 
         ==> {attractors: [circle, line]}.<\/li>\n<\/ul>\n\n\n\n
        Event Handling:<\/p>\n\n\n\n
        down, up, drag, over, out: gestionnaires d’\u00e9v\u00e8nements pour les interactions avec la souris. 
        Ce sont des fonctions JavaScript que l’on peut attacher au point pour r\u00e9pondre aux actions de l’utilisateur. 
        ==> {down: function() { alert(‘Point clicked!’); }}.<\/p>\n\n\n\n
        Illustrations et mise en pratique : cr\u00e9ation, modification et suppression<\/p>\n\n\n\n
        \/\/ Cr\u00e9ation dans un board de plusieurs points \u00e0 partir d'une liste. \nconst points = [[-2, 3],[0, 4], [1, -2], [4, 1], [-3, -3] ];\nfor (var i = 0; i < points.length; i++) {\n     board.create('point', points[i], {name: 'P' + i});\n}<\/code><\/pre>\n\n\n\n
        Fonctions utilitaires :<\/p>\n\n\n\n
        Si la liste points n’existe pas, on commence par la d\u00e9finir (elle est initialement vide mais elle existe) :<\/p>\n\n\n\n
        points=[];<\/p>\n\n\n\n
        function addPoint(x, y) {\n     points.push([x, y]); \/\/ Push new point to the list\n     board.create('point',points[points.length-1], {name: 'P' + (points.length - 1)});\n}\naddPoint(x, y);<\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"
        Cr\u00e9ation basique d’un point sous JSXGraph (CP-YS) Le point est l’\u00e9l\u00e9ment de base de JSXGraph. Toutes les figures sont construites \u00e0 partir des points. Pour cr\u00e9er un point dans JSXGraph, il faut au pr\u00e9alable avoir d\u00e9fini un objet de type board car tout point est construit dans un board. Pour cr\u00e9er un point vous devez […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-1468","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/spgoo.org\/index.php?rest_route=\/wp\/v2\/pages\/1468","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/spgoo.org\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/spgoo.org\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/spgoo.org\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/spgoo.org\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=1468"}],"version-history":[{"count":41,"href":"https:\/\/spgoo.org\/index.php?rest_route=\/wp\/v2\/pages\/1468\/revisions"}],"predecessor-version":[{"id":7110,"href":"https:\/\/spgoo.org\/index.php?rest_route=\/wp\/v2\/pages\/1468\/revisions\/7110"}],"wp:attachment":[{"href":"https:\/\/spgoo.org\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=1468"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}