草庐IT

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

codeneng 2023-03-28 原文

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");
    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;

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

黑色矩形区域之外的所有内容都不会触发 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

getObjectUnderPointjavascriptspanclasssectioncreatejscsseaseljs

有关关于 javascript:EaselJS getObjectUnderPoint 和缩放 CSS 问题的更多相关文章

  1. ruby - 在 64 位 Snow Leopard 上使用 rvm、postgres 9.0、ruby 1.9.2-p136 安装 pg gem 时出现问题 - 2

    我想为Heroku构建一个Rails3应用程序。他们使用Postgres作为他们的数据库，所以我通过MacPorts安装了postgres9.0。现在我需要一个postgresgem并且共识是出于性能原因你想要pggem。但是我对我得到的错误感到非常困惑当我尝试在rvm下通过geminstall安装pg时。我已经非常明确地指定了所有postgres目录的位置可以找到但仍然无法完成安装:$envARCHFLAGS='-archx86_64'geminstallpg--\--with-pg-config=/opt/local/var/db/postgresql90/defaultdb/po

  2. ruby - 通过 rvm 升级 ruby​​gems 的问题 - 2

    尝试通过RVM将RubyGems升级到版本1.8.10并出现此错误:$rvmrubygemslatestRemovingoldRubygemsfiles...Installingrubygems-1.8.10forruby-1.9.2-p180...ERROR:Errorrunning'GEM_PATH="/Users/foo/.rvm/gems/ruby-1.9.2-p180:/Users/foo/.rvm/gems/ruby-1.9.2-p180@global:/Users/foo/.rvm/gems/ruby-1.9.2-p180:/Users/foo/.rvm/gems/rub

  3. ruby - capybara field.has_css?匹配器 - 2

    我在MiniTest::Spec和Capybara中使用以下规范:find_field('Email').must_have_css('[autofocus]')检查名为“电子邮件”的字段是否具有autofocus属性。doc说如下:has_css?(path,options={})ChecksifagivenCSSselectorisonthepageorcurrentnode.据我了解，字段“Email”是一个节点，因此调用must_have_css绝对有效!我做错了什么？ 最佳答案 通过JonasNicklas得到了答案:No

  4. ruby - 通过 RVM (OSX Mountain Lion) 安装 Ruby 2.0.0-p247 时遇到问题 - 2

    我的最终目标是安装当前版本的RubyonRails。我在OSXMountainLion上运行。到目前为止，这是我的过程:已安装的RVM$\curl-Lhttps://get.rvm.io|bash-sstable检查已知(我假设已批准)安装$rvmlistknown我看到当前的稳定版本可用[ruby-]2.0.0[-p247]输入命令安装$rvminstall2.0.0-p247注意:我也试过这些安装命令$rvminstallruby-2.0.0-p247$rvminstallruby=2.0.0-p247我很快就无处可去了。结果:$rvminstall2.0.0-p247Search

  5. ruby - Fast-stemmer 安装问题 - 2

    由于fast-stemmer的问题，我很难安装我想要的任何ruby​​gem。我把我得到的错误放在下面。Buildingnativeextensions.Thiscouldtakeawhile...ERROR:Errorinstallingfast-stemmer:ERROR:Failedtobuildgemnativeextension./System/Library/Frameworks/Ruby.framework/Versions/2.0/usr/bin/rubyextconf.rbcreatingMakefilemake"DESTDIR="cleanmake"DESTDIR=

  6. ruby - 安装 Ruby 时遇到问题(无法下载资源 "readline--patch") - 2

    当我尝试安装Ruby时遇到此错误。我试过查看this和this但无济于事➜~brewinstallrubyWarning:YouareusingOSX10.12.Wedonotprovidesupportforthispre-releaseversion.Youmayencounterbuildfailuresorotherbreakages.Pleasecreatepull-requestsinsteadoffilingissues.==>Installingdependenciesforruby:readline,libyaml,makedepend==>Installingrub

  7. java - 从 JRuby 调用 Java 类的问题 - 2

    我正在尝试使用boilerpipe来自JRuby。我看过guide从JRuby调用Java，并成功地将它与另一个Java包一起使用，但无法弄清楚为什么同样的东西不能用于boilerpipe。我正在尝试基本上从JRuby中执行与此Java等效的操作:URLurl=newURL("http://www.example.com/some-location/index.html");Stringtext=ArticleExtractor.INSTANCE.getText(url);在JRuby中试过这个:require'java'url=java.net.URL.new("http://www

  8. ruby-on-rails - 简单的 Ruby on Rails 问题——如何将评论附加到用户和文章？ - 2

    我意识到这可能是一个非常基本的问题，但我现在已经花了几天时间回过头来解决这个问题，但出于某种原因，Google就是没有帮助我。(我认为部分问题在于我是一个初学者，我不知道该问什么......)我也看过O'Reilly的RubyCookbook和RailsAPI，但我仍然停留在这个问题上.我找到了一些关于多态关系的信息，但它似乎不是我需要的(尽管如果我错了请告诉我)。我正在尝试调整MichaelHartl'stutorial创建一个包含用户、文章和评论的博客应用程序(不使用脚手架)。我希望评论既属于用户又属于文章。我的主要问题是:我不知道如何将当前文章的ID放入评论Controller。

  9. css - 用 watir 检查标签类？ - 2

    我有一个div，它根据表单是否正确提交而改变。我想知道是否可以检查类的特定元素？开始元素看起来像这样。如果输入不正确，添加错误类。 最佳答案 试试这个:browser.div(:id=>"myerrortest").class_name更多信息:http://watir.github.com/watir-webdriver/doc/Watir/HTMLElement.html#class_name-instance_method另一种选择是只查看具有您期望的类的div是否存在browser.div((:id=>"myerrortes

  10. 【高数】用拉格朗日中值定理解决极限问题 - 2

    首先回顾一下拉格朗日定理的内容：函数f(x)是在闭区间[a,b]上连续、开区间(a,b)上可导的函数，那么至少存在一个，使得:通过这个表达式我们可以知道，f(x)是函数的主体，a和b可以看作是主体函数f(x)中所取的两个值。那么可以有，  也就意味着我们可以用来替换 这种替换可以用在求某些多项式差的极限中。方法： 外层函数f(x)是一致的，并且h(x)和g(x)是等价无穷小。此时，利用拉格朗日定理，将原式替换为 ，再进行求解，往往会省去复合函数求极限的很多麻烦。使用要注意：1.要先找到主体函数f(x)，即外层函数必须相同。2.f(x)找到后，复合部分是等价无穷小。3.要满足作差的形式。如果是加

随机推荐