Android 4+ html5画布不重绘 [英] Android 4+ html5 canvas not redrawing

问题描述

我目前正在使用 phonegap 开发一个 android 应用程序.我有一个 html5 画布，我在上面绘制和动画对象.它在 android 2.3 上运行良好，但在 android 4+ 上它不会重绘画布.我尝试将 kinetic.js 和 easel.js/tween.js 用于我的动画，并且这两个库都出现了不清除画布的问题.我在画布上显示和隐藏 div 时取得了一些成功，但它并不总是有效.我只能假设这是一个 android 4+ 特定的错误或某种类型的功能，以增强 html5 画布性能.

I am currently developing an android application using phonegap. I have an html5 canvas that I am drawing and animating objects on. It works great on android 2.3, but on android 4+ it is not redrawing the canvas. I tried using both kinetic.js and easel.js/tween.js for my animations and the problem with not clearing the canvas occurred for both of these libraries. I experienced some success showing and hiding a div over the canvas but it does not work all the time. I can only assume that this is an android 4+ specific bug or some type of feature to enhance the html5 canvas performance.

有谁知道是否有一些我可以更改的设置或我可以在 android 4 或 javascript 中调用的方法，这将允许我在动画期间强制重绘我的 html5 画布?

Does anyone know if there is some setting I can change or method I can call in android 4 or javascript which would allow me to force the redraw of my html5 canvas during animations?

还应注意，动画似乎可以在 4.1 google api 模拟器中使用 easel.js/tween.js(画布清除并重绘)，但不适用于运行 4.1.1 的手机.

It should also be noted that the animations seem to work with easel.js/tween.js in the 4.1 google api emulator (the canvas clears and redraws), but not on phones running 4.1.1.

我对正在发生的事情做了一些进一步的研究.从本质上讲，动画一开始的形状似乎留下了一个工件，而 clearRect 并没有清除它.我有一个大圆圈，我正在缩小到一个小圆圈.动画仍然发生，但大圆圈不受在画布上调用 clearRect 的影响.

I've done some further research into what is happening. Essentially it appears that the shape at the very beginning of an animation is leaving an artifact, which clearRect does not clear. I have a big circle that i am shrinking to a small circle. The animation still happens but the big circle is not affected by calling clearRect on the canvas.

推荐答案

我也没有解决根本问题的方法，但我想出了另一个不完美的解决方法，它不会给你的代码增加延迟.首先在画布上绘制一个虚拟对象.然后绘制您的动画对象(或可拖动对象.因为它也发生在拖动时).似乎第一个绘制的对象是持久的(即无法正确清除).使用 KineticJs，我执行以下操作... 1.) 创建舞台，2.) 绘制对象(如舞台大小的矩形作为背景.注意对象不能是透明的)，3.)将图层添加到舞台，然后 4.) 运行 layer.draw().

I don't have a fix for the root problem either, but I've come up with another imperfect workaround that doesn't add a delay to your code. Draw a a dummy object to the canvas first. Then draw your animation objects (or draggable objects. Since it happens on drag as well). It seems that the first object drawn is persistent (that is, can't be properly cleared). With KineticJs, I do the following... 1.) create the stage, 2.) draw an object (like a rectangle the size of the stage as a background. Note that the object can't be transparent), 3.) add the layer to the stage, and 4.) run layer.draw().

之后，我可以在画布上绘制任何东西，并且它在 Android 中表现正常.(参见下面的示例.在没有背景的情况下，对象在第一次拖动时被复制.要对其进行测试，只需将背景的不透明度设置为 0).

After that I can draw anything to the canvas and it behaves normally in Android. (see example below. Without the background the object is dubplicated on first drag. To test it, just set the opacity of the background to 0).

一个警告:根据我目前的经验，任何给定层中的第一个对象都会发生这种情况.所以我必须调整舞台中的每一层.根据您的应用程序，它可能会或可能不会比在代码中添加时间延迟更好.

One caution: In my experience so far, this is happening to the first object in any given layer. So I have to tweak each layer in the stage. Depending on your application it might or might not be better than adding timing delays to the code.

这似乎是从 Android 4.1.x 开始的 Android 错误它不会在 4.0.x 中出现.并且在本周发出的最近升级到 4.1.2 中也没有修复.类似的问题与 CSS 中的 overflow-x 属性的设置有关(参见 http://code.google.com/p/android/issues/detail?can=2&start=0&num=100&q=&colspec=ID%20Type%20Status%20Owner%20Summary%20Stars&groupby=&sort=&id=35474).

This seems to be an Android bug starting with Android 4.1.x It does not occur in 4.0.x. And it has not been fixed in the recent upgrade to 4.1.2 sent out this week. Similar problems have been tied to the setting of the overflow-x property in CSS (see http://code.google.com/p/android/issues/detail?can=2&start=0&num=100&q=&colspec=ID%20Type%20Status%20Owner%20Summary%20Stars&groupby=&sort=&id=35474).

<script>
  window.onload = function() {
    var stage = new Kinetic.Stage({
      container: "container",
      width: 578,
      height: 200
    });

    var boxLayer = new Kinetic.Layer();
    stage.add(boxLayer);
        var background = new Kinetic.Rect({
          x: rectX,
          y: rectY,
          width: 578,
          height: 200,
          fill: "white",
          stroke: "white",
          strokeWidth: 4,
          draggable: false
        });
    boxLayer.add(background)
    boxLayer.draw();


    var rectX = stage.getWidth() / 2 - 50;
    var rectY = stage.getHeight() / 2 - 25;

    var box = new Kinetic.Rect({
      x: rectX,
      y: rectY,
      width: 100,
      height: 50,
      fill: "#00D2FF",
      stroke: "black",
      strokeWidth: 4,
      draggable: true,
      opacity: 1.0            
    });

    boxLayer.add(box);
    boxLayer.draw();


  };

</script>

这篇关于Android 4+ html5画布不重绘的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！