旋转后的全局 X 和 Y

Question

我正在尝试获取应用了 regX、regY 和 rotation 的 DisplayObject 的全局坐标。考虑以下因素：

function drawShapes(){
    function createRectangle(color){
        var rect = new createjs.Shape();
        rect.graphics.beginFill(color).drawRect(0, 0, 100, 100);
        stage.addChild(rect);

        return rect;
    }

    var rect1 = createRectangle("rgba(255, 0, 0, 1)");
    rect1.x = 100;
    rect1.y = 100;
    var ltg = rect1.localToGlobal(0, 0);
    console.log(`rect1 x: ${rect1.x}, y: ${rect1.y}, globalX: ${ltg.x}, globalY: ${ltg.y}`);

    var rect2 = createRectangle("rgba(0, 255, 0, 1)");
    rect2.x = 100;
    rect2.y = 100;
    rect2.regX = 50;
    rect2.regY = 50;
    ltg = rect2.localToGlobal(0, 0);
    console.log(`rect2 x: ${rect2.x}, y: ${rect2.y}, globalX: ${ltg.x}, globalY: ${ltg.y}`);

    var rect3 = createRectangle("rgba(0, 0, 255, 1)");
    rect3.x = 100;
    rect3.y = 100;
    rect3.regX = 50;
    rect3.regY = 50;
    rect3.rotation = 45;
    ltg = rect3.localToGlobal(0, 0);
    console.log(`rect3 x: ${rect3.x}, y: ${rect3.y}, globalX: ${ltg.x}, globalY: ${ltg.y}`);

    stage.update();
}

http://jsfiddle.net/2gvv42or/

这个输出是：

rect1 x: 100, y: 100, globalX: 100, globalY: 100 这显然是有道理的

rect2 x: 100, y: 100, globalX: 50, globalY: 50这也有道理，绿色矩形向上和向左移动了 50 像素

rect3 x: 100, y: 100, globalX: 100, globalY: 29.289321881345245 这让我很困惑。它应该与 rect2 相同。它似乎已经旋转，无论 regX 和 regY

我是误会了什么还是 createjs 中存在错误/WAI。无论如何，有解决方法吗？

Answer 1

好的，我现在明白了。您必须将 regeX 和 readY 传递给 localToGlobal.

localToGlobal(50, 50);

旋转后的全局 X 和 Y

global X and Y after rotation

javascript

createjs