在选项卡之间移动时防止 jQuery mobile 重新初始化页面

Question

在我的移动网站中，我有几个页面，底部有一个标签导航栏，让用户可以在它们之间导航。在其中一个页面上，我有一个用户可以在上面绘制的画布。问题是，每次我移动到一个页面然后回到画布页面时，我都会看到旧绘图一秒钟，然后它就被清除了。

我认为这是因为我每次进入页面都会重新初始化，那么如何防止呢？

我已经尝试缓存页面，但似乎没有帮助...还有其他想法吗？

Answer 1

您应该清除 jQuery mobile pagebeforeshow 上的画布。

用户导航到的第一个页面将始终保留在 DOM 中，因此如果该页面包含画布并且用户转到另一个页面并返回，您将必须手动重置画布元素。

这个问题展示了如何重置画布 - how to clear canvas for redraw。

所以你的代码应该是这样的：

$(document).on("pagebeforeshow", "div.id_or_class_of_page(s)_with_canvas", function () {
    ctx = _your_canvavs_element;

    ctx.save();
    // Use the identity matrix while clearing the canvas
    ctx.setTransform(1, 0, 0, 1, 0, 0);
    ctx.clearRect(0, 0, canvas.width, canvas.height);

    // Restore the transform
    ctx.restore();
});

不确定画布代码。