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”); |
返回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;
|
部分有效，因为仍有部分区域不可点击：
黑色矩形区域之外的所有内容都不会触发 stagemousedown 事件。
我怎样才能做到这一点？
注意：我需要使用 stage.on 方法而不是 container.addEventListener
http://jsfiddle.net/vqq8dxw7/1/
编辑：谢谢，但是缩放是我需要的，因为整个事情的目的是为了响应目的而缩放整个应用程序(不缩放每个 html 元素)。
所以，我缩放身体，一切都像这样缩放：
http://jsfiddle.net/vqq8dxw7/5/
在您的小提琴中，您不会在更改容器的 scaleX 和 scaleY 后更新舞台，因此永远不会用新的比例重绘画布。但是，您仍在更改 css 缩放。您只需要更改容器的规模并更新舞台。
我已经更新了你的小提琴以达到预期的效果。
|
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
来源：https://www.codenong.com/29149759/
