4

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

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

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

我无法准确地截取屏幕截图（不太确定如何在 Android 上执行此操作），但我会尝试分解该过程。

启用硬件加速

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

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

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

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

我真的很想启用硬件加速，这是唯一出现的问题 - 性能提升太不可思议了

4

6 回答 6

8

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

解决方案是画布的所有父 HTML 元素都不会溢出：隐藏或溢出：滚动

于 2012-12-31T17:22:00.310 回答
2

好的，所以我想出了有史以来最HACKIEST的解决方案。在我的 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

然后这个错误消失了......荒谬。

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

于 2012-11-08T05:20:11.733 回答
2

我有同样的问题。在我的情况下，似乎是由 jquery mobile css 引起的。

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

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

至

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

删除 overflow-x: hidden 属性可以解决问题。

资料来源：Github / thomasjbradley / signature-pad / Issues

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

于 2013-04-04T11:00:24.153 回答
1

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

于 2015-08-19T00:22:36.157 回答
0

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

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 ...
}
于 2013-09-26T07:55:37.280 回答
0

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

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

在这一行之后：

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

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

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

于 2013-08-08T10:05:04.350 回答