javascript - 如何将滑块值动态读取到 JSXGraph 中的函数中？

Question

22.5.2019 更新

我做了一个更简单的“不工作”代码示例，并通过在绘制点时在本地定义 K1 和 KK 来模仿“工作代码”，但是在一个方法中这样做，让它们只定义一次并且对所有都具有相同的定义点。由于我希望将点绘制在抛物线上，因此我现在创建与旋转轴和符号具有固定半径的点，这样我只需将符号从 +1 切换到 - 即可创建相隔 180 度的两个点1 在 xz 平面中绘制参数化点时。不过，什么都没有画出来。这是我想看的东西的链接（但代码很难看）。

低于最新尝试（绘制的点数较少，只是为了看看它是否有效）。

    const board = JXG.JSXGraph.initBoard('jxgbox', {
  boundingbox: [-10, 10, 10, -10],
  axis: true,
  showCopyright: true,
  showNavigation: true,
  pan: false,
  grid: false,

  zoom: {
    factorX: 1.25,
    factorY: 1.25,
    wheel: false
  }
});

//create z axis
var zAxis = board.create('axis', [
  [0, 0],
  [-1, -1]
], {
  ticks: {
    majorHeight: 10,
    drawLabels: false
  }
});

//create direction of view for projections
var cam = [4, 4, 30]; // [x,y,z]
var r = 6.0;
var origin = [0, 0, 0];

// Function for parallel projection
var project = function(crd, cam) {
  var d = -crd[2] / cam[2];
  return [1, crd[0] + d * cam[0], crd[1] + d * cam[1]];
};

//create slider for rotating the parabola
var sRadius = board.create('slider', [
  [1, -8.5],
  [6, -8.5],
  [-10, 0, 10]
], {
  name: 'angle',
  needsRegularUpdate: true
  //snapWidth: 1
});

//create slider for adjusting the angular speed
var sOmega = board.create('slider', [
  [1, -7.5],
  [6, -7.5],
  [0, 2, 10]
], {
  name: 'Omega',
  needsRegularUpdate: true
  //snapWidth: 1,
});

//fix parameters
const g = 9.81 //gravitational acceleration
const h0 = 5 //initial height of the water surface

//define radius from the y-axis for I3 and I4
const R34 = Math.sqrt(2);


// Function for parallel projection
var project = function(crd, cam) {
  var d = -crd[2] / cam[2];
  return [1, crd[0] + d * cam[0], crd[1] + d * cam[1]];
};


//function creates points for drawing conic sections
function PPoint2(radius,sign,namep,fixval) {
    this.R=radius;
  this.S=sign;
  this.Namep=namep;
  this.Fixval=fixval
}


//method for drawing each Point
PPoint2.prototype.draw = function(pp) {
    board.create('point', [function() {
    var K1 = sOmega.Value()*sOmega.Value()/g,
            KK = 1/4*sOmega.Value()*sOmega.Value()/g,
        v = sRadius.Value() * Math.PI * 0.5 / 10.0,
            c = [pp.sign*pp.R*Math.sin(v),K1/2*pp.R*pp.R-KK+h0,pp.sign*pp.R*Math.cos(v)];
    //debugger
    return project(c, cam);
  }
], {
  fixed: this.Fixval,
  name: this.Namep,
  visible: true
  })
}


//create and draw points

var p3 = new PPoint2(0,-1,'p_3','false');
var I_1 = new PPoint2(r,1,'I_1','false');

//debugger


p3.draw(p3)
I_1.draw(I_1)

下面的原始问题：

我正在使用 JSXGraph 来说明“桶参数”（水如何在旋转桶中形成抛物面的形状）。我想 A）抛物线的形状取决于桶的角速度“欧米茄”。B) 将抛物线从 3D 投影到 2D 图像，并且用户可以使用滑块转动抛物线。

对于 A）我的代码使用滑块“Omega”，对于 B）滑块“角度”。

滑块值被读入全局变量 K1（抛物线的二阶项的系数）和 KK（抛物线的常数项）。然后绘制五个点（p3 和 I_1-I_4），并且应该通过这些点绘制抛物线。使用初始滑块值绘制点，但更新（即滑动）滑块不会使点移动。而且，抛物线根本没有画出来。

如何使点根据当前滑块值调整它们的位置？我想要的功能在这个小提琴https://jsfiddle.net/ync3pkx5/1/中实现（但代码很丑陋，KK 和 K1 是在本地为每个点定义的，但我希望它们是全局的）。

HTML

<div id="jxgbox" class="jxgbox" style="width:500px; height:500px">
</div>

JS

    //create drawing board
const board = JXG.JSXGraph.initBoard('jxgbox', {
  boundingbox: [-10, 10, 10, -10],
  axis: true,
  showCopyright: true,
  showNavigation: true,
  pan: false,
  grid: false,

  zoom: {
    factorX: 1.25,
    factorY: 1.25,
    wheel: false
  }
});

//create z axis
var zAxis = board.create('axis', [
  [0, 0],
  [-1, -1]
], {
  ticks: {
    majorHeight: 10,
    drawLabels: false
  }
});

//create direction of view for projections
var cam = [4, 4, 30]; // [x,y,z]
var r = 6.0;
var origin = [0, 0, 0];

// Function for parallel projection
var project = function(crd, cam) {
  var d = -crd[2] / cam[2];
  return [1, crd[0] + d * cam[0], crd[1] + d * cam[1]];
};

//create slider for rotating the parabola
var sRadius = board.create('slider', [
  [1, -8.5],
  [6, -8.5],
  [-10, 0, 10]
], {
  name: 'angle',
  //snapWidth: 1
});

//create slider for adjusting the angular speed (inactive)
var sOmega = board.create('slider', [
  [1, -7.5],
  [6, -7.5],
  [0, 0, 10]
], {
  name: 'Omega',
  //snapWidth: 1,
});

//fix parameters
var g = 9.81 //gravitational acceleration
var h0 = 5 //initial height of the water surface
//peak coordinates of the fixed parabola
var KK = 1/4*sOmega.Value()*sOmega.Value()*r*r/g; //constant term in the equation of the parabola
var peak = [0, -KK+h0];
//point for mirroring
var pmirr = board.create('point', [0, h0/2], {
  visible: false
});
//define radius from the y-axis for I3 and I4
var R34 = Math.sqrt(2);

//function for projecting poomntson the parabola
var PProject = function(xx,yy,zz) {
    var K1 = sOmega.Value() * sOmega.Value() / g,
      v = sRadius.Value() * Math.PI * 0.5 / 10.0,
      KK = 1/4*sOmega.Value()*sOmega.Value()*r*r/g;
    return project([xx * Math.sin(v), K1/2 * yy * yy-KK+h0, zz * Math.cos(v)], cam);
  }


//p1-p3 are used for drawing the elliptical curves circ1 and prbl2
var p1 = board.create('point', [r, 0], {
  fixed: true,
  name: 'p_1',
  visible: false
});
var p2 = board.create('point', [-r, 0], {
  fixed: true,
  name: 'p_2',
  visible: false
});


var p3 = board.create('point', [
  function() {
    var KK = 1/4*sOmega.Value()*sOmega.Value()*r*r/g,
            c =[0,-KK+h0,0];
    //alert(KK);
    //alert(h0);
    return project(c, cam);
  }
], {
  visible: true,
  name: 'p3'
});

//divisor when drawing points A-C for ellipses and points A2-C2
var div = Math.sqrt(2)

//point variables for drawing circles   
var A = board.create('point', [
  function() {
    var c = [r / div, 0, r / div];
    return project(c, cam);
  }
], {
  name: 'A',
  visible: false
});


var B = board.create('point', [
  function() {
    var c = [-r / div, 0, r / div];
    return project(c, cam);
  }
], {
  name: 'B',
  visible: false
});


var C = board.create('point', [
  function() {
    var c = [r / div, 0, -r / div];
    return project(c, cam);
  }
], {
  name: 'C',
  visible: false
});


//I-I4 are points for drawing the rotating parabola
var I = board.create('point', [
  function() {
    var K1 = sOmega.Value() * sOmega.Value() / g,
      v = sRadius.Value() * Math.PI * 0.5 / 10.0,
      KK = 1/4*sOmega.Value()*sOmega.Value()*r*r/g;
    return project([r * Math.sin(v), K1/2 * r * r-KK+h0, r * Math.cos(v)], cam);
  }
], {
  visible: true,
  name: 'I'
});

var I2 = board.create('point', [
  function() {
    var K1 = sOmega.Value() * sOmega.Value() / g, 
            v = sRadius.Value() * Math.PI * 0.5 / 10.0,
        KK = 1/4*sOmega.Value()*sOmega.Value()*r*r/g;
    return project([-r * Math.sin(v), K1/2 * r * r-KK+h0, -r * Math.cos(v)], cam);
  }
], {
  visible: true,
  name: 'I_2'
});


var I3 = board.create('point', [
  function() {
    var K1 = sOmega.Value() * sOmega.Value() / g,
            v = sRadius.Value() * Math.PI * 0.5 / 10.0,
        KK = 1/4*sOmega.Value()*sOmega.Value()*r*r/g;
    return project([R34 * Math.sin(v), K1/2 * R34 * R34-KK+h0, R34 * Math.cos(v)], cam);
  }
], {
  visible: true,
  name: 'I_3'
});

var I4 = board.create('point', [
  function() {
    var K1 = sOmega.Value() * sOmega.Value() / g, 
            v = sRadius.Value() * Math.PI * 0.5 / 10.0,
        KK = 1/4*sOmega.Value()*sOmega.Value()*r*r/g;
    return project([-R34 * Math.sin(v), K1/2 * R34 * R34-KK+h0, -R34 * Math.cos(v)], cam);
  }
], {
  visible: true,
  name: 'I_4'
});


//draw circle on surface y=0
var circ1 = board.create('conic', [A, B, C, p2, p1]);
//draw a mirror circle of circ1 w.r.t. to pmirr and a small circle that delimits the parabolas
var circ2 = board.create('mirrorelement', [circ1, pmirr]);

//draw the rotating parabola
var prbl2 = board.create('conic', [I, I2, I3, I4, p3], {
  strokeColor: '#CA7291',
  strokeWidth: 2,
  //trace :true
});

debugger;

//add textbox
var txt1 = board.create('text', [3, 7, 'The blue lines delimit the volume of water when Omega = 0 and the red parabola delimits the volume without water as the bucket is rotating (surface h(r)). The water volume is constant, independent of Omega']);

这是我正在研究的小提琴，并且想要开始工作 https://jsfiddle.net/c8tr4dh3/2/

HTML

 <div id="jxgbox" class="jxgbox" style="width:500px; height:500px">
    </div>

JS

    const board = JXG.JSXGraph.initBoard('jxgbox', {
  boundingbox: [-10, 10, 10, -10],
  axis: true,
  showCopyright: true,
  showNavigation: true,
  pan: false,
  grid: false,

  zoom: {
    factorX: 1.25,
    factorY: 1.25,
    wheel: false
  }
});

//create z axis
var zAxis = board.create('axis', [
  [0, 0],
  [-1, -1]
], {
  ticks: {
    majorHeight: 10,
    drawLabels: false
  }
});

//create direction of view for projections
var cam = [4, 4, 30]; // [x,y,z]
var r = 6.0;
var origin = [0, 0, 0];

// Function for parallel projection
var project = function(crd, cam) {
  var d = -crd[2] / cam[2];
  return [1, crd[0] + d * cam[0], crd[1] + d * cam[1]];
};

//create slider for rotating the parabola
var sRadius = board.create('slider', [
  [1, -8.5],
  [6, -8.5],
  [-10, 0, 10]
], {
  name: 'angle',
  needsRegularUpdate: true
  //snapWidth: 1
});

//create slider for adjusting the angular speed (inactive)
var sOmega = board.create('slider', [
  [1, -7.5],
  [6, -7.5],
  [0, 0, 10]
], {
  name: 'Omega',
  needsRegularUpdate: true
  //snapWidth: 1,
});


//fix parameters
var g = 9.81 //gravitational acceleration
var h0 = 5 //initial height of the water surface
var K1 = sOmega.Value() * sOmega.Value() / g; //coeffficient of the quadratic term of the parabola
var KK = 1/4*sOmega.Value()*sOmega.Value()*r*r/g; //constant term in the equation of the parabola
//peak coordinates of the fixed parabola
var peak = [0, -KK+h0];
//slider auxiliary variable
var v = sRadius.Value() * Math.PI * 0.5 / 10.0;


//define radius from the y-axis for I3 and I4
var R34 = Math.sqrt(2);

// Function for parallel projection
var project = function(crd, cam) {
  var d = -crd[2] / cam[2];
  return [1, crd[0] + d * cam[0], crd[1] + d * cam[1]];
};


//function creates points for drawing conic sections
function PPoint(xx, yy,zz,namep,fixval) {
    this.XX=xx;
  this.YY=yy;
  this.ZZ=zz;
  this.Namep=namep;
  this.Fixval=fixval
}


//method for drawing each Point
PPoint.prototype.draw = function(pp) {
    board.create('point', [function() {
    var c = [pp.XX,pp.YY,pp.ZZ];
    //debugger
    return project(c, cam);
  }
], {
  fixed: this.Fixval,
  name: this.Namep,
  visible: true
  })
}

var div=Math.sqrt(2);

//create and draw points
var p3 = new PPoint(0,peak[1],0,'p_3','false');
//debugger
var I_1 = new PPoint(r*Math.sin(v),K1/2*r*r-KK+h0,r*Math.cos(v),'I_1','false');
var I_2 = new PPoint(-r*Math.sin(v),K1/2*r*r-KK+h0,-r*Math.cos(v),'I_2','false');
var I_3 = new PPoint(R34*Math.sin(v),K1/2*R34*R34-KK+h0,R34*Math.cos(v),'I_3','false');
var I_4 = new PPoint(-R34*Math.sin(v),K1/2*R34*R34-KK+h0,-R34*Math.cos(v),'I_4','false');

p3.draw(p3)
I_1.draw(I_1)
I_2.draw(I_2)
I_3.draw(I_3)
//debugger;
I_4.draw(I_4)



//draw the rotating parabola
var prbl = board.create('conic', [[I_1.XX,I_1.YY,I_1.ZZ], [I_2.XX,I_2.YY,I_2.ZZ], [I_3.XX,I_3.YY,I_3.ZZ], [I_4.XX,I_4.YY,I_4.ZZ],[p3.XX,p3.YY,p3.ZZ]], {
  strokeColor: '#CA7291',
  strokeWidth: 2,
  //trace :true
});


//debugger;
//add textbox
var txt1 = board.create('text', [3, 7, 'The blue lines delimit the volume of water when Omega = 0 and the red parabola delimits the volume without water as the bucket is rotating (surface h(r)). The water volume is constant, independent of Omega']);

第一个小提琴中的蓝色圆圈并不重要，它们可以稍后添加到另一个中。

做了一些调试后，抛物线的父母在两个小提琴中都有“isReal：true”，但在不起作用的小提琴中，抛物线本身有“isReal：false”，而正在工作的小提琴有“isReal：true”为抛物线。不过，不确定这是否相关。

在非工作小提琴中，我还尝试将整个代码封装到“board.on('mouse,function(){here all code from line 59 onwards{) 以使点移动，但这没有帮助；根本没有绘制点，甚至没有绘制初始位置。

score 1 · Accepted Answer

似乎在上面发布的更新代码中存在一个非常简单的错误：的值sign存储在属性pp.S中，但您尝试以pp.sign. 我的建议是使用以下代码：

function PPoint2(radius,sign,namep,fixval) {
    this.R = radius;
    this.S = sign;
    this.Namep = namep;
    this.Fixval = fixval;
}


//method for drawing each Point
PPoint2.prototype.draw = function() {
    var pp = this;
    this.point = board.create('point', [function() {
        var K1 = sOmega.Value()*sOmega.Value()/g,
            KK = 1/4*sOmega.Value()*sOmega.Value()/g,
            v = sRadius.Value() * Math.PI * 0.5 / 10.0,
            c = [pp.S*pp.R*Math.sin(v),
                 K1/2*pp.R*pp.R-KK+h0,
                 pp.S*pp.R*Math.cos(v)];
        return project(c, cam);
        }], {
    fixed: this.Fixval,
    name: this.Namep,
    visible: true
    });
};

//create and draw points
var p3 = new PPoint2(0,-1,'p_3','false');
var I_1 = new PPoint2(r,1,'I_1','false');

p3.draw();
I_1.draw();

javascript - 如何将滑块值动态读取到 JSXGraph 中的函数中？

1 回答 1

Related

Reference