Question

我有多个pixi图形矩形，我想围绕一个点旋转。我通过创建一个pixi容器并将所有对象添加到is中来解决了这个问题。旋转容器时，所有对象都会相应旋转。旋转完成后，我想从容器中删除对象，然后将它们放回画布上。

我已经使用正常的pixi平台和容器完成了此操作，并且效果很好。但是，我的项目要求我使用pixi视口librarie来处理鼠标缩放等。当我尝试从容器中删除对象并将它们放回视口时，坐标似乎与正确的位置不匹配。我为pixi图形对象，容器和视口尝试了许多翻译，例如toGlobal，toLocal，toWorld和toScreen。似乎没有一个能给出正确的结果。

function startRotation(angle) {

    // add all objects (in my case panels) to the container
    for (let selectedPanel of selectedPanels) {

        // create a container
        if (container === undefined) {
            container = new PIXI.Container();
            viewport.addChild(container);
        }

        viewport.removeChild(selectedPanel.g);
        container.addChild(selectedPanel.g);
    }

    // rotate the container
    let por = pointOfRotation; // calculated somewhere else

    container.position.x = por.x;
    container.position.y = por.y;
    container.pivot.x = por.x;
    container.pivot.y = por.y;
    container.rotation = Math.Radians(angle - startingRotation);
}

function finishRotation() {

    if (container !== undefined) {

        for (let selectedPanel of selectedPanels) {
            // attempt to find the global position of the panels
            // translate the panel position from container to global
            let viewportX = selectedPanel.g.toGlobal(container).x;
            let viewportY = selectedPanel.g.toGlobal(container).y;

            let globalX = viewport.toWorld(viewportX, viewportY).x;
            let globalY = viewport.toWorld(viewportX, viewportY).y;

            container.removeChild(selectedPanel.g);
            viewport.addChild(selectedPanel.g);

            // set the new position of the panels
            selectedPanel.g.x = globalX;
            selectedPanel.g.y = globalY;

            // set the new rotation of the panels
            let panelRotation = selectedPanel.getRotation() + Math.Degrees(container.rotation); 
            selectedPanel.setRotation(panelRotation);
        }

        viewport.removeChild(container);
        container = undefined;
    }
}

从容器中移除面板并将其添加到视口之后，我想设置面板在视口上的正确位置，但是用于此目的的代码不起作用。

使用pixi视口时如何旋转容器内的对象？

0 个答案: