[英]How to drag a glider by dragging another element in JSXGraph
拖动后,动画线上会出现一个滑翔机。 然后,我在滑翔机旁边创建了一个框(使用4个点和多边形)。
我的问题是,我希望用户拖动此框来拖动滑翔机,并使框与滑翔机一起移动。
这是我目前正在使用的完整代码的链接,可帮助可视化问题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);
期望的结果将类似于在组文档https://jsxgraph.org/docs/symbols/Group.html#781b5564-a671-4327-81c6-de915c8f924e中看到的功能。它的任何部分。
我尝试的最初解决方案是将滑翔机包含在用于框的一组点中,但是只能添加“点”对象,而不能添加“滑翔机”对象。
这是一个非常好的结构。 我的建议如下:
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);
});
也就是说,滑翔机现在是一个简单的点,并且该点和框的垂直位置在每次移动/拖动事件中均得到纠正。 实际在https://jsfiddle.net/rqx48shb/3/上查看。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.