关于 javascript:EaselJS getObjectUnderPoint 和缩放 CSS 问题
EaselJS getObjectUnderPoint and zoom CSS issue
我在一个 Canvas 上有一个舞台和一个容器。
在舞台内，我添加了一个
HTML:
<body onloadx="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(); } |
返回
function onClick(e) { alert(stage.getObjectUnderPoint(e.stageX, e.stageY)); } |
这很顺利，直到我通过
function zoom(){ document.body.style.zoom = 2; container.scaleX = container.scaleY = 2; } |
我读到，EaselJS 不适用于缩放的画布。所以我把这个：
container.scaleX = container.scaleY = 2;
|
部分有效，因为仍有部分区域不可点击：
黑色矩形区域之外的所有内容都不会触发
我怎样才能做到这一点？
注意：我需要使用 stage.on 方法而不是 container.addEventListener
http://jsfiddle.net/vqq8dxw7/1/
编辑：谢谢，但是缩放是我需要的，因为整个事情的目的是为了响应目的而缩放整个应用程序(不缩放每个 html 元素)。
所以，我缩放身体，一切都像这样缩放：
http://jsfiddle.net/vqq8dxw7/5/
在您的小提琴中，您不会在更改容器的 scaleX 和 scaleY 后更新舞台，因此永远不会用新的比例重绘画布。但是，您仍在更改 css 缩放。您只需要更改容器的规模并更新舞台。
我已经更新了你的小提琴以达到预期的效果。
function zoom(){ //document.body.style.zoom = 2; container.scaleX = container.scaleY = 2; stage.update(); } |
这就是我实际问题的解决方案(编辑后的问题)。 EaslJS 不考虑
所以我切换到
body.style.top = -body.getBoundingClientRect().top +"px"; body.style.left = -body.getBoundingClientRect().left +"px"; |
为了固定缩放对象的位置。
我之前没有想到它的原因是因为我尝试过，但是我遇到了这个问题：应用
然后我用链接的stackoverflow问题中建议的解决方法解决了后者，即：
translate3d(0px, 0px, 0px);
|
http://jsfiddle.net/vqq8dxw7/6/
编辑：更新了答案，因为我发现没有必要手动移动身体，但您可以使用"转换原点"：
document.body.style.transformOrigin ="top left";
|
更新了 jsfiddle