Android 4+ html5画布没有重绘

Question

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

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

还应该注意的是,动画似乎与4.1 google api模拟器中的easel.js/tween.js一起使用(画布清除和重绘),但不适用于运行4.1.1的手机.

我已经对正在发生的事情做了一些进一步的研究.基本上,似乎动画一开始的形状会留下一个神器,clearRect不会清除.我有一个大圈子,我正缩小到一个小圈子.动画仍然会发生,但是在画布上调用clearRect不会影响大圆圈.

Answer 1

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

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

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

这似乎是从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).

<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>