如何使用 JSXgraph 在曲线内部进行阴影处理

Question

我目前正在尝试遮蔽二次不等式。为此，我必须能够在确定曲线之外的 and/or 内部进行阴影处理。我查看了 JSXgraph documentation，但似乎没有发现任何对我的问题有帮助的东西。

这个不适用于我的场景。

当前创建曲线的代码：

// 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/ 查看它的实际应用。

Answer 2

如果要填充图形的内部，可以像这样使用两个不等式，参见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});
  }
});

如何使用 JSXgraph 在曲线内部进行阴影处理

How can I shade inside the curve using JSXgraph

javascript

math

function

jsxgraph