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

Question

我有多个要围绕单个点旋转的 pixi 图形矩形。我通过创建一个 pixi 容器并将所有对象添加到 is. 旋转容器时，所有对象都会相应旋转。旋转完成后，我想从容器中取出对象并将它们放回画布上。

我已经用一个普通的 pixi 舞台和容器完成了这个，它工作得很好。但是，我的项目需要我使用 pixi 视口库来处理鼠标缩放等。当我尝试从容器中删除对象并将它们放回视口时，坐标似乎与正确的位置不匹配。我已经为 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;
    }
}

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

标签： javascriptpixi.js