个人中心
gpt4 book ai didi

javascript - EaselJS getObjectUnderPoint 和缩放 CSS 问题

转载 作者：太空宇宙 更新时间：2023-11-04 03:13:25 24 4
gpt4 key购买 nike

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

在舞台中，我添加了一个 Container，其中包含两个矩形。我将一个函数绑定(bind)到舞台的 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事件下的item的函数:

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

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

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

}

我read ，EaselJS 不适用于缩放的 Canvas 。所以我把这个:

container.scaleX = container.scaleY = 2;

部分有效，因为仍有部分区域不可点击:

enter image description here

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

我怎样才能使它工作？

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

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

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

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

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

最佳答案

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

关于javascript - EaselJS getObjectUnderPoint 和缩放 CSS 问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/29149759/

24 4 0
文章推荐： html - 当鼠标悬停到子菜单时，CSS 父菜单保持突出显示
文章推荐： python - 等价于多列的 Pandas 分解？
文章推荐： python - Docker容器A在作为另一个docker服务B运行的cassandra中执行查询(插入/更新)后死亡
文章推荐： python - 减少Python中矩阵元素的系数
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com