JSXGraph：通过代码而不是鼠标移动分组对象答案

【问题标题】：JSXGraph: Move grouped objects by code, not by mouseJSXGraph：通过代码而不是鼠标移动分组对象
【发布时间】：2019-10-06 11:58:57
【问题描述】：

我想通过一些专用代码移动组中的点，但是移动组似乎只能通过鼠标事件来实现。

更详细地说，我有一个包含多边形顶点和一些额外点的组。在多边形的“mouseup”上，我调用以下代码，它应该将第 0 个顶点与组中的所有其他点一起移动到网格点。

    var dx=this.vertices[0].X(); dx-=Math.floor(dx);
    var dy=this.vertices[0].Y(); dy-=Math.floor(dy);
    var obj=this.grp.objects; // I added the group with the polygon and extra points as "grp" attribute to the polygon
    for (var i=0; i<obj.length; i++) {
      obj[i].moveTo([obj[i].X()-dx, obj[i].Y()-dy]);
    }

多边形顶点和其他点都不会改变它们的位置。

有什么建议我做错了吗？ jsxgraph-group 不适合这个对象吗？任何解决方法，也许在任何分组点上调用 EventEmitter？

【问题讨论】：

标签： jsxgraph

【解决方案1】：

如果您打算让第一个多边形顶点仅获得整数值坐标，那么有（至少）两种可能性，都使用group：您使用组的方法效果很好，但只移动第一个就足够了观点。由于 group 属性，其他顶点将自动跟随。

const board = JXG.JSXGraph.initBoard('jxgbox', { 
    boundingbox: [-5, 5, 5, -5], axis:true
});

var p1 = board.create('point', [1, -1]);
var p2 = board.create('point', [2.5, -2]);
var p3 = board.create('point', [1, -3]);
var pol = board.create('polygon', [p1, p2, p3], {hasInnerPoints: true});

var group = board.create('group',[p1, p2, p3]);

pol.on('up', function() {
    var dx = Math.round(this.vertices[0].X());
    var dy = Math.round(this.vertices[0].Y());

    p1.moveTo([dx, dy]);
});

在https://jsfiddle.net/4gzhb127/ 现场观看。

另一种方法是简单地为第一个顶点赋予属性snapToGrid: true，在https://jsfiddle.net/bo7aks30/ 上查看它：

    const board = JXG.JSXGraph.initBoard('jxgbox', { 
        boundingbox: [-5, 5, 5, -5], axis:true
    });
var p1 = board.create('point', [1, -1], {snapToGrid: true});
var p2 = board.create('point', [2.5, -2]);
var p3 = board.create('point', [1, -3]);
var pol = board.create('polygon', [p1, p2, p3], {hasInnerPoints: true});
var group = board.create('group',[p1, p2, p3]);

【讨论】：

非常感谢，阿尔弗雷德。这完全符合我的要求。

【解决方案2】：

此外，我尝试了与小组轮换类似的方法。万一以后有人想做同样的事情，你只需要稍微修改一下 Alfred 的第一种方法：

    ...
    var pol = board.create('polygon', [p1, p2, p3], {hasInnerPoints: true});

    var group = board.create('group',[p1, p2, p3]);
    group.addRotationPoint(p2);

    pol.on('up', function() {
            var cx=0, cy=0;
        for (var i=0; i<3; i++) {
            cx+=this.vertices[i].X()/3;
            cy+=this.vertices[i].Y()/3;
        }
        var angle=Math.PI/8;
        var cos=Math.cos(angle), sin=Math.sin(angle);
        var dx=this.vertices[1].X()-cx,
                    dy=this.vertices[1].Y()-cy;
        var xrot = cx+cos*dx-sin*dy;
        var yrot = cy+sin*dx+cos*dy;

        p2.moveTo([xrot,yrot]);
    });```

【讨论】：