EaselJS getObjectUnderPoint 和缩放 CSS 问题答案

【问题标题】：EaselJS getObjectUnderPoint and zoom CSS issueEaselJS getObjectUnderPoint 和缩放 CSS 问题
【发布时间】：2015-05-22 20:56:19
【问题描述】：

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

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

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

返回stagemousedown事件下项的函数：

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

在我通过zoom function 将zoom: 2 CSS 放入正文之前，这很顺利。一旦我点击矩形的边缘，我就没有得到对象。

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

}

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

container.scaleX = container.scaleY = 2;

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

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

我怎样才能做到这一点？

注意：我需要使用stage.on 方法而不是container.addEventListener

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

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

所以，我缩放身体，一切都像这样缩放：

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

【问题讨论】：

标签： javascript css easeljs createjs

【解决方案1】：

在您的小提琴中，您不会在更改容器的 scaleX 和 scaleY 后更新舞台，因此永远不会用新的比例重绘画布。但是，您仍在更改 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();
}

【讨论】：

【解决方案2】：

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

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

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

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

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

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

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

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

编辑：更新了答案，因为我发现没有必要手动移动身体，但你可以用“变换原点”来做到这一点：

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

更新jsfiddle

【讨论】：