1

長い間潜伏していた後、これが私の最初の投稿です！私はRTFMingを行っており、この質問に対する答えをどこでも探していましたが、役に立ちませんでした. できる限り参考になるように努めますので、お役に立てれば幸いです。

このコードは私の個人的なウェブページ用です。HTML5 と jQuery を使用して、ある種の最新のクリック マップを実装しようとしています。ウェブサイトでは、メイン画像と、この絵が描かれた同じ座標に同じサイズの隠しキャンバスが表示されます。

メインの絵の上にマウスを乗せると、キャンバスに描かれた画像からマウスのピクセルデータ（r,g,b,alphaの配列）を読み込みます。ピクセルの色が黒であることがわかると (私の場合、黒のピクセルでは 0 になる RED 値のみをチェックします)、関連するボタンがアクティブになっていることを認識します。

（もともと、私はこの記事からアイデアを得ました）

この方法を選択した理由は、ページが応答性が高く、さまざまなモニターやモバイル デバイスに合わせて動的に変化するためです。これを実現するために、画面のサイズが変更されるたびに DrawCanvas 関数を呼び出して、新しいサイズでキャンバスを再描画します。

通常、これで問題なく動作します。問題は、Chrome と IE(9) で一貫性のない動作があるようです。ページを最初に開いたとき、ブラウザーのサイズを変更するまで、ピクセル データ (0,0,0,0) が表示されないことがあります。最初は、これを発生させている読み込みの問題があると考えたので、setTimeout でハックしようとしましたが、まだ機能しません。また、サイズ変更イベントをトリガーして、document.ready で drawCanvas 関数を呼び出そうとしましたが、まだ機能しませんでした。

私を悩ませているのは、矛盾です。うまくいくこともあれば、うまくいかないこともあります。一般に、IE(9) よりも chrome の方が安定しています。

非推奨のコードは次のとおりです。

<script type="text/javascript">

    $(document).ready(function(){setTimeout(function() {

        // Get main image object    
        var mapWrapper = document.getElementById('map_wrapper').getElementsByTagName('img').item(0);

        // Create a hidden canvas the same size as the main image and append it to main div
        var canvas = document.createElement('canvas');
        canvas.height = mapWrapper.clientHeight;
        canvas.width = mapWrapper.clientWidth;
        canvas.fillStyle = 'rgb(255,255,255)';
        canvas.style.display = 'none';
        canvas.id = 'hiddencvs';
        $('#map_wrapper').append(canvas);

        // Draw the buttons image into the canvas
        drawCanvas(null);

        $("#map_wrapper").mousemove(function(e){

            var canvas = document.getElementById('hiddencvs');
            var context = canvas.getContext('2d');

            var pos = findPos(this);
            var x = e.pageX - pos.x;
            var y = e.pageY - pos.y;

            // Get pixel information array (red, green, blue, alpha)
            var pixel = context.getImageData(x,y,1,1).data; 

            var red = pixel[0];
            var main_img = document.getElementById('map_wrapper').getElementsByTagName('img').item(0);

            if (red == 0)
            {
                ...
            }

            else {
                ...
            }   
        });     

    },3000);}); // End DOM Ready

    function drawCanvas(e)
    {
        // Get context of hidden convas and set size according to main image            
        var cvs = document.getElementById('hiddencvs');
        var ctx = cvs.getContext('2d');
        var mapWrapper = document.getElementById('map_wrapper').getElementsByTagName('img').item(0);
        cvs.width = mapWrapper.clientWidth;
        cvs.height = mapWrapper.clientHeight;


        // Create img element for buttons image
        var img = document.createElement("img");
        img.src = "img/main-page-buttons.png";

        // Draw buttons image inside hidden canvas, strech it to canvas size    
        ctx.drawImage(img, 0, 0,cvs.width,cvs.height);
    }

    $(window).resize(function(e){
            drawCanvas(e);  
        }
    );

    function findPos(obj)
    {
        ...
    }

</script>

助けていただければ幸いです！ありがとう！

ロン。

4

1 に答える 1

0

画像が読み込まれるのを待たないので、キャッシュに応じて、キャンバスに画像を描画するかどうかを指定できます。

これを行う必要があります：

$(function(){
    var img = document.createElement("img");
    img.onload = function() {
        var mapWrapper = document.getElementById('map_wrapper').getElementsByTagName('img').item(0);
        ...
        // your whole code here !
        ...
    }
    img.src = "img/main-page-buttons.png";
});
于 2013-07-30T06:49:33.373 に答える