javascript - 如何使根据给定点计算的抛物线随着点的移动而变化?

我试图让学生能够拖动三个点以显示 quadratic 的三个截距(具有实根),然后让 jsxgraph 绘制与这三个点匹配的抛物线。我的数学没有戏剧性,但我无法说服它随着积分的移动而更新。

这是我一直在研究的http://jsfiddle.net/jscottuq/fv7nwq9p/34/

当我使用 .on('drag' 方法拖动点时,我可以重新绘制图表,但我无法弄清楚如何清除以前的绘图(似乎我不应该使用该方法? )。

const board = JXG.JSXGraph.initBoard('jxgbox', {
  boundingbox: [-5, 5, 5, -5],
  axis: true
});
var xi1 = board.create('point', [2, 1], {
  visible: true,
  snapToGrid: true,
  snapSizeX: 0.1,
  snapSizeY: 0.1
});
var xi2 = board.create('point', [-2, 1], {
  visible: true,
  snapToGrid: true,
  snapSizeX: 0.1,
  snapSizeY: 0.1
});
var el0 = board.create('line', [
  [0, 0],
  [0, 1]
], {
  strokeOpacity: .2,
  strokeColor: '#000000',
  fixed: true,
  name: 'x=0'
});
var yi = board.create('glider', [0, 1, el0], {
  name: 'Y-Intercept',
  visible: true,
  snapToGrid: true,
  snapSizeX: 0.1,
  snapSizeY: 0.1
});
yi.on('drag', function() {
    board.removeObject(f);
  var p = parseFloat(xi1.X());
  var q = parseFloat(xi2.X());
  var r = parseFloat(yi.Y());
  var a = r / (p * q);
  var b = (r * (q + p)) / (p * q);
  var c = r;
  var func = a.toString() + '*x^2+' + b.toString() + '*x+' + c.toString();
  var f = board.jc.snippet(func, true, 'x', true);
  var graph = board.create('functiongraph', [f, -10, 10], {
    strokeColor: '#003399',
    strokeWidth: 2
  });
  var txt1 = board.create('text', [3, 4, function() {
    return "The current equation is:" + func;
  }]);
});

回答1

有一位同事向我展示了一种无需使用 jc.snippet 方法即可绘制函数的替代方法。 https://jsfiddle.net/jscottuq/axhjmqwz/11/

基本上 addcurve 做我想要的。

const board = JXG.JSXGraph.initBoard('jxgbox', {
boundingbox: [-5, 5, 5, -5],
axis: true
});
var el1 = board.create('line', [
[0, 0],
[1, 0]
], {
strokeOpacity: .2,
strokeColor: '#000000',
fixed: true,
name: 'y=0'
});
var el0 = board.create('line', [
[0, 0],
[0, 1]
], {
strokeOpacity: .2,
strokeColor: '#000000',
fixed: true,
name: 'x=0'
});
var xi1 = board.create('glider', [2, 0, el1], {
name: 'X-intercept2',
visible: true,
snapToGrid: true,
snapSizeX: 0.1,
snapSizeY: 0.1
});
var xi2 = board.create('glider', [-2, 0, el1], {
name: 'X-intercept1',
visible: true,
snapToGrid: true,
snapSizeX: 0.1,
snapSizeY: 0.1
});
var yi = board.create('glider', [0, 1, el0], {
name: 'Y-Intercept',
visible: true,
snapToGrid: true,
snapSizeX: 0.1,
snapSizeY: 0.1
});
// Macro function plotter
function addCurve(board, func, atts) {
var f = board.create('functiongraph', [func], atts);
return f;
}

// Simplified plotting of function
function plot(func, atts) {
if (atts==null) {
return addCurve(board, func, {strokewidth:2});
} else {
return addCurve(board, func, atts);
}
}

function f(x) {
var q = (-1)*parseFloat(xi1.X());
var p = (-1)*parseFloat(xi2.X());
var r = parseFloat(yi.Y());
var a = r / (p * q);
var b = (r * (q + p)) / (p * q);
var c = r;
var func = a * x * x + b * x + c;
return func;
}

c = plot(f);

相似文章

flutter - 类别子类别

我的用户点有类别和子类别。我想显示带有类别和子类别的点。我必须怎么做?例子类别1子类别1点1点2点3点4子类别2点1点2点3点4类别2子类别1点1点2点3点4子类别2点1点2点3点4类别3子类别1点1...

java - 计算 dates 的夏令时问题

我需要从我从Excel读取的一个date计算Dates,问题是,例如,如果我读取31/10/202102:00:00并添加1小时,它应该在同一小时再次返回,因为有时间改变所以在03:00:00将再次是...