Как заполнить область пересечения между кругом и функцией в JSXGraph

Question

У меня есть круг и простая функция Math.cos(x)

Я хочу, чтобы круг был заполнен, когда он пересекается с этой функцией (заполнить только верхнюю сторону). Но это у меня не работает.

Script:

// 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)

_{Свободный перевод вопроса Fill the intersection area between circle and function in JSXGraph от участника @Porizm.}

Answer 1

Это можно легко реализовать с помощью следующей версии JSXGraph, которая выйдет на следующей неделе: с помощью элемента неравенства можно отметить область над кривой косинуса. Элемент неравенства представляет собой замкнутую кривую, которую можно пересечь окружностью. В 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 «вручную».

_{Свободный перевод ответа от участника @Alfred Wassermann.}

Answer 2

В следующем примере я создаю атрибут d для пути с помощью Math.cos(). Я полагаю, ваша функция может быть другой.
Обратите внимание, что в конце атрибута d путь закрывает верхнюю часть холста svg. Я использую id="pth" внутри clipPath и обрезаю им круг.

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>

_{Свободный перевод ответа от участника @enxaneta.}

БЛОГ НА HUSL

Как заполнить область пересечения между кругом и функцией в JSXGraph

Ответы (2 шт):