13

私は easlejs + phonegap を使用して HTML5 ゲームに取り組んでおり、キャンバス上でクリック/タッチ/マウスダウンするたびに画面が点滅するという問題が発生しています。

以下は、問題をテストし、それが easlejs に関連しているかどうかを確認するために作成した非常に単純なコードです。コードからわかるように、easlejs とは関係なく、単なる html5/phonegap の問題です。

選択なしの CSS スタイルも試してみましたが、運が悪かったことがわかります。

キャンバス上でマウスを押し下げたときにオレンジ色の境界線を示すスクリーンショット (1 番目の画像) から放したとき (2 番目の画像)

<!doctype html>
<html>
<head>
    <title></title>
    <style type="text/css">
        #canvas
        {
            user-select: none;
            -webkit-user-select: none;
            -moz-user-select: none;
        }
    </style>
</head>
<body>
    <canvas  id="canvas" width="320" height="480"></canvas>
    <script type="text/javascript">
        var canvas = document.getElementById("canvas");

        canvas.addEventListener("mousedown", function(e)
        {
            var ctx = canvas.getContext("2d");
            var x = Math.random() * 320;
            var y = Math.random() * 480;
            var w = Math.random() * 100;
            var h = Math.random() * 100;

            ctx.fillStyle = "#FF0000";

            ctx.fillRect(x,y,w,h);
        }, false);
    </script>
</body>
</html>
4

2 に答える 2

18

編集: EaselJS には、タッチで選択範囲が表示されるというバグがまだ残っていることが判明しました。これを解決するために、この記事を読んだ後、CSS プロパティをキャンバスに追加しました: https://stackoverflow.com/a/7981302/66044

修正は次のとおりです。 -webkit-tap-highlight-color: transparent;

この記事の助けを借りてこれを解決することができました: IOS および Android でのドラッグ時のページ スクロールの防止

これが作業コードです。修正は、クリックを処理するための touchstart/end イベントの処理にあります。オレンジ色の選択段階を経験しなくなりました。

2.2 エミュレーターと私のデバイス (Cyanogenmod ICS を実行している Samsung Captivate) の両方でこれをテストしました。

<!doctype html>
<html>
<head>
    <title></title>
</head>
<body>
    <canvas  id="canvas" width="320" height="480"></canvas>
    <script type="text/javascript" src="cordova-1.7.0.js"></script>
    <script type="text/javascript">
        var canvas = document.getElementById("canvas");

        // FIX: Cancel touch end event and handle click via touchstart
        document.addEventListener("touchend", function(e) { e.preventDefault(); }, false);
        canvas.addEventListener("touchstart", function(e)
        {
            var ctx = canvas.getContext("2d");
            var x = Math.random() * 320;
            var y = Math.random() * 480;
            var w = Math.random() * 100;
            var h = Math.random() * 100;

            ctx.fillStyle = "#FF0000";

            ctx.fillRect(x,y,w,h);

            // FIX: Cancel the event
            e.preventDefault();
        }, false);
    </script>
</body>
</html>
于 2012-06-03T13:36:28.627 に答える
3

-webkit-tap-highlight-color: rgba(0,0,0,0); /* 透明なリンク選択を行い、最後の値の不透明度を 0 から 1.0 に調整します */

参照: https://github.com/phonegap/phonegap-start/blob/master/www/css/index.css

于 2013-02-09T01:52:33.220 に答える