EaselJS getObjectUnderPoint 和缩放 CSS 问题

Question

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

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

HTML:

<body onload="init();">
   <canvas id="canvas" width="300" height="200">
   </canvas>
   <button onclick="zoom()">zoom it</button>
</body>

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

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();
}

returns stagemousedown 事件下的项目的功能：

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

在我通过 zoom function 将 zoom: 2 CSS 放入 body 之前，这一切都很顺利。单击矩形的边缘后，我没有得到 object。

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

}

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

container.scaleX = container.scaleY = 2;

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

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

我怎样才能完成这项工作？

注意：我需要使用 stage.on method and not container.addEventListener

http://jsfiddle.net/vqq8dxw7/1/

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

所以，我缩放了 body，一切都像这样缩放：

http://jsfiddle.net/vqq8dxw7/5/

Answer 1

在您的 fiddle 中，您在更改容器的 scaleX 和 scaleY 后不会更新舞台，因此 canvas 永远不会使用新的比例重新绘制。但是，您仍在更改 css 缩放。您只需要更改容器的比例并更新舞台。

I've updated your fiddle to achieve the desired result.

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

Answer 2

那是我实际问题的解决方案（编辑后的那个）。 EaslJS 不考虑 zoom CSS 并且创建坐标 globally 并且因为缩放正在平移 div。

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

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

为了固定缩放后的位置object.

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

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

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

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

编辑：更新了答案，因为我发现没有必要手动移动 body，但您可以使用 "transform origin" 来完成：

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

已更新jsfiddle

EaselJS getObjectUnderPoint 和缩放 CSS 问题

EaselJS getObjectUnderPoint and zoom CSS issue

javascript

css

easeljs

createjs