我目前正在使用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不会影响大圆圈.
解决方法
我也没有针对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,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,width: 100,height: 50,fill: "#00D2FF",stroke: "black",draggable: true,opacity: 1.0
});
BoxLayer.add(Box);
BoxLayer.draw();
};
</script>
