Création basique d’une ligne  (CP-YS)

Une ligne peut être créée :

– à partir de deux points

board.create('line',[p0,p1],{options});

Les points peuvent être prédéfinis comme ci-dessus ou donnés directement :

board.create('line',[[a,b],[c,d]],{options});

– en donnant les coefficients de la droite : a*z + b*x + c*y = 0

board.create('line',[a,b,c],{options});

Attributs (Options) :

• name : (string) C’est l’étiquette du point. Si elle est définie par ‘ ‘, le point n’aura pas d’étiquette.
  On doit cependant noter que ce nom n’apparaîtra pas sur le graphique. NB : Etrangement
  le positionnement du nom est gouverné par des commandes label.
  ==> {name: ‘A’}.
• withLabel : (String – true or false) Si false le nom n’apparaît pas.
  ==> label: {anchorX: ‘middle’, anchorY: ‘middle’, offset: [0, 0], distance: 1.2, position: ‘0.2fr left’ }

On peut modifier les propriétés des labels. Par exemple :

label: {
  anchorX : aligner la position en abscisse par rapport au point de fixation
     ("left","middle","right")
  anchorY : aligner la position en ordonnée par rapport au point de fixation
     ("bottom","middle","top")
  offset : compensation ([compensation en x, compensation en y], déplacement    horizontal et vertical du label.
  distance : (Réel controle la distance à la ligne)
  position : permet de positionner exactement le label le long de la ligne 
     ('xfr bord' -- x est un nombre entre 0 et 1. Le label sera positionné à x% du bord associé bord = right or left.
      'x% bord'  -- x est un nombre entier entre 0 et 100
      'xpx bord' -- x est un nombre de pixel
     )
}

• strokeWidth : (entier) détermine la largeur du trait.
  ==> {strokeWidth: 3}.
• strokeColor : (Valeur HTML) ou un élement de la liste des couleurs définies dans JSXGraph.
  ==> {strokeColor: ‘#5F9EA0’}
  ou
  ==> {strokeColor: ‘lightgolden’}
• dash : (Entier de 0 à 6) Décide si la ligne est en pointillé et la forme des pointillés
  ==> {dash: 2}
• shadow : décide si on trace un ombre. Si on veut l’ombre standard :
  ==> {shadow: true}
• straightFirst :(string true or false) décide si la ligne se prolonge au-delà du premier point
  ==> {straightFirst : true}
• straightLast :(string true or false) décide si la ligne se prolonge au-delà du premier point
  ==> {straightLast : false}
• layer : (Integer 0 -…) Décide de l’ordre dans lequel les objets sont tracés
  ==> {layer : 7} <– 7 est la valeur par défaut
• visible : (string true or false) Détermine si la ligne apparaît sur le graphique ou non.
  

NB : la combinaison de “straightFirst” et “straightLast” permet de construire des demi-lignes ou des segments mais on peut toucher à tous ses paramètres. Dans ce cas (si on ne veut pas d’une option, on ne la présente pas)

{shadow: 
   { enabled: true, (autorise l'ombre)
     color: '#000000', (couleur)
     blend: 0.5, (mélange) 
     opacity: 0.5, (opacité - [0,1])
     offset:[0, 25], (déplacement [horizontal, vertical])
     blur: 6 (floutage)
   }
}     

• highlight : (string : true or false) (par défaut true)
• highlightStrokeWidth : (integer) Largeur de la ligne quand la souris passe dessus
  ==> {highlightStrokeWidth: ‘4’}
• highlightStrokeColor : (Valeur HTML) couleur de la ligne quand la souris passe dessus
  ==> {highlightStrokeColor: ‘#5F9EA0’}
  
  
  

Méthodes :

Les méthodes sont des fonctions très utilises associées à un objet (ici la ligne) :

• nom_de_ligne.getAngle() : retourne l’angle entre la ligne et l’axe des abscisses (les axes doivent exister)
• nom_de_ligne.getRise() : retourne l’ordonnée à l’origine (les axes doivent exister)
• nom_de_ligne.getSlope() : retourne la pente de la droite (les axes doivent exister)
• nom_de_ligne.L() : retourne la distance entre les deux points qui définissent la droite
• nom_de_ligne.hasPoint(a,b) : retourne true si le point [a,b] est sur la ligne

Définition générale :

Si l’on veut que toutes les lignes partagent une (ou des) propriétés en commun
==> toutes les lignes ont un label

board.options.line.withLabel = true;