JSXGraph中实现带背景原始网格的坐标变换及滑块控制下网格不实时更新的问题解决

嘿，这个问题我之前碰到过！原因在于JSXGraph里的grid对象和点、线这类基础元素的更新机制不一样——点B能顺畅跟随滑块移动是因为基础元素默认会实时监听变换更新，但网格元素需要我们手动触发它的更新逻辑。

给你个简单的解决方案：给滑块添加一个onChange回调函数，每次滑块值变化时强制网格更新，这样就能让网格和点B同步动起来了。

修改后的代码如下：

<div id="jxgbox3" class="jxgbox" style="width:500px; height:400px;"></div>
<script>
 var board = JXG.JSXGraph.initBoard('jxgbox3', {boundingbox: [-12, 7, 12, -7], axis: true}); //boundbox
 var gr = board.create('grid', [], {strokeColor:'red'});
 
 var s = board.create('slider',[[-2,-2],[4,-2],[0,0,0.785398]],{
     name:'Angle of Rotation',
     // 新增滑块变化时的回调，强制更新网格
     onChange: function() {
         gr.update();
         // 也可以用 board.update() 来刷新整个画板的所有元素，效果一样
     }
 });  //sliders
 
 var or = board.create('point',[0,0], {name:'A',size:1}); // rotation
 
 rot = board.create('transform', [function(){return s.Value();},or], {type:'rotate'}); 
 
 var a = board.create('point',[2,2], {name:'B',size:2});
 
 rot.bindTo([a,gr]);   
</script>

解释一下：
新增的onChange回调会在你拖动滑块的每一刻触发，调用gr.update()就能专门刷新网格元素，让它立刻响应旋转变换；如果你想更稳妥，也可以用board.update()直接刷新整个画板的所有元素，效果是一样的。这样操作后，网格就会和点B同步顺畅地跟随滑块旋转啦！

备注：内容来源于stack exchange，提问作者Anonymous10001