填充JSXGraph中圆与函数的交集区域

Question

我有一个圆圈和简单的函数 Math.cos(x)

我希望圆圈与该函数相交时被填充（仅填充上侧）。但它不起作用。

脚本：

    // circle
    var point1 = app.board.create('point', [0,0], {size: 2, strokeWidth:2 })
    var point2 = app.board.create('point', [6,0], {size: 2, strokeWidth:2 })
    var circle = app.board.create('circle', [point1,point2], {strokeColor: "#f00", strokeWidth: 2 })
    
    // function
    var func = app.board.create('functiongraph',[function(x){ return Math.cos(x)}]);

    // intersection
    var curve = app.board.create('curve', [[], []], {strokeWidth: 0, fillColor: "#09f", fillOpacity: 0.8})
    curve.updateDataArray = function() {
        var a = JXG.Math.Clip.intersection(circle, func, this.board);
        this.dataX = a[0];
        this.dataY = a[1]
    };
    app.board.update()

输出

预期的输出（我是在 Paint 上完成的）

提前谢谢你:)

Answer 1

在下一个示例中，我将使用 Math.cos() 为路径构建 d 属性。 我想你的功能可能会有所不同。 请注意，在 d 属性的末尾，路径正在关闭 svg 画布的上部。 我在 clipPath 中使用 pth 并用它剪裁圆圈。

let d ="M";

for(let x = -50; x<=50; x+=1){
  d+=`${x}, ${5*Math.cos(x/5)} `
}
d+="L50,-50L-50,-50z"
pth.setAttribute("d",d);

<svg viewBox="-50 -50 100 100" width="200">
  <clipPath id="clip">
    <path id="pth"/>
  </clipPath>
  <circle r="45" clip-path="url(#clip)" fill="blue"/>
</svg>

为了更好地理解我是如何构建路径的，请看下一个示例：

let d ="M";

for(let x = -50; x<=50; x+=1){
  d+=`${x}, ${5*Math.cos(x/5)} `
}
d+="L50,-50L-50,-50z"
pth.setAttribute("d",d);

<svg viewBox="-50 -50 100 100" width="200">
  <circle r="45" fill="blue"/>
  <path id="pth" fill="rgba(250,0,0,.4)"/> 
</svg>

Answer 2

这可以通过下周发布的 JSXGraph 的下一个版本轻松实现：使用 inequality 元素可以标记余弦曲线上方的区域。不等式元素是一条闭合曲线，可以与圆相交。在 v1.2.3 中，由于一个小错误，交集不起作用。

对于裁剪，下一个版本包含新元素curveintersection、curveunion、curvedifference，这使得使用 JXG.Math.Clip 的方法更容易，但当然你使用JXG.Math.Clip 的方法仍然会工作。

代码如下：

var f = board.create('functiongraph', ['cos(x)']);
var ineq = board.create('inequality', [f], {
            inverse: true, fillOpacity: 0.1
        });
var circ = board.create('circle', [[0,0], 4]);

var clip = board.create('curveintersection', [ineq, circ], {
            fillColor: 'yellow', fillOpacity: 0.6
        });

实际上，不等式元素的作用与 enxaneta 的“手动”作用相同。