jsxgraph - JSXGraph 中两条曲线之间的阴影部分

Question

如何在 JSXGraph Curves Screenshot中对两条曲线之间的部分进行着色

let board = JSXGraph.createPlot({boundingbox: [-5,5,8,-2], axis: true, grid: true, zoom: {needShift: true}, pan: {needTwoFingers: true}});
let func1 = board.create('functiongraph', [(x) => {return 2 * x**2}, -5, 5], {name: 'f1'});
let func2 = board.create('functiongraph', [(x) => {return 3 + x**2}, -5, 5], {name: 'f2'});

我知道是可能的：

• 生成然后着色一个近似曲线的多边形
  • https://groups.google.com/forum/#!searchin/jsxgraph/shade%7Csort:date/jsxgraph/h8yC0qSG3UE/ayGGps1JBgAJ
• 使用积分对函数和 x 轴之间的区域进行着色
  • https://jsxgraph.uni-bayreuth.de/docs/symbols/Integral.html
• 阴影圈交叉点（但我不明白它是如何工作的）
  • https://jsxgraph.uni-bayreuth.de/wiki/index.php/Fill_the_intersection_area_of_two_circles

Answer 1

我也觉得处理这个令人沮丧。好吧，我意识到封闭曲线可以应用填充颜色。因此，我通过函数创建了数组并将它们连接在一起并创建了一条闭合曲线。这是我的小技巧。随意 有界区域

                                        <div id="jxgbox2" class="jxgbox" style="width:500px; height:500px; margin:auto;"></div>
                                    <script type="text/javascript">
                                    var brd2 = JXG.JSXGraph.initBoard('jxgbox2', {boundingbox:[-1,14,14,-1], axis:true, keepaspectratio:true, showcopyright:false, shownavigation:false});
                                    var pA=[], pB=[], pC=[], fA=[], gA=[], polyA=[];
                                    gA[0]=brd2.create('curve', [function(x){return x;},function(x){return x*x;},0,14]);
                                    gA[1]=brd2.create('curve', [function(x){return x;},function(x){return 24/x +1;},0,14]);
                                    pA[0]=brd2.create('glider', [1,1,gA[0]],{name:"$$P(1,1)$$",fixed:true});
                                    pA[1]=brd2.create('intersection', [gA[0],gA[1]],{name:"Q"});
                                    for(i=0; i<2; i++){gA[i].setProperty({strokeWidth:2,strokeColor:'#E8981D'})};
                                    gA[2]=brd2.create('tangent', [pA[0]],{visible:false});
                                    pA[2]=brd2.create('intersection', [gA[2],gA[1]],{name:"R"});
                                    for(i=0; i<3; i++){pA[i].setProperty({size:2,color:'#555555'})};
                                    gA[3]=brd2.create('curve',[function(x){return x;},function(x){return gA[2].getSlope()*x+gA[2].getRise();},0,14]);
                                    fA[0]=function(x){return x*x;};
                                    fA[1]=function(x){return 24/x +1;};
                                    fA[2]=function(x){return gA[2].getSlope()*x+gA[2].getRise();};
                                    for(i=0; i<pA[1].X()*2; i++)
                                    {pB.push(brd2.create('point',[i*0.5,fA[0](i*0.5)]))};
                                    for(i=0; i<(pA[2].X()*1-pA[1].X())*2; i++)
                                    {pB.push(brd2.create('point',[pA[1].X()+i*0.5,fA[1](pA[1].X()+i*0.5)]))};
                                    for(i=0; i<(pA[2].X()*1-pA[0].X())*2; i++)
                                    {pB.push(brd2.create('point',[pA[2].X()-i*0.5,fA[2](pA[2].X()-i*0.5)]))};
                                    for(i=0; i<pB.length; i++){pB[i].setProperty({visible:false})};
                                    pC=pB.slice(3,pB.length);
                                    gA[4] = brd2.create('curve', JXG.Math.Numerics.bezier(pC),{fillColor:'red', strokeWidth:0.5, fixed:true, fillOpacity:0.5}); 


                                    </script><br><br>