如何通过在 JSXGraph 中拖动另一个元素来拖动滑翔机

Question

我在一条直线上有一个滑翔机，它在您拖动后会动画化。然后我在滑翔机旁边创建了一个盒子（使用 4 个点和多边形）。

我的问题是，我想让用户拖动这个盒子来拖动滑翔机，让盒子随着滑翔机一起移动。

这是我目前正在使用的完整代码的 link，它有助于可视化问题 https://jsfiddle.net/uobdpw0y/2/

滑翔机是红色的点，它滑行的线是蓝色的。可以看到，拖动红点时方框会移动，而拖动方框的其他部分则不会移动。

问题相关代码如下：

  // create the mass at the moving end of the spring
  var point = board.create('glider', [5, 0, line], {withLabel: false, size: 1});

...

  // create moving box at end of spring
  var opts = {withLabel: false, size: 0, strokeColor:'green', fillColor:'green'};
  var boxPoints = [];
  boxPoints.push(board.create('point',[function(){return point.X()}, 0.5], opts));
  boxPoints.push(board.create('point',[function(){return point.X()}, -0.5], opts));
  boxPoints.push(board.create('point',[function(){return point.X()+2}, -0.5], opts));
  boxPoints.push(board.create('point',[function(){return point.X()+2}, 0.5], opts));

  board.create('polygon', boxPoints, {hasInnerPoints: true});
  board.create('group', boxPoints);

期望的结果将类似于 Group 文档中看到的功能 https://jsxgraph.org/docs/symbols/Group.html#781b5564-a671-4327-81c6-de915c8f924e 他们创建的方框会随着您拖动其中的任何部分而移动。

我最初尝试的解决方案是将滑翔机包含在用于框的点组中，但只能添加点对象，而不能添加滑翔机对象。

Answer 1

这是一个非常好的结构。我的建议如下：

var point = board.create('point', [5, 0], {withLabel: false, size: 1});

// ...

var boxPoints = [];
boxPoints.push(board.create('point',[point.X(), 0.5], opts));
boxPoints.push(board.create('point',[point.X(), -0.5], opts));
boxPoints.push(board.create('point',[point.X()+2, -0.5], opts));
boxPoints.push(board.create('point',[point.X()+2, 0.5], opts));

var pol = board.create('polygon', boxPoints, {hasInnerPoints: true});
board.create('group', boxPoints.concat([point]));
boxPoints[0].on('move', function(e) {
  this.moveTo([this.X(), 0.5], 0);
});
point.on('drag', function(e) {
  this.moveTo([this.X(), 0], 0);
});
pol.on('drag', function(e) {
  point.moveTo([point.X(), 0], 0);
  boxPoints[0].moveTo([point.X(), 0.5], 0);
});

也就是说，滑翔机现在是一个简单的点，并且在每个 move/drag 事件中校正该点和框的垂直位置。查看 https://jsfiddle.net/rqx48shb/3/ 的实际效果。

如何通过在 JSXGraph 中拖动另一个元素来拖动滑翔机

How to drag a glider by dragging another element in JSXGraph

javascript

jsxgraph