2

クライアント側で KineticJS を使用する単純なマルチプレイヤー数学ゲームを作成しました。私はそれを Linux で開発しましたが、すべてが正常に動作しているように見え、すべてのコーディングがスムーズに進みました。先日、職場で OS X 10.8 (Mountain Lion) で実行すると、入力の送信ボタンと入力イベントが機能しないことに気付きました。10.7 (Lion) がインストールされた、私がテストした iMac でも動作しました。今日、ラップトップを Windows 8 で起動しましたが、これは頻繁には実行せず、アプリを実行しようとしました。

これが私のライブ Web アプリへのリンクです: Get24

Github プロジェクトへのリンクは次のとおりです: CoryG89/Get24

これに関するGithubの問題も開いています。

しかし、Windows 8 の Chrome でアプリを実行しようとすると、ページのレイアウトがめちゃくちゃになってしまいます。ボタンは色付けされておらず、マウスオーバー イベントのターゲット領域はボタンと並んでいません。ゲームは使用できません。コンソールにエラーはありません。Windows で Firefox を使用すると、Linux で実行されているブラウザーと同様の結果が得られ、完全に機能します。

私のアプリがオペレーティング システムやブラウザに依存しているように見える理由を教えてください。私は何か間違ったことをしていますか？KineticJS が異なるブラウザやオペレーティング システムで同じように動作しないという経験をした人はいますか?


2013 年 3 月 6 日更新

単純 なゲームをさらにいじった後、ボタンのmouseoverおよびclickイベントが Chrome Windows 8 の塗りつぶしでのみ機能していることに気付きました。長方形のオブジェクト。下部の長方形は、またはイベントを使用すると、長方形のストロークのみがマウスに反応することを示しています。最後に、私は Web を調べてみました。この公式チュートリアルでは、KineticJS Shape 塗りつぶしプロパティを Windows 8 の Chrome で表示すると同じ問題が発生します。Firefox では問題なくレンダリングされます。draggableclick

fill プロパティを Chrome で動作させるための回避策はありますか?

4

2 に答える 2

0

この質問を投稿したとき、KineticJS の新しいバージョンはすでに出ていたので、私はかなりばかげているように感じます。このバグが修正されたことは変更ログに記載されていませんが、v4.3.1 から v4.3.3 に更新すると、これが修正されました。私のWebアプリは、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 に答える