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

时间：2019-05-21 07:37:37

标签： javascript slider jsxgraph

从22.5.2019起更新

我做了一个“无效”代码的简单示例，并且在绘制点时通过在本地定义K1和KK来模仿“有效代码”，但是在一种方法中进行了此操作，使它们仅定义一次并具有相同的含义所有点的定义。由于我希望将点绘制在抛物线上，因此我现在创建的点距旋转轴和符号的半径均固定，因此我只需将符号从+1切换为-即可创建相距180度的两个点。在xz平面中绘制参数化点时为1。不过，什么也没画。 Here is a link指向我想看的东西（但是代码很丑）。

在最新的尝试下（画出的点更少，只是看它是否起作用）。

    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），我的代码使用滑块“ angle”。

将滑块值读入全局变量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” ：true”表示抛物线。不确定是否相关。

在不起作用的小提琴中，我还尝试将整个代码包含在“ board.on（'mouse，function（）{此处是第59行起的所有代码{）”中，以使要点移动，但这并没有帮助；根本不画点，甚至不画初始位置。

1 个答案:

答案 0 :(得分：1)

似乎上面发布的更新代码中有一个非常简单的错误：position:relative的值存储在属性position:static中，但是您尝试以sign的形式访问它。我的建议是使用以下代码：

pp.S
相关问题
最新问题