6

現在、phonegap を使用して Android アプリケーションを開発しています。オブジェクトを描画してアニメーション化するhtml5キャンバスがあります。Android 2.3ではうまく機能しますが、Android 4以降ではキャンバスを再描画していません。アニメーションに kinetic.js と easyel.js/tween.js の両方を使用してみましたが、これらのライブラリの両方でキャンバスがクリアされないという問題が発生しました。キャンバス上で div を表示および非表示にすることに成功しましたが、常に機能するとは限りません。これは Android 4+ 固有のバグか、html5 キャンバスのパフォーマンスを向上させるための何らかの機能であるとしか考えられません。

アニメーション中にhtml5キャンバスを強制的に再描画できるようにする、Android 4またはjavascriptで変更できる設定またはメソッドを呼び出すことができるかどうかを誰かが知っていますか?

アニメーションは、4.1 Google API エミュレーター (キャンバスのクリアと再描画) のイーゼル.js/tween.js で動作するように見えますが、4.1.1 を実行している電話では動作しないことにも注意してください。

何が起こっているのかについて、さらに調査を行いました。基本的に、アニメーションの最初の形状がアーティファクトを残しているように見えますが、これは clearRect ではクリアされません。私は小さな円に縮小している大きな円を持っています。アニメーションは引き続き発生しますが、大きな円はキャンバスで clearRect を呼び出しても影響を受けません。

4

3 に答える 3

7

根本的な問題の修正もありませんが、コードに遅延を追加しない別の不完全な回避策を考え出しました。最初にダミーオブジェクトをキャンバスに描画します。次に、アニメーションオブジェクト（またはドラッグ可能なオブジェクト。ドラッグでも発生するため）を描画します。最初に描画されたオブジェクトは永続的であるようです（つまり、適切にクリアできません）。KineticJsを使用して、次のことを行います... 1.）ステージを作成します。2。）オブジェクトを描画します（背景としてステージのサイズの長方形のように。オブジェクトは透明にすることはできません）、3。）レイヤーをステージに追加し、4。）layer.draw（）を実行します。

その後、キャンバスに何でも描画でき、Androidでは正常に動作します。（以下の例を参照してください。背景がない場合、オブジェクトは最初のドラッグで複製されます。テストするには、背景の不透明度を0に設定します）。

注意：これまでの私の経験では、これは任意のレイヤーの最初のオブジェクトで発生しています。そのため、ステージの各レイヤーを微調整する必要があります。アプリケーションによっては、コードにタイミング遅延を追加するよりも良い場合とそうでない場合があります。

これは、Android4.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&q3%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>
于 2012-10-13T17:48:51.143 に答える
1 
function drawImage(imageObj) {
    var stage = new Kinetic.Stage({
        container: "container",
        width: wW,
        height: wH
    }),
    timer = null,
    dummys = 1,
    layer = new Kinetic.Layer();

    timer = setInterval( function() {
        if( dummys >= 2 ) {
            clearInterval(timer);
            layer.clear();
            var darthVaderImg = new Kinetic.Image({
                image: imageObj,
                x: stage.getWidth() / 2 - 200 / 2,
                y: stage.getHeight() / 2 - 137 / 2,
                draggable: true
            });
            layer.add(darthVaderImg);
            stage.add(layer);   
        }else{
            var background = new Kinetic.Rect({
              x: 0,
              y: 0,
              width: wW,
              height: wH,
              fill: "white",
              draggable: false
            });
            layer.add(background)
            layer.draw();
            dummys++;
        }
    }, 10 );

}

var wH = window.innerHeight,
    wW = window.innerWidth,
    mCanvas = document.getElementById('container'),
    imageObj = new Image();

$(document).ready(function(){
    mCanvas.style.width = wW;
    mCanvas.style.height = wH;
    imageObj.src = 'img/darth-vader.jpg';
    imageObj.onload = function() {
        drawImage(this);
    };
});

魅力のように機能します

于 2012-11-27T16:55:10.267 に答える
1

今日、Android 4.1.1 で同じ問題に遭遇しましたが、私の問題はさらに厄介でした。setTimeout他の回答で提案されている「ダミーオブジェクトを描画する」回避策を試しましたが、問題は解決しません。さらに試行錯誤を重ねた結果、最初の数フレームにダミー オブジェクトを描画すると (最初の 2 フレームで十分でした)、後でキャンバスを正常にクリアできることがわかりました。

別の関連する問題は、キャンバスの上にポップオーバーを表示してから閉じると、キャンバスをクリアするバグが再び発生することです。今回は、数フレームのダミー オブジェクトを描画しても機能しなくなりました。最初にキャンバスのサイズを変更してから、数フレームのダミー オブジェクトを描画します。

明らかにこれらは醜い回避策ですが、同じ問題を経験した他の人にとっては役立つかもしれません.

于 2012-10-30T16:55:36.327 に答える