关于 javascript:EaselJS getObjectUnderPoint 和缩放 CSS 问题


EaselJS getObjectUnderPoint and zoom CSS issue

我在一个 Canvas 上有一个舞台和一个容器。

在舞台内，我添加了一个 Container，其中包含两个矩形形状。我将一个函数绑定到舞台的 stagemousedown 事件，该事件通过 getObjectUnderPoint 函数返回事件发生的坐标下的形状。

HTML:

1
2
3
4
5
<body onloadx="init();">
   <canvas id="canvas" width="300" height="200">
   </canvas>
   <button onclick="zoom()">zoom it</button>
</body>

初始化舞台、容器和两个矩形的函数：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
function init() {

    stage = new createjs.Stage("canvas");
    container = new createjs.Container();
    var rect1 = new createjs.Shape();
    rect1.graphics.beginFill("#ff0000").drawRect(10, 10, 100, 100);
    container.addChild(rect1);
    var rect2 = new createjs.Shape();
    rect2.graphics.beginFill("#00ff00").drawRect(120, 10, 100, 100);
    container.addChild(rect2);
    stage.on('stagemousedown', onClick);
    stage.addChild( container );    
    stage.update();
}

返回stagemousedown事件下项的函数：

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

这很顺利，直到我通过 zoom function 将 zoom: 2 CSS 放到 body 中。一旦我点击矩形的边缘，我就没有得到对象。

1
2
3
4
5
function zoom(){
    document.body.style.zoom = 2;
    container.scaleX = container.scaleY = 2;

}

我读到，EaselJS 不适用于缩放的画布。所以我把这个：

1
container.scaleX = container.scaleY = 2;

部分有效，因为仍有部分区域不可点击：

enter

1
2
3
4
5
function zoom(){
    //document.body.style.zoom = 2;
    container.scaleX = container.scaleY = 2;
    stage.update();
}

这就是我实际问题的解决方案(编辑后的问题)。 EaslJS 不考虑 zoom CSS 并且坐标是全局创建的，因为缩放正在平移 div。

所以我切换到 transform: scale(2); 并使用：

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

为了固定缩放对象的位置。

我之前没有想到它的原因是因为我尝试过，但是我遇到了这个问题：应用 transform: scale(2) 后某些项目消失了。

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

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

http://jsfiddle.net/vqq8dxw7/6/

编辑：更新了答案，因为我发现没有必要手动移动身体，但您可以使用"转换原点"：

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

更新了 jsfiddle