rotation

by spgoo

HTML

<meta charset="utf-8">
		<script src="https://cdn.jsdelivr.net/npm/katex/dist/katex.min.js"></script>
		<link href="https://cdn.jsdelivr.net/npm/katex/dist/katex.min.css" rel="stylesheet">
		<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" id="MathJax-script" src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"> </script>
		<script>
			window.WebFontConfig = {
				custom: {
					families: ['KaTeX_AMS', 'KaTeX_Caligraphic:n4,n7', 'KaTeX_Fraktur:n4,n7',
						'KaTeX_Main:n4,n7,i4,i7', 'KaTeX_Math:i4,i7', 'KaTeX_Script',
						'KaTeX_SansSerif:n4,n7,i4', 'KaTeX_Size1', 'KaTeX_Size2', 'KaTeX_Size3',
						'KaTeX_Size4', 'KaTeX_Typewriter'],
				}
			};
		</script>
		<script src="https://cdn.jsdelivr.net/npm/mathjs/lib/browser/math.js"></script>
<div id="jxgbox" class="jxgbox" style="width:500px; height:500px;"></div>

JavaScript

var board3 = JXG.JSXGraph.initBoard('jxgbox', 
{
boundingbox: [-1, 10, 10, -1], 
showNavigation: false, 
axis: true
},
mouseWheel=function () {
	console.log("wheel");
});
board3.on("mouseWheel", function() {console.log("wheel");}
)
const col=2, haut=7, bas=3;
const sq=[];
const centre = board3.create('point', [4, 5],{fixed:false,visible:true}); 
var right = board3.create('transform', [1,0], {type:'translate'});
var up = board3.create('transform', [0,1], {type:'translate'});
var left = board3.create('transform', [-1,0], {type:'translate'});
var down = board3.create('transform', [0,-1], {type:'translate'});

const p1 = board3.create('point', [centre,[left,up]],{visible:false});
const p2 = board3.create('point', [centre,[right,up]],{visible:false});
const p3 = board3.create('point', [centre,[right, down]],{visible:false});
const p4 = board3.create('point', [centre,[left,down]],{visible:false});
sq.push(p1);
sq.push(p2);
sq.push(p3);
sq.push(p4);
const poly = board3.create("polygon", sq,{Highlight:true,visible:true,fixed:true,fillColor:"lightblue",opacity:1});
  
const s = board3.create('slider', [[1,1],[4,1],[0,0,2*Math.PI]],{name:'angle'}); 
//var rot = board3.create('transform', [function(){return s.Value();},centre], {type:'rotate'});
//rot.bindTo(sq); // Apply the rotation to all but the first point of the polygon
var rot = board3.create('transform', [function(){return s.Value();},centre], {type:'rotate'});
rot.bindTo(sq); 
board3.update();