我需要帮助修复KineticJS的这个错误 - 缩小浏览器缩放的问题

时间:2014-03-12 20:56:11

标签: javascript html5 canvas html5-canvas kineticjs

好吧,我在这里有一个模拟:

http://www.cs.uml.edu/~jperreau/EQL/galton/

实际上并不是模拟的最新版本。最新版本可在以下网址找到:

http://github.com/Pkthunder/EQL

总之。错误...当浏览器缩放到100%或更高时,错误不会显示,并且此模拟看起来像这样(注意我关闭了残余线以简化图像):

i.imgur.com/xkRccSN.png

现在,当缩小超过100%时出现错误,看起来像这样(请注意浏览器上的缩放率为50%):

i.imgur.com/uJizmbP.png

最后,矩形块的大小显示模拟没有" ghost"随着变焦的增加,球会减少。例如,下面是75%的缩放。你可以看到" good"的矩形模拟大于50%缩放时的模拟:

i.imgur.com/MKWs9db.png

可能有助于调试的最后一些评论: - 如果浏览器以100%或更高的缩放率开始,然后在没有页面重新加载的情况下缩小到小于100%的值,则不会出现错误 - 我怀疑它与图层画布的实例化有关 - 如果我将页面上画布对象的高度和宽度属性设置为canvas元素的高度和宽度:

& ltcanvas width =" 613"高度=" 311" style =" padding:0px;保证金:0px;边框:0px;背景颜色:透明;位置:绝对;顶部:0px;左:0px;宽度:1226px;身高:622px;背景位置:初始初始; background-repeat:初始初始化;"& gt

即。将样式的高度和宽度设置为元素的高度和宽度,画布缩小为" good"的确切大小。模拟补丁

- 回答我收到的一些跟进问题: 答:您使用的浏览器是什么?它会在每个浏览器中发生吗? 在MacOS和Windows平台上的以下浏览器中都出现了此错误:FireFox,Chrome,Safari,IE(不确定是什么版本)。所有浏览器都升级到最新版本

B中。为什么你关心项目的Windows缩放? 这个模拟正在亚特兰大的一个会议上展示,在数学世界的许多重要人物面前,希望他们中的一个将资助在数学博物馆创建一个展览。这段代码模拟了未来展览的模型,即可编程的Galton Board。"无论如何,我们(研究小组)想要确保这个错误不会出现在演示当天,这是一种安心。因为上台并意识到投影屏幕以我们需要缩小以便运行模拟和BOOM的方式扭曲尺寸会很糟糕。错误。

谢谢大家!这种模拟需要在一周内完成,因此非常感谢任何即时答案!

1 个答案:

答案 0 :(得分:0)

我明白了。这是Kineticjs的一个已知问题。 https://github.com/ericdrowell/KineticJS/issues/753详细解释了这个问题,但是如果在创建阶段或图层对象之前将Kinetic.pixelRatio = 1;放在代码中,则应该解决问题