JSFiddle - React, Tailwind, and code Playground

by spgoo

HTML

<script type="text/javascript" charset="UTF-8" src="https://cdn.jsdelivr.net/npm/jsxgraph/distrib/jsxgraphcore.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/jsxgraph/distrib/jsxgraph.css" />
<script type="text/javascript"   src ='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js'></script>
<div class="jsgbox" id="box1" style="width:500px;height:500px">

JavaScript

const board = JXG.JSXGraph.initBoard("box1", {
		boundingbox: [-30, 30, 30, -30],
		axis:true,	grid:false,
showNavigation:false,showZoom:false,showFullscreen: false,fullscreen: {symbol: 'fs'},showCopyright:false	
});
board.renderer.container.style.backgroundColor='#E5E4E2'; //valeur par défaut si 'none' 

const trace=function(tab1,tab2,nb=5,long=3) {
	const pas_taux=1/nb; 
	let p1=board.create("point",tab1,{fixed:true,visible:true,size:1});
	let p2=board.create("point",tab2,{fixed:true,visible:true,size:1});
	if (p1.X()!=p2.X()) {
          a=(p2.Y()-p1.Y())/(p2.X()-p1.X());
        	alpha=Math.atan(a);
	}
	else {
        	alpha=Math.PI/2;
	}
  coef=-1;
  ACoef=coef*alpha;
  let b=p1.Y()-a*p1.X();
  let longueur=Math.sqrt(Math.pow(p1.Y()-p2.Y(),2)+Math.pow(p1.X()-p2.X(),2));
  let pas=longueur/nb;
  let pas_X=Math.abs(pas*Math.cos(alpha));
  let pas_Y=Math.abs(pas*Math.sin(alpha));
  if ((p1.X()<p2.X()) && (p1.Y()>p2.Y())) {
		console.log("cadran A");
   for (i=0; i< nb+1; i++) {
		pourc=long*(1-i*pas_taux);
    pI=board.create('point',[p1.X()+(i)*pas_X,p1.Y()-(i)*pas_Y],{fixed:true,visible:false});
    p4 = board.create('point',[pI.X()+Math.sin(ACoef)*pourc,pI.Y()+Math.cos(ACoef)*pourc],
    {color:'yellow',visible:false,fixed:true});
    p5 = board.create('point',[pI.X()-Math.sin(ACoef)*pourc,pI.Y()-Math.cos(ACoef)*pourc],{color:'blue',visible:false,fixed:true});
    seg=board.create('segment',[p4,p5]);
   }
  }else if ((p1.X()>p2.X()) && (p1.Y()>p2.Y())){
		console.log("cadran B");
    for (i=0; i< nb+1; i++) {
			pourc=long*(1-i*pas_taux);
      pI=board.create('point',[p1.X()-(i)*pas_X,p1.Y()-(i)*pas_Y],{fixed:true,visible:false});
                        p4 = board.create('point',[pI.X()+Math.sin(ACoef)*pourc,pI.Y()+Math.cos(ACoef)*pourc],
                        {color:'yellow',visible:false,fixed:true});
                        p5 = board.create('point',[pI.X()-Math.sin(ACoef)*pourc,pI.Y()-Math.cos(ACoef)*pourc],
                       ...