Question

我正在使用Phonegap和jQuery mobile开发iPad应用程序。所需的功能之一是允许应用程序的用户在2个框中签名（他们的签名）。我正在使用easel.js来处理canvas元素上的“绘图”。

此页面的HTML结构类似于：

<div class="signature-wrapper sw1">
    <canvas class="flexBox" id="myCanvas" width="240" height="240"></canvas>
</div>

<div class="signature-wrapper sw2">
    <canvas class="flexBox" id="myCanvas2" width="240" height="240"></canvas>
</div>

2个画布元素是绘制签名的位置。每个元素下面都是用于清除和保存每个元素的按钮。单击时，它们会触发功能以清除画布，或将画布保存到图像（然后将图像放在画布上，并在清除时删除）

保存功能类似于：

function saveStage1(){
    var canvas  = document.getElementById("myCanvas"); 
    var imageData = canvas.toDataURL("image/png");
    $('.sw1').append("<img src='" + imageData +"' style='position: absolute; left: 0px; top: 0px;' />");   
}

基本上，它只是获取画布的内容并将其保存为PNG图像，然后将其附加到画布元素的包装器中。为清晰起见，我在代码中遗漏了其他代码，处理localStorage和db.transactions。

此功能按预期工作。

下一个功能是清除画布：

function clearStage1(){
    oldMidX, oldMidY, oldX, oldY = null;
    delete window.currentShape;
    stage.clear();
    stage.removeAllChildren();
    stage.update();

    var canvas  = document.getElementById("myCanvas"); 
    var context = canvas.getContext("2d");

    var imageObj = new Image();
    imageObj.onload = function() {
        context.drawImage(imageObj, 0, 0);
    };
    imageObj.src = 'images/signature-client.png';
    $('.sw1 img').remove();
}

这会清除画布，使某些变量为空，并重新创建画布。

这在Chrome和Safari中100％有效，但在iPad上无法作为Phonegap应用程序正常工作。 在iPad上，您可以绘制，但是一旦您点击了保存或清除，您就无法在不导航并返回屏幕的情况下进行绘制。似乎页面上的save和clear函数都存在JavaScript错误，这会阻止任何进一步的JavaScript执行而不“重新加载”页面。

我已经在Mac上的Safari中设置我的控制台来查看xcode应用程序，并且日志中没有错误。任何帮助将不胜感激。

iPad上的HTML5画布（带有Phonegap）无法正常工作

0 个答案: