填充 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()

输出

预期输出（我在画图上做的）

提前谢谢你:)

Answer 1

在下一个示例中，我将使用 Math.cos() 为路径构建 d 属性。我想你的功能可能会有所不同。请注意，在 d 属性的末尾，路径关闭了 svg canvas 的上半部分。我在 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中，由于一个小bug，交集不起作用。

对于裁剪，下个版本包含新元素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 的“手工”作用相同。

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

Fill the intersection area between circle and function in JSXGraph

javascript

svg

jsxgraph