2

我创建了一个简单的多人数学游戏，它在客户端使用 KineticJS。我在 Linux 中开发它，一切似乎都运行良好，所有的编码都很顺利。前几天我注意到，当在 OS X 10.8 (Mountain Lion) 上运行它时，我的提交按钮和输入事件将不起作用。它在安装了 10.7 (Lion) 的 iMac 上运行。今天我将我的笔记本电脑启动到我不经常这样做的 Windows 8 并尝试运行我的应用程序。

这是我的实时网络应用程序的链接：Get24

这是 Github 项目的链接：CoryG89/Get24

我还为此打开了一个Github 问题。

但是，当我尝试在 Windows 8 上的 Chrome 中运行我的应用程序时，页面的布局一团糟。按钮没有着色，并且鼠标悬停事件的目标区域没有与按钮对齐。游戏无法使用。控制台中没有错误。在 Windows 中使用 Firefox 可以得到与在 Linux 下运行的任何浏览器相似的结果，它可以完美运行。

谁能告诉我为什么我的应用程序似乎如此依赖操作系统/浏览器。难道我做错了什么？有没有其他人有过 KineticJS 在不同浏览器和操作系统下工作不一样的经验？


2013 年 3 月 6 日更新

在进一步弄乱了我的简单游戏之后，我注意到按钮上的mouseover和click事件仅在 Chrome Windows 8 中起作用。我创建了这个简单的 jsFiddle，当在我的计算机上的 Windows 8 上的 Chrome 中查看时，只会呈现填充矩形对象。底部的矩形显示，当使用draggable或click事件时，只有矩形的笔划会对鼠标做出反应。最后，我浏览了网络，这个官方教程 KineticJS 形状填充属性在 Windows 8 上的 Chrome 中查看时也有同样的问题。Firefox 渲染它就好了。

有没有人有办法让填充属性在 Chrome 中工作？

4

2 回答 2

0

好的，所以我觉得很愚蠢，因为当我发布这个问题时，新版本的 KineticJS 已经发布了。他们没有在更改日志中列出正在修复的这个错误，但是，从 v4.3.1 更新到 v4.3.3 为我修复了这个问题。我的网络应用程序现在可以在 Chrome Win8 中正常运行。从官方 KineticJS 页面链接到的教程仍在运行旧版本，并且在 Chrome Win8 中填充已损坏。如果将来有人遇到此问题，只需确保您使用的是最新版本的 Kinetic。

于 2013-03-13T22:29:48.507 回答
0

版本之间的语法也有一些变化。从女巫版本中并没有真正意识到形状语法发生了变化，但是从 4.​​0.5 更新到 4.4.0 您需要进行以下更改才能使其工作

更新到 4.4.0 然后...

 var circle = new Kinetic.Shape({
  //4.0.5 returns context instead of canvas
      drawFunc: function(canvas) {
        /*set var context geting that from canvas, As i said the new drawFunc returns canvas instead of context*/
        var context = canvas.getContext();


        context.beginPath();
        context.moveTo(0, 0);
        context.arc(0, 0, (that.parameters.radius/2)-10, Math.PI*take_PI_from_o(angle.end.value), Math.PI*take_PI_from_o(angle.start.value), true);            
        context.closePath();

        //the following two commands are droped
        //this.fill(context); 
        //this.stroke(context);

        //and replaced with this one
        canvas.fillStroke(this);
      },
      fill: "#54CAFF",
      stroke: "#858585",
      strokeWidth: 4,
      rotationDeg:-90,
      x: angle.stage.getWidth() / 2,
      y: angle.stage.getHeight() / 2,

    });
于 2013-04-03T11:11:12.243 回答