Javascript 如何通过拖动JSXGraph中的另一个元素来拖动滑翔机
我有一个滑翔机在一条线上,当你拖动它后,它就会产生动画。然后我在滑翔机旁边创建了一个长方体(使用4个点和多边形) 我的问题是,我想让用户拖动这个盒子来拖动滑翔机,让盒子随着滑翔机一起移动 下面是我目前正在使用的完整代码的链接,这有助于将问题可视化 滑翔机是红色的点,滑翔线是蓝色的。 如您所见,拖动红色点时,长方体会移动,但拖动长方体的任何其他部分时,长方体不会移动 以下是与问题相关的代码:Javascript 如何通过拖动JSXGraph中的另一个元素来拖动滑翔机,javascript,jsxgraph,Javascript,Jsxgraph,我有一个滑翔机在一条线上,当你拖动它后,它就会产生动画。然后我在滑翔机旁边创建了一个长方体(使用4个点和多边形) 我的问题是,我想让用户拖动这个盒子来拖动滑翔机,让盒子随着滑翔机一起移动 下面是我目前正在使用的完整代码的链接,这有助于将问题可视化 滑翔机是红色的点,滑翔线是蓝色的。 如您所见,拖动红色点时,长方体会移动,但拖动长方体的任何其他部分时,长方体不会移动 以下是与问题相关的代码: // create the mass at the moving end of the spring
// 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);
预期结果与集团文档中的功能类似
在这里,他们创建的长方体在拖动任何部分时都会移动
我尝试的最初解决方案是将glider包含在用于长方体的点组中,但只能添加点对象,不能添加glider对象。这是一个非常好的构造。我的建议如下:
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);
});
也就是说,滑翔机现在是一个简单的点,该点和长方体的垂直位置在每次移动/拖动事件中都会得到纠正。请在中查看。这是一个非常好的结构。我的建议如下:
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);
});
也就是说,滑翔机现在是一个简单的点,该点和长方体的垂直位置在每次移动/拖动事件中都会得到纠正。在行动中看到它