Javascript 在jsxgraph中,为什么';在同一平面上,通过五个点画一条抛物线不是吗?
在一个例子中,我正在寻找一种在3D空间中绘制点的方法,以便点能够根据滑块值移动。现在这是可行的,但我试图通过这些点绘制的圆锥曲线(本例中为抛物线)没有绘制 我认为元素“圆锥曲线”的构造函数可能会对给定点的定义很挑剔,因此我最终添加了属性“子对象”,这些属性是绘制圆锥曲线时可以引用的点 在我下面的代码中,构造函数PPoint创建具有各自属性pcoord的对象,这是一个类型为“point”的几何对象,它是使用本地jsxgraph构造函数为点创建的。当调用“绘制”方法来绘制点I_1-I-4和p_1时,将指定pcoord 在代码的最后几行中,应参考对象I_1-I_4和p_1的pcoords绘制抛物线,但由于某些原因,未绘制抛物线 这怎么能解决。调试时,代码在没有错误通知的情况下执行 HTMLJavascript 在jsxgraph中,为什么';在同一平面上,通过五个点画一条抛物线不是吗?,javascript,jsxgraph,Javascript,Jsxgraph,在一个例子中,我正在寻找一种在3D空间中绘制点的方法,以便点能够根据滑块值移动。现在这是可行的,但我试图通过这些点绘制的圆锥曲线(本例中为抛物线)没有绘制 我认为元素“圆锥曲线”的构造函数可能会对给定点的定义很挑剔,因此我最终添加了属性“子对象”,这些属性是绘制圆锥曲线时可以引用的点 在我下面的代码中,构造函数PPoint创建具有各自属性pcoord的对象,这是一个类型为“point”的几何对象,它是使用本地jsxgraph构造函数为点创建的。当调用“绘制”方法来绘制点I_1-I-4和p_1时,
此代码有两个问题: 1) 在
PPoint.draw
参考二中,JSXGraph点不起作用:在每次更新中,都会创建一个新的JSXGraph点。这会使代码变慢,而且不会影响提供给圆锥曲线的初始点。我建议将draw
更改为:
PPoint.prototype.draw = function(pp) {
pp.pcoord = 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});
2) 第二个问题是JSXGraph无法通过五个点绘制退化的二次曲线,如果二次曲线接近退化,则会降低精度(一般抛物线存在数值问题)。这里的起始值omega=0
就是这种情况
这里有一个有效的例子:谢谢你,阿尔弗雷德,再一次,它就像一个符咒。我想,最初抛物线不会为ω=0绘制,但在我的初始代码中,它没有为ω的任何值绘制,这让我感到困惑。在夜间构建中,精度有所提高。现在抛物线也正确地显示了小ω值。
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, 0, 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 PPoint(radius, sign, namep, fixval) {
this.R = radius;
this.S = sign;
this.Namep = namep;
this.Fixval = fixval;
this.pcoord = undefined; //Cartesian coordinates of the point, stored as a point
}
//method for drawing each Point
PPoint.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.S * pp.R * Math.sin(v), K1 / 2 * pp.R * pp.R - KK + h0, pp.S * pp.R * Math.cos(v)];
//store the dynamically assigned coordinates of the point for drawing the parabola
pp.pcoord = board.create('point', [function() {
return project(c, cam);
}], {
visible: false
}); //end storing pp.coord
return project(c, cam);
}], {
fixed: this.Fixval,
name: this.Namep,
visible: true
})
}
//create and draw points
var p_1 = new PPoint(0, -1, 'p_1', 'false');
var I_1 = new PPoint(r, 1, 'I_1', 'false');
var I_2 = new PPoint(r, -1, 'I_2', 'false');
var I_3 = new PPoint(R34, 1, 'I_3', 'false');
var I_4 = new PPoint(R34, -1, 'I_4', 'false');
p_1.draw(p_1)
I_1.draw(I_1)
I_2.draw(I_2)
I_3.draw(I_3)
I_4.draw(I_4)
//draw the rotating parabola
var prbl = board.create('conic', [I_1.pcoord, I_2.pcoord, I_3.pcoord, I_4.pcoord, p_1.pcoord], {
strokeColor: '#CA7291',
strokeWidth: 2,
trace :true
});
//debugger
PPoint.prototype.draw = function(pp) {
pp.pcoord = 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});