JSXGraph: перемещение сгруппированных объектов по коду, а не по мышке - PullRequest
Новая
       39

JSXGraph: перемещение сгруппированных объектов по коду, а не по мышке

0 голосов
/ 06 октября 2019

Я хотел бы переместить точки в группе с помощью некоторого выделенного кода, однако перемещение группы представляется возможным только с помощью событий мыши.

Более подробно, у меня есть группа, содержащая вершинымногоугольник и несколько дополнительных точек. В «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 для любой из сгруппированных точек?

Ответы [ 2 ]

0 голосов
/ 07 октября 2019

Кроме того, я попробовал нечто подобное с вращениями группы. На случай, если кто-то захочет сделать то же самое в будущем, вам нужно лишь немного изменить первый подход Альфреда: 

    ...
    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]);
    });```
0 голосов
/ 06 октября 2019

Если вы намерены, чтобы первая вершина многоугольника достигала только целочисленных координат, тогда есть (как минимум) две возможности, обе используют 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]);
...