Оттенок между двумя кривыми в JSXGraph - PullRequest
Новая
       15

Оттенок между двумя кривыми в JSXGraph

0 голосов
/ 01 ноября 2018

Как мне затенить участок между двумя кривыми в JSXGraph * Скриншот 1001 * Кривые 

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'});

То, что я знаю, возможно:

1 Ответ

0 голосов
/ 30 мая 2019

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

                                        <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>
...