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

EaselJS getObjectUnderPoint and zoom CSS issue

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

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

HTML:

1
2
3
4
5

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

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

原创文章，作者：ItWorker，如若转载，请注明出处：https://blog.ytso.com/tech/269252.html

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

EaselJS getObjectUnderPoint and zoom CSS issue

相关推荐

发表回复