0

私が抱えている本当に厄介な問題を解決しようとしています。ユーザーが描画できるHTML5キャンバスがあり、iframeにロードされています。ページが最初に読み込まれると、モバイル デバイスを使用しているかどうかがチェックされ、モバイル デバイスが使用されている場合は、iframe を含むページ全体のサイズが変更されます。次に、数秒ごとに実行される setTimeout を使用して、キャンバスが読み込まれたフレームと異なるサイズであるかどうかを確認します。異なる場合は、キャンバスのサイズを変更してから再初期化します (Kineticjs 1.0 を使用して、新しいバージョンですが、アップグレードする準備ができていません)。

これは、テストしたほとんどのモバイル ブラウザーで機能しますが、Chrome (iOS および Android) では、ページが最初に縦向きで読み込まれたとき、または向きが変更された後に、キャンバスに描画できません。ページをスクロールするだけで (標準のタッチ イベント)、すべての preventDefaults を無視します。向きが変わった後、タッチスタートでアラートを出すことさえできません。

誰もこれに遭遇したことがありますか？キャンバス自体が変化しているという事実、または新しいステージ(キャンバス)がキネティックで作成されると、定義されたすべてのリスナーが無視されるようになると考えています。

更新：

これが私が扱っているコードの一部です：

// This page is loaded in a frame, so we check to see when the parent is loaded
parent.$(document).ready(function()
{
    $(document).ready(function() 
    {
        ut();
        setTimeout('start_orientation_detect_timer()','2000');
    });
});

function start_orientation_detect_timer()
{
    if(document.getElementById("data").value.length == 0 && Math.floor(canvas.width) != Math.floor(parent.$(parent.top_origin.frame_array['sig_block_frame']).width()) || Math.floor(canvas.height) != Math.floor(parent.$(parent.top_origin.frame_array['sig_block_frame']).height()))
    {
        if(top_origin.misc_variables.mobile_device !== false && top.window.orientation == 0)
        {
            parent.$('#flip_to_landscape_msg').show();
            parent.$('#flip_to_landscape_msg').effect("pulsate", { times:200 }, 2000);
        }
        else
        {
            parent.$('#flip_to_landscape_msg').stop(true, true);
            parent.$('#flip_to_landscape_msg').hide();
        }
        ut();
    }
    else
    {
        // so from this frame several deep, we need to know the orientation, which will only be in the top of the DOM
        if(document.getElementById("data").value.length == 0 && top_origin.misc_variables.mobile_device !== false && top.window.orientation == 0)
        {
            parent.$('#flip_to_landscape_msg').show();
            parent.$('#flip_to_landscape_msg').effect("pulsate", { times:200 }, 2000);
        }
        else
        {
            parent.$('#flip_to_landscape_msg').stop(true, true);
            parent.$('#flip_to_landscape_msg').hide();
        }
    }
    setTimeout('start_orientation_detect_timer()','2000');
}

function ut()
{
    canvas=document.getElementById("drawing_canvas");
    context = canvas.getContext("2d");
    //console.log(Math.floor(parent.$(parent.top_origin.frame_array['sig_block_frame']).width())+' '+Math.floor(canvas.width)+' '+Math.floor(parent.$(parent.top_origin.frame_array['sig_block_frame']).height())+' '+Math.floor(canvas.height));
    canvas.width = parent.$(parent.top_origin.frame_array['sig_block_frame']).width();
    document.getElementById('saved_layer').style.width = canvas.width;
    canvas.height = parent.$(parent.top_origin.frame_array['sig_block_frame']).height();
    document.getElementById('saved_layer').style.height = canvas.height;
    myStage = new Kinetic.Stage(canvas);

    canvas.onmousemove = function()
    {
        var mousePos = myStage.getMousePos();
        var mouseDown = myStage.getMouseDown();
        if (mousePos!=null && mouseDown)
        {
            draw_b(mousePos.x, mousePos.y);
        }
        else
        {
            new_segment = true;
        }
    };

    canvas.ontouchstart = function()
    {
        BlockMove(event);
    }

    canvas.ontouchmove = function()
    {
        var mousePos = myStage.getMousePos();
        console.log(mousePos);
        if (mousePos!=null)
        {
            draw_b(mousePos.x, mousePos.y);
        }
    };

    canvas.ontouchend = function()
    {
        new_segment = true;
    };

    myStage.listen();
}

function BlockMove(event)
{
    // Tell Safari not to move the window.
    event.preventDefault() ;
}

これの一部が最新のコードではないことはわかっていますが、Chrome モバイル以外では機能します。start_orientation_detect_timer を呼び出さない場合、キャンバスは幅 100 ピクセル、高さ 210 ピクセルしかありませんが、Chrome モバイルで描画できます。キャンバスを伸ばしたらもう描けないらしい。より大きなストロークを持つより大きなキャンバスでさえ、何も起こらず、タッチスタートはトリガーされません。

4

0 に答える 0