如何获取CreateJS Shape鼠标悬停时的自身X/Y坐标？

核心问题在于你误用了鼠标的stageX/Y重绘图形，这必然导致图形跳转到鼠标位置。另外Shape默认getBounds()返回null，是因为它没有自动计算边界的机制——要么手动缓存图形，要么直接用你设置的x/y属性（这就是图形的左上角坐标）。

正确思路 #

• 放弃鼠标坐标重绘，直接修改Shape的填充色，或基于Shape自身的x/y重新绘制路径
• 若需获取边界，先调用shape.cache()，之后getBounds()就能返回正确的边界对象
• 最简方案：如果你是手动设置的Shape位置，shape.x和shape.y就是图形的左上角坐标，直接使用即可

完整代码示例 #

<!DOCTYPE html>
<html>
<head>
    <title>CreateJS Shape Hover Color Change</title>
    <script src="https://code.createjs.com/1.0.0/createjs.min.js"></script>
</head>
<body>
    <canvas id="myCanvas" width="400" height="300"></canvas>

    <script>
        // 初始化舞台
        const stage = new createjs.Stage("myCanvas");
        createjs.Ticker.framerate = 60;
        createjs.Ticker.on("tick", () => stage.update());

        // 创建Shape并设置初始样式与位置
        const box = new createjs.Shape();
        // 这里的x/y就是图形在舞台上的左上角坐标
        box.x = 100;
        box.y = 100;
        // 基于Shape自身局部坐标绘制矩形（0,0对应舞台的100,100）
        box.graphics.beginFill("#ff0000").drawRect(0, 0, 100, 80);
        
        // 可选：缓存Shape以获取边界信息（如果需要的话）
        box.cache(0, 0, 100, 80);
        // 现在可正常调用getBounds()
        const bounds = box.getBounds();
        console.log("Shape局部边界：", bounds.x, bounds.y, bounds.width, bounds.height);

        // 鼠标悬停事件：修改填充色，不移动图形
        box.on("mouseover", () => {
            // 清除原有图形，重新绘制带新填充色的矩形，用局部坐标
            box.graphics.clear()
                .beginFill("#00ff00")
                .drawRect(0, 0, 100, 80);
            // 缓存过的话需要更新缓存
            box.updateCache();
        });

        // 鼠标移出事件：恢复原填充色
        box.on("mouseout", () => {
            box.graphics.clear()
                .beginFill("#ff0000")
                .drawRect(0, 0, 100, 80);
            box.updateCache();
        });

        // 开启鼠标交互提示
        box.cursor = "pointer";
        stage.addChild(box);
        stage.update();
    </script>
</body>
</html>

关键细节说明 #

• 绘制Shape时用局部坐标（drawRect(0,0,...)），舞台位置完全由box.x/box.y控制，重绘时复用局部坐标就不会让图形移位
• 若需获取图形在舞台上的绝对边界，可调用box.getTransformedBounds()（需先缓存），返回的对象包含舞台坐标下的x/y/width/height
• 不推荐直接修改shape.graphics._fill.style这类内部属性，重绘图形的方式更稳定且符合CreateJS的设计规范

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