使用 JavaScript 制作可拖动的 JSXGraph

Question

如何在 JSXGraph 中使点标签可拖动？

我可以使用 JSXGraph 制作三角形，但我无法创建该图的可拖动顶点。

这是我的代码：

<script type="text/javascript">
  board = JXG.JSXGraph.initBoard('jxgbox3',
  {
    axis:true,
    boundingbox:[-5.9,8,5.9,-5.9],
    keepaspectratio:true,
    showCopyright:false,
    showNavigation:false
  });
  var qr = [], arc2,isInDragMode;
  qr[1] = board.create('point', [0,0], 
    {style:5,fillColor:'#ff00ff'});
  qr[2] = board.create('point', [5,0], 
    {style:5,fillColor:'#ff00ff'});
  qr[3] = board.create('point', [3.85,4.4],  
    {style:5,fillColor:'#ff00ff'});

  var triArr1 = [qr[3],qr[2],qr[1]];
  var tri = board.createElement('polygon',triArr1,
    {strokeWidth:2, strokeColor:'#dd00dd',highlight:false});
  var arc1 = board.create('nonreflexangle',triArr1,
    {radius:1,name:'&theta;2'});
  var triArr2 = [qr[2],qr[1],qr[3]];
  var arc2 = board.create('nonreflexangle',triArr2,
    {radius:1,name:'&theta;1'});
  var triArr3 = [qr[1],qr[3],qr[2]];
  var arc3 = board.create('nonreflexangle',triArr3,
  ,{fixed:false}, {radius:1,name:'&theta;3'});

  board.create('text', [-5, 3, function ()
  {
    if(arc2.Value() > Math.PI)
  {
    ang2 =  (360 - arc2.Value() * 180 / Math.PI).toFixed(1);
    ang1 =  (360 - arc1.Value() * 180 / Math.PI).toFixed(1);
    ang3 =  (360 - arc3.Value() * 180 / Math.PI).toFixed(1);
  }
  else
  {
    ang2 =  (arc2.Value() * 180 / Math.PI).toFixed(1);
    ang1 =  (arc1.Value() * 180 / Math.PI).toFixed(1);
    ang3 =  (arc3.Value() * 180 / Math.PI).toFixed(1);
  }
  return '<p>&theta;_1 = ' + ang2 + '&deg;</p>'+'<p>&theta;_2 = '  + ang1 +  '&deg;</p>'+'<p>&theta;_3 = '  + ang3 +  '&deg;</p>'+'<p>&theta;_1 + &theta;_2 + &theta;_3 = 180&deg;</p>';
  }],{fixed:false});

Answer 1

默认情况下，标签是固定的。在您的代码中，如果使用

构建，则点标签是可拖动的

qr[1] = board.create('point', [0,0], 
    {style:5, fillColor:'#ff00ff', label:{ fixed:false }});
qr[2] = board.create('point', [5,0], 
    {style:5, fillColor:'#ff00ff', label:{ fixed:false }});
qr[3] = board.create('point', [3.85,4.4],  
    {style:5, fillColor:'#ff00ff', label:{ fixed:false }});

为了更好地处理触摸设备，建议在 initBoard() 中设置 ignoreLabels:false:

board = JXG.JSXGraph.initBoard('jxgbox3',
{
  axis: true,
  ignoreLabels: false,
  boundingbox:[-5.9,8,5.9,-5.9],
  keepaspectratio:true,
  showCopyright:false,
  showNavigation:false
});

使用 JavaScript 制作可拖动的 JSXGraph

Make draggable JSXGraph using JavaScript

javascript

jquery

jquery-ui

jsxgraph