1

我目前正在尝试掩盖二次不等式。为此，我必须能够在确定的曲线内部和/或外部进行着色。我查看了JSXgraph 文档，似乎没有看到任何对我的问题有帮助的东西。

这个答案不适用于我的场景。

创建曲线的当前代码：

// Function y = ax^2+bx+c
function quadraticFunctionClassical(y, symbol, a, b, c, field, color) {
    var graph = board.create('functiongraph', [function (x) { return (a * Math.pow(x, 2) + (b * x) + c); }], { id: field, strokeColor: color, highlightStrokeColor: 'yellow', strokeWidth: 2 });
    graph.on('down', function (e, i) {
        showMaster(this.id);
    });
    graphMap.set(field, graph);
}

有什么建议么？我会将 100 美元电子转帐给帮助我解决此问题的人。

4

2 回答 2

1

事实上，这在 JSXGraph 中是不可能开箱即用的。但对于特定的函数图，它应该是可行的。诀窍是有一个处理阴影的进一步图表。

对于抛物线的情况，我们将抛物线的点克隆到着色曲线，并预先添加更多点，使填充区域始终位于曲线下方。这是代码：

var left = -5, right = 5, top = 5, bot = -5;
const board = JXG.JSXGraph.initBoard('jxgbox', { 
    boundingbox: [left, top, right, bot], axis:true
});

var a = board.create('slider', [[-4,4],[3,4],[-10,1,10]], {name:'a'});
var b = board.create('slider', [[-4,3.5],[3,3.5],[-10,1,10]], {name:'b'});
var c = board.create('slider', [[-4,3],[3,3],[-10,1,10]], {name:'c'});

var graph = board.create('functiongraph', [
    function (x) { return (a.Value() * x * x + b.Value() * x + c.Value()); }
  ], { strokeColor: 'black', highlightStrokeColor: 'yellow', strokeWidth: 2});

// Add a second curve for the filling
var g1 = board.create('curve', [[], []], 
  {fillColor: 'yellow', fillOpacity: 0.2});

// This is the update function for the second curve
g1.updateDataArray = function() {
  var i, le = graph.numberPoints;
  this.dataX = [];
  this.dataY = [];

  // Add the lower left corner of the board
  this.dataX.push(left);
  this.dataY.push(bot);
  if (graph.points[0].usrCoords[1] > left) {
    this.dataX.push(left);
    this.dataY.push(top);
  }
  // Add the points of the original curve
  for (i = 0; i < le; i++) { 
    this.dataX.push(graph.points[i].usrCoords[1]);
    this.dataY.push(graph.points[i].usrCoords[2]);
  }
  // Add the lower right corner of the board
  if (graph.points[le - 1].usrCoords[1] < right) {
    this.dataX.push(right);
    this.dataY.push(top);
  }
  this.dataX.push(right);
  this.dataY.push(bot);
};
// An update of the board is mandatory to show the filling immediately.
board.update();

在https://jsfiddle.net/7retmajL/上查看它的实际应用。

于 2019-08-14T08:48:31.923 回答
0

如果应该填充图表的内部，可以使用两个这样的不等式元素，请参阅https://jsfiddle.net/kvq0xmL6/：

var graph = board.create('functiongraph', [
    function (x) { return (a.Value() * x * x + b.Value() * x + c.Value()); }
  ], { strokeColor: 'black', highlightStrokeColor: 'yellow', strokeWidth: 2});

var ineq_lower = board.create('inequality', [graph], {visible: false});
var ineq_upper = board.create('inequality', [graph], {inverse: true});
a.on('drag', function() {
  if (this.Value() >= 0.0) {
    ineq_lower.setAttribute({visible: false});
    ineq_upper.setAttribute({visible: true});
  } else {
    ineq_lower.setAttribute({visible: true});
    ineq_upper.setAttribute({visible: false});
  }
});
于 2019-08-15T21:17:54.643 回答