Question

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

以下是我的实时网络应用的链接： Get24

以下是Github项目的链接：CoryG89/Get24

我还开了一个Github issue about this。

然而，当我尝试在Windows 8上的Chrome中运行我的应用时，页面的布局都搞砸了。按钮未着色，鼠标悬停事件的目标区域不与按钮对齐。游戏不可用。控制台中没有错误。在Windows中使用Firefox可以获得与在Linux下运行的任何浏览器类似的结果，它运行良好。

任何人都可以告诉我为什么我的应用程序似乎是依赖于操作系统/浏览器。难道我做错了什么？有没有其他人有过KineticJS在不同浏览器和操作系统下不能正常工作的经验？

2013年3月6日更新

<小时/> 在进一步搞乱我的简单游戏之后，我注意到我的按钮上的mouseover和click事件仅适用于Chrome Windows 8中的填充。我创建了此simple jsFiddle在我的计算机上的Windows 8上的Chrome中，只渲染矩形对象的填充。底部矩形表示当使用draggable或click事件时，只有矩形的笔划会对鼠标做出反应。最后，我浏览了网页，在Windows 8的Chrome浏览器中查看此问题official tutorial the KineticJS Shape fill property时遇到了同样的问题.Firefox处理得很好。

有没有人有解决办法让填充属性在Chrome中运行？

Answer 1

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

Answer 2

同样，版本之间的语法也有一些变化。从女巫版本中没有真正意识到形状语法已更改但从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,

    });

KineticJS内部形状和/或填充不在Windows 8下的Chrome中呈现

2013年3月6日更新

2 个答案: