如何把n改成nslider.Value()？

Question

我写了 jsxgraphic 代码来绘制心形波纹管。我想将 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);

link: https://jsfiddle.net/fcgej23p/19/

Answer 1

那么，您因此必须删除 n by 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();

如何把n改成nslider.Value()？

How to change n to nslider.Value()?

jsxgraph