如何获取CreateJS中Bitmap或Container变换后的全局边界？

在CreateJS里要拿到经过旋转、缩放、位移等变换后的元素（比如你的Bitmap或者Container）在舞台上的全局边界，其实有两种靠谱的方法，我结合你的场景给你详细说下：

方法一：使用getTransformedBounds()（推荐） #

CreateJS的DisplayObject类提供了getTransformedBounds()方法，它会自动计算元素经过所有父级变换后的全局边界，返回一个包含x、y、width、height的Rectangle对象，非常省心。

不过要注意：Bitmap加载完成后需要确保它的边界是有效的，因为默认情况下Bitmap的bounds可能未初始化。你可以通过两种方式解决：

• 调用cache()方法，缓存Bitmap后会自动生成正确的bounds；
• 手动设置bounds属性为new createjs.Rectangle(0, 0, image.width, image.height)。

结合你的场景，完整代码如下：

var stage = new createjs.Stage("canvas");
var parent = new createjs.Container();
parent.x = 50;
parent.rotation = 90;
stage.addChild(parent);

var image = new Image();
image.src = "https://s.imgur.com/images/access/access-logo.png";
image.onload = handleImageLoad;

function handleImageLoad(event) {
    var bitmap = new createjs.Bitmap(event.target);
    
    // 方式1：手动设置bounds
    bitmap.bounds = new createjs.Rectangle(0, 0, image.width, image.height);
    
    // 方式2：调用cache生成bounds（如果后续需要缓存也可以用这个）
    // bitmap.cache(0, 0, image.width, image.height);
    
    parent.addChild(bitmap);
    
    // 获取全局变换后的边界
    var globalBounds = bitmap.getTransformedBounds();
    
    // 输出结果，你可以用这个边界做碰撞检测、定位等操作
    console.log("全局边界：x=" + globalBounds.x + ", y=" + globalBounds.y + ", width=" + globalBounds.width + ", height=" + globalBounds.height);
    
    // 可选：在舞台上画出这个边界，直观验证
    var boundsShape = new createjs.Shape();
    boundsShape.graphics.setStrokeStyle(2).beginStroke("red").drawRect(globalBounds.x, globalBounds.y, globalBounds.width, globalBounds.height);
    stage.addChild(boundsShape);
    
    stage.update();
}

方法二：手动计算边界（适合自定义需求） #

如果你想自己控制计算过程，可以先获取元素的本地边界，然后把边界的四个角转换为全局坐标，再找出这些点的最小/最大x、y值，从而得到全局边界。

代码示例：

function handleImageLoad(event) {
    var bitmap = new createjs.Bitmap(event.target);
    parent.addChild(bitmap);
    
    // 获取本地边界（这里我们手动指定，也可以用bitmap.getBounds()如果已初始化）
    var localBounds = new createjs.Rectangle(0, 0, image.width, image.height);
    
    // 获取四个角的本地坐标
    var points = [
        new createjs.Point(localBounds.x, localBounds.y),
        new createjs.Point(localBounds.x + localBounds.width, localBounds.y),
        new createjs.Point(localBounds.x + localBounds.width, localBounds.y + localBounds.height),
        new createjs.Point(localBounds.x, localBounds.y + localBounds.height)
    ];
    
    // 将所有点转换为全局坐标
    var globalPoints = points.map(function(point) {
        return bitmap.localToGlobal(point.x, point.y);
    });
    
    // 计算最小/最大x、y
    var minX = Math.min(...globalPoints.map(p => p.x));
    var maxX = Math.max(...globalPoints.map(p => p.x));
    var minY = Math.min(...globalPoints.map(p => p.y));
    var maxY = Math.max(...globalPoints.map(p => p.y));
    
    // 构建全局边界
    var globalBounds = new createjs.Rectangle(minX, minY, maxX - minX, maxY - minY);
    
    console.log("手动计算的全局边界：", globalBounds);
    
    // 同样可以画出来验证
    var boundsShape = new createjs.Shape();
    boundsShape.graphics.setStrokeStyle(2).beginStroke("blue").drawRect(globalBounds.x, globalBounds.y, globalBounds.width, globalBounds.height);
    stage.addChild(boundsShape);
    
    stage.update();
}

注意：两种方法得到的结果应该是一致的，第一种方法更简洁，推荐日常使用；第二种方法适合你需要自定义边界计算逻辑的场景。

内容的提问来源于stack exchange，提问作者spassvogel