0

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

更详细地说，我有一个包含多边形顶点和一些额外点的组。在多边形的“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？

4

2 回答 2

0

此外，我尝试了与小组轮换类似的方法。万一将来有人想做同样的事情，你只需要稍微修改一下 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]);
    });```
于 2019-10-07T10:24:48.527 回答
0

如果您打算让第一个多边形顶点仅获得整数值坐标，那么（至少）有两种可能性，都使用 a 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/现场观看。

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

    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]);
于 2019-10-06T19:42:32.517 回答