手机 Android HTML5 硬件加速 - 画布答案

【问题标题】：Phone Android HTML5 Hardware Acceleration - Canvas手机 Android HTML5 硬件加速 - 画布
【发布时间】：2012-10-28 03:03:22
【问题描述】：

我遇到了一个奇怪的问题。当我启用硬件加速时，如果我正在绘制到画布元素，则在画布上绘制的任何内容都将重新绘制到页面顶部。

如果我关闭硬件加速，则不会出现此问题。

我只在 Android 4.1.1 上亲自测试过，但不久前我曾在我们的一位用户身上注意到这个问题，我无法复制（他们至少在 Android 3+ 上）

我无法准确截取屏幕截图（不太清楚如何在 Android 上截取），但我会尝试分解该过程。

启用硬件加速

用户填写常规详细信息。
用户滚动到页面底部，在画布元素上绘制一个签名。
如果用户忘记了页面顶部的内容并滚动到页面顶部
出现视觉错误，他们绘制的签名出现在页面顶部

但是没有硬件加速，步骤 4 不会发生。我应该对 HTML5 Canvas 做些什么吗？

我不确定我需要在这里传递什么信息 - 它似乎发生在三星、HTC 和 Google Nexus 手机/平板电脑上，因此它是一个一致的错误。

我尝试四处搜索，但最后总是得到游戏开发线程或类似的东西。

我真的很想启用 Hardware Accel，这是唯一的问题 - 性能提升太不可思议了

【问题讨论】：

可能无济于事，但在硬件加速的情况下，表单输入有时也会表现不稳定 = 输入的文本出现在屏幕顶部，输入框也滚动出视图。仅当页面大于屏幕时才会出现此问题。我的想法是在开始绘制他的签名时将页面高度固定为屏幕高度。也许这会有所帮助。
不幸的是，作为服务的一部分，这些页面非常动态（并且存在于 phonegap 空间中）
还要提一下，我设计了一个在不可滚动页面上使用画布的部分（仅适用于平板电脑）。出现同样的问题（该页面上的画布距离页面顶部大约 40px，它将在同一位置重绘）
我至少有一个潜在客户 - Hardware Accel。将画布更改为“表面视图”。我可以让它以任何方式重绘吗？
我可以确认，我的 Galaxy Nexus 上仍然存在这个错误，（现在）Android 4.3。它（自然）也存在于这款手机之前的 Android 4.2.2 中。

标签： android cordova canvas

【解决方案1】：

对于任何感兴趣的人来说，Android 5 的运行都非常棒，canvas 的运行速度要快得多。

【讨论】：

【解决方案2】：

我在创建视图时解决了这个问题：

if (Build.VERSION.SDK_INT >= 16) {
  try {
    Method method = root.getClass().getMethod("setLayerType", int.class, Paint.class);
    method.invoke(root, 0x01/* View.LAYER_TYPE_SOFTWARE */, null);
    Log.d(TAG, "hardware accelaration disabled");
  } catch ...
}

【讨论】：

但这消除了我不希望发生的硬件加速

【解决方案3】：

我正在使用Segment Display 库，它也受此问题的影响。在与 lib 的作者长时间讨论后，他提出了一个快速的解决方法。他让我添加这两行：

context.fillStyle = '#fff';
context.fillRect(0, 0, display.width, display.height);

就在这一行之后：

// clear canvas
context.clearRect(0, 0, display.width, display.height);

解决方案已经过测试，效果很好。

通过对给定代码的快速分析，我假设透明 (clearRect) 画布导致了这些问题，并将其更改为非透明画布 (fillRect) 修复了该错误。

【讨论】：

【解决方案4】：

我遇到了同样的问题。就我而言，似乎是由 jquery mobile css 引起的。

更详细地了解 guya 添加的内容，转到 jquery.mobile.structure.css 文件并更改此行：

.ui-content { 边框宽度：0;溢出：可见；溢出-x：隐藏；填充：15px； }

到

.ui-content { 边框宽度：0;溢出：可见；填充：15px； }

移除overflow-x:hidden属性修复了问题。

Source: Github / thomasjbradley / signature-pad / Issues

编辑：奇怪的是，当画布宽度为 256px 或更少时，我注意到问题没有发生。

【讨论】：

不，同样的问题存在，当您不使用 jQuery Mobile 时。在我的 PhoneGap 应用程序（使用“普通”jQuery）和一个简单的基于 HTML 的应用程序中使用 Twitter Bootstrap 时，我遇到了这个问题，它不使用任何框架。
“奇怪的是，当画布宽度小于等于 256px 时，我发现问题并没有出现。” -- 因为在 256px 下，Chrome 不会启动硬件加速为画布。这进一步证实了这是一个硬件加速问题。

【解决方案5】：

Android 中的重复 HTML5 画布问题已在 4.1.1 版本中出现，并且尚未在最新的 4.2 中修复。

解决方案是 none 的父 HTML 元素到画布将有 overflow:hidden 或 overflow:scroll

【讨论】：

我可以确认，我的 Galaxy Nexus 上仍然存在这个错误，（现在）Android 4.3。它（自然）也存在于这款手机之前的 Android 4.2.2 中。有点奇怪，这么多安卓版本都没有修复这个错误。我们能否确认它实际上已报告给 Android 的开发团队？
谢谢 - 这为我解决了这个问题，我使用此代码实现了快速修复：$(".canvasElement").parents("*").css("overflow", "visible");
如果您在 Jquery mobile 上使用修复 $(".canvasElement").parents("*").css("overflow", "visible");，请不要忘记在 pageshow 事件中调用它，否则它将不起作用。例如$('[data-role="page"]').bind('pageshow', function() { $(".canvasElement").parents("*").css("overflow", "visible"); });
@SammyBlackBaron 这些 cmets 似乎是唯一正确的解决方法（除了完全禁用硬件加速）。如果画布的任何父级隐藏了溢出，GPU 将把画布的一部分粘贴到错误的位置。不幸的是，jQuery Mobile 有一个讨厌的习惯，即在页面元素的右侧添加额外的 20 像素左右，即使页面上没有任何内容溢出。使用 JQM 页面使 overflow-x 可见允许在页面右侧过度滚动，从而在侧面露出空白条。所以几乎任何 GPU+Canvas+JQM 的组合都被破坏了。
有谁知道这会影响哪些版本？它在 4.4 中修复了吗？我似乎找不到官方的错误？

【解决方案6】：

好的，所以我想出了有史以来最骇人听闻的解决方案。在我的 onTouchEnd 事件触发后，我必须执行以下操作

1. Append changes to the canvas. It'll double-draw
2. Create a clone of the canvas
3. remove the canvas, re-add it
4. Copy the data from the clone over

然后这个 bug 就消失了……太可笑了。

我必须让它工作，在移除硬件加速后我注意到 jQM 感觉多么笨重

【讨论】：

@frequent 我觉得这样做很肮脏……它太老套了
啊。 Android 有时感觉就像 IE6...您也可以将您的 hack 发布为问题 here。
你所说的“从克隆中复制数据”是什么意思……你指的是什么数据？
就是这样，在克隆画布后复制，创建一个新画布 - 将旧画布数据复制到新画布上
@DimitriAdamou 在 4.1.1 和 4.3（三个常规系统更新，四个？）之间没有设法修复这么小的错误的人应该感到肮脏！不是你，因为你提供的是hacky，但仍然是他们无能的解决方法......