0

试图解决我遇到的一个非常烦人的问题。我有一个允许用户绘制的 HTML5 画布，它加载在 iframe 中。当页面第一次加载时，它会检查我们是否在移动设备上，如果是，它会调整整个页面的大小，包括 iframe。然后我有一个每隔几秒运行一次的 setTimeout 来检查我的画布是否与它加载的框架的大小不同。如果不同，我更改画布大小然后重新初始化它（使用 Kineticjs 1.0，我知道有较新的版本，但我们还没有准备好升级）。

这适用于我们测试的大多数移动浏览器，但 Chrome（在 iOS 和 Android 上）不允许在页面首次纵向加载或方向更改后在画布上绘图。它只是滚动页面（标准触摸事件）并忽略我所有的 preventDefaults。方向改变后，我什至无法让它在 touchstart 上发出警报。

有没有人遇到过这个？我认为这要么是画布本身正在发生变化，要么是一旦在 Kinetic 中创建了新阶段（画布），所有已定义的侦听器都会被忽略。

更新：

这是我正在处理的一些代码：

// 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 像素宽 x 210 高，但我可以在 Chrome 移动设备上绘制它。似乎一旦画布被拉伸，我就不能再画了。甚至没有更大笔画的更大画布，什么也没有发生，也没有触发触摸启动。

4

0 回答 0