如何将JSXGraph心形线代码中的固定n替换为nslider.Value()的值

核心修改点 #

• 替换硬编码的n参数为nslider.Value()的返回值
• 新增滑块变动监听，拖动滑块时自动重绘图形
• 新增历史线段清理逻辑，避免多次绘制后图形重叠

修改后完整代码 #

var board = JXG.JSXGraph.initBoard('jxgbox', 
    {axis:false, boundingbox:[-8,4,4,-5], keepaspectratio:true});
var R = 3.5;
var segments = []; // 存储所有绘制的线段，用于重绘前清理
var k = board.create('slider',[[-7,-3.5],[-3,-3.5],[1, 2, 16]], {snapWidth: 1, name: 'k'});
var nslider = board.create('slider',[[-7,-4.5],[-3,-4.5],[10, 20, 60]], {snapWidth: 10, name: 'n'});
var co = board.create('circle', [[0, 0], R]);

function degToRad(degrees) {
    return degrees * (Math.PI / 180);
};

function plotcardioid(n, k) {
    // 先清空之前绘制的所有线段
    segments.forEach(seg => board.removeObject(seg));
    segments = [];
    
    var px = [], py = [];
    for (let i = 0; i < n; i++) {
        var alpha = degToRad(i*360/n);
        px.push(R*Math.cos(alpha));
        py.push(R*Math.sin(alpha));
    }
    for (let i = 0; i < n; i++) {
        var p = [px[i], py[i]];
        var q = function (){return [px[k.Value()*i%n], py[k.Value()*i % n]]};
        // 把新创建的线段存入数组
        segments.push(board.create('segment', [p, q]));
    }
}

function updatePlot() {
    // 直接取nslider的当前值作为参数传入
    plotcardioid(nslider.Value(), k);
}

// 绑定滑块变动事件，拖动滑块自动更新
k.on('change', updatePlot);
nslider.on('change', updatePlot);

// 初始化绘制
updatePlot();

关键修改说明 #

• 新增全局数组segments存储所有绘制的线段，每次重绘前先清空历史线段，不会出现图形叠加的问题
• 新增updatePlot统一处理绘制逻辑，直接读取nslider.Value()作为参数传入，不需要手动修改硬编码值
• 给两个滑块绑定change事件，拖动任意滑块都会自动触发重绘，实时看到参数调整后的效果

内容的提问来源于stack exchange，提问作者Tieu Dao