良好图形交互的一些问题文本格式、交集精度、操作

如何解决良好图形交互的一些问题文本格式、交集精度、操作

这是一个近乎完美的图表。

<!DOCTYPE html>
<html>
  <head>
   <link rel="stylesheet" type="text/css" href="style.css">
    <Meta charset="utf-8">
    <Meta name="viewport" content="width=device-width">
    <title>[Modèle de négociation de Rubinstein ]</title>
   

<link rel="stylesheet" type="text/css" href="http://jsxgraph.uni-bayreuth.de/distrib/jsxgraph.css" />
<script type="text/javascript" src="http://jsxgraph.uni-bayreuth.de/distrib/jsxgraphcore.js"></script> 
  </head>
<style>
.serif {
  font-famliy: "Computer Modern",Times,serif;
}

.sansserif {
  font-famliy: "Computer Modern Sans",sans-serif;
}

.monospace {
  font-famliy: "Lucida Console",Courier,monospace;
}
 body {
  background-color:  #f2f2f2;
  color: #074978;
}

.shaded {
  padding: 8px; border: 1px solid #CCC; Box-shadow:8px 8px 12px #888; border-radius:6px;
  }

div.Wrapper *{
  color:"red";
}

#myDIV {
  color="red";
  background-color: Transparent;;
  }
.circle
{
  width:25px;height:25px;
  border: solid 1px #DCDCDC;
  background-color: #DCDCDC;
  Box-shadow: 10px 10px  5px rgba(0,0.6);
  -moz-Box-shadow: 2px 2px  1px rgba(1,1,0.6);
  -webkit-Box-shadow: 10px 10px  5px rgba(1,0.6);
  -o-Box-shadow: 5px 5px  5px rgba(1,0.6);
  border-radius:70px;
}
</style>


<script>
window.MathJax = {
  tex: {
    inlineMath: [ ['$','$'],["\\(","\\)"] ],displayMath: [ ['$$','$$'],["\\[","\\]"] ],packages: ['base','ams']
  },options: {
    ignoreHtmlClass: 'tex2jax_ignore',processHtmlClass: 'tex2jax_process'
  }
};
</script>  

<script type="text/javascript" id="MathJax-script" 
  src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js">
</script>

</head>
<body class="serif">


<center>
<div id="Box" class="jxgBox" style="width:600px; height:500px;">
<script type="text/javascript">
JXG.Options.text.useMathJax = true;

var board = JXG.JSXGraph.initBoard('Box',{boundingBox: [-10,50,70,-5],axis:false,keepaspectratio:true});

var p0 = board.create('point',[0,0],{name:'',size:1,strokeColor:'#AE181E',visible:false,fixed:true});
var p1 = board.create('point',40],fixed:true});
var p2 = board.create('point',[40,fixed:true});
var s1 = board.create('segment',[p0,p1],{lastArrow:true,strokeColor:'#000000'});
var s2 = board.create('segment',p2],strokeColor:'#000000'});
var t1 = board.create('text',-1.5,'$x_1$'],{fixed:true});
var t2 = board.create('text',[-2.5,40,'$x_2$'],{fixed:true});

//contrainte budgétaire
var p3 = board.create('point',35],{name:'$R/p_1$',fixed:true});
var p4 = board.create('point',[20,{name:'$$',fixed:false});
var s3 = board.create('segment',[p3,p4],{strokeColor:'#5F9EA0',dash:5});
var gl1=board.create('glider',35,s1],strokeColor:'#41D1CC',fillColor:'#41D1CC',label:{autoposition: true,offset:[-15,0]}});
var gl2=board.create('glider',s2],{name:'$R/p_2$',offset:[0,-15]}});
var p5= board.create('point',fixed:false});
var pol1=board.create('polygon',[gl1,gl2,p5],strokeColor:'#99ffff',visible:true,fixed:false});
var s4 = board.create('segment',gl2],strokeWidth:2});

var U=board.create('slider',[[40,[50,100,300]],{name:'$\\overline{U}$'});
var ci0=board.create('functiongraph',[function(x){return U.Value()/x;},0.001,{name:'$\\overline{U}$',strokeColor:'#006619',strokeWidth:1});
var ci1=board.create('functiongraph',[function(x){return 16/x;},strokeColor:'#555555',strokeWidth:1,dash:6});
var ci2=board.create('functiongraph',[function(x){return 100/x;},dash:6});
var ci3=board.create('functiongraph',[function(x){return 150/x;},dash:6});
var ci4=board.create('functiongraph',[function(x){return 176/x;},dash:6});

var ci5=board.create('functiongraph',[function(x){return 200/x;},dash:6});
var ci6=board.create('functiongraph',[function(x){return 300/x;},dash:6});
var inter0=board.create('intersection',[s4,ci0,{name:''});
var inter1=board.create('intersection',1],{name:''});

var p6= board.create('point',[45,2],fixed:false});
var p7= board.create('point',12],fixed:false});
var s4 = board.create('arrow',[p6,p7],{strokeColor:'#d90036',strokeWidth:2,});
var t3 = board.create('text',[48,7,function(){return '\\[U \\text{ croissante}\\]';}],{fixed:true});
var t4 = board.create('text',[41,4,function(){return '\\[\\overline{U}\\]';}],{fixed:true});
var t5 = board.create('text',[25,45,function(){return '\\[\\text{\'Equilibre du Consommateur}\\]';}],{fixed:true,fontSize:20});
</script>
</div>
</center>
</div>







<script>


function myFunction() {
  var x = document.getElementById("myDIV");
  if (x.style.display === "none") {
    x.style.display = "block";
  } else {
    x.style.display = "none";
  }
}
</script>


</body>
</html>

但我有一些问题：

我无法在标题中使用强调的 E。
我希望滑块不显示其值（这是一个理论图表，因此没有必要）。
相反，当我想要显示值时，我希望它在“现代计算机”中作为滑块的附近 LaTeX 名称。
两个交点之前消失并连接为一个（最佳）。
如何在那个时刻改变点颜色并用 $x^\star$ 和 $y^star$ 绘制垂直于轴的虚线。
顺便说一句，我想要一些彩色乳胶部件，但我不明白我在互联网上找到的解释。
最后但并非最不重要的一点是，由于蓝点位于滑块上，因此可以更改与另一条线的切点。我希望能够修复各种相切配置以便进行比较。

我知道这是一个很大的问题，我不知道如何将它们分成几部分，但如果有人至少有部分答案就好了。

良好图形交互的一些问题文本格式、交集精度、操作

如何解决良好图形交互的一些问题文本格式、交集精度、操作

相关推荐