javascript - 如何使用 JSXgraph 在曲线内部着色

Question

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

这个answer不适用于我的场景。

当前创建曲线的代码:

// 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 美元给帮助我解决此问题的人员。

Answer 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/ 查看实际情况。 .