2

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

该页面的 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 应用程序，并且日志中没有错误。任何帮助，将不胜感激。

4

0 回答 0