如何将n改为nslider.Value()？

Question

我写了draw图形代码来画心波。我想将n改为nslider.Value()。有人能帮我修好吗？

var board = JXG.JSXGraph.initBoard('jxgbox', 
    {axis:false, boundingbox:[-8,4,4,-5], keepaspectratio:true});
var R = 3.5;
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) {
    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]]};
        board.create('segment', [p, q]);
    }
}

plotcardioid(128, k);

链接：https://jsfiddle.net/fcgej23p/19/

Answer 1

因此，您必须通过n通过nslider.Value()删除nslider.Value()。这是代码，请参阅https://jsfiddle.net/jrgumcqd/1/

  function plotcardioid(n, k) {
    var px = [], py = [];
        
    for (let i = 0; i < n.Value(); i++) {
        var alpha = degToRad(i*360/n.Value());
        px.push(R*Math.cos(alpha));
        py.push(R*Math.sin(alpha));
    }
    for (let i = 0; i<n.Value(); i++) {
        let p = [px[i], py[i]];
        let q = function (){
            return [
            px[k.Value()*i % n.Value()], 
            py[k.Value()*i % n.Value()]
          ]};
        board.create('segment', [p, q]);
    }
}

plotcardioid(nslider, k);

然而，我不建议创建元素作为对滑块运动的反应。在JSXGraph中，创建新元素相对昂贵，而且也不清楚“旧”段会发生什么。我的建议是创建一条曲线并通过覆盖updateDataArray方法来更新它。在每一对坐标之后添加一个NaN允许曲线“跳转”。下面是代码(https://jsfiddle.net/4wtexsfz/7/)：

var board = JXG.JSXGraph.initBoard('jxgbox', 
    {axis:false, boundingbox:[-8,4,4,-5], keepaspectratio:true});
var R = 3.5;
var kslider = 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, 128, 160]], {snapWidth: 10, name: 'n'});
var co = board.create('circle', [[0, 0], R]);

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

var cardioid = board.create('curve', [[], []], {strokeWidth: 0.8, strokeColor: 'purple'});
cardioid.updateDataArray = function() {
    var px = [], py = [],
        n = nslider.Value(), // global
        k = kslider.Value(); // global
    
    this.dataX = [];
    this.dataY = [];
    
    for (let i = 0; i < n; i++) {
        let alpha = degToRad(i * 360 / n);
        px.push(R * Math.cos(alpha));
        py.push(R * Math.sin(alpha));
    }
    
    for (let i = 0; i < n; i++) {
        this.dataX.push(px[i]);
        this.dataX.push(px[k * i % n]);
        this.dataX.push(NaN);  // Jump
        this.dataY.push(py[i]);
        this.dataY.push(py[k * i % n]);
        this.dataY.push(NaN);  // Jump
    }
};

board.update();