Javascript EaselJS getobjectundpoint和zoom CSS问题

我在一张画布上有一个舞台和一个容器

在stage I内部添加一个包含两个矩形的

容器。我将一个函数绑定到stage的
stagemousedown
事件，该事件通过
getobjectundpoint
函数返回事件发生的坐标下的形状

HTML:

返回
stagemousedown
事件下的项的函数：

function onClick(e) {
    alert(stage.getObjectUnderPoint(e.stageX, e.stageY));
}

在我通过
缩放功能
将
缩放：2
CSS放置到body之前，此操作一直运行平稳。一旦我点击矩形的边缘，我就不会得到对象

function zoom(){
    document.body.style.zoom = 2;
    container.scaleX = container.scaleY = 2;

}

我，那个画架不适合缩放画布。所以我说：

container.scaleX = container.scaleY = 2;

部分有效，因为部分区域仍然无法单击：


黑色矩形区域之外的所有内容都不会触发
stagemousedown
事件

我怎样才能做到这一点

注意：我需要使用该方法，而不是


编辑：谢谢，但是缩放是我需要的，因为整个过程的目的是为了响应目的而缩放整个应用程序（而不是缩放每个html元素）

所以，我缩放身体，所有东西都像这样缩放：

在您的小提琴中，更改容器的scaleX和scaleY后，您不会更新舞台，因此画布永远不会使用新比例重新绘制。但是，您仍在更改css缩放。您只需更改容器的比例并更新阶段



函数缩放（）{
//document.body.style.zoom=2；
container.scaleX=container.scaleY=2；
stage.update（）；
}
这就是我实际问题的解决方案（编辑后的问题）。EASLJS不考虑<代码>变焦CSS <代码>，并且创建坐标，因为变焦正在翻译div。< /p>
所以我切换到
transform:scale（2）并使用：

body.style.top = -body.getBoundingClientRect().top + "px";
body.style.left = -body.getBoundingClientRect().left + "px";

以固定缩放对象的位置

我以前没有想到它的原因是因为我尝试过它，但我遇到了这样的问题：在应用
transform:scale（2）
后，一些项目消失了

然后，我用stackoverflow问题中建议的解决方法解决了后者，即：

 translate3d(0px, 0px, 0px);


编辑：更新了答案，因为我发现不需要手动移动主体，但您可以使用“变换原点”来执行此操作：

更新

body.style.top = -body.getBoundingClientRect().top + "px";
body.style.left = -body.getBoundingClientRect().left + "px";

 translate3d(0px, 0px, 0px);

document.body.style.transformOrigin = "top left";