0

私の英語でごめんなさい、私はアルゼンチン出身です。Eclipse で HTML5 アプリを開発しています。プログラムが IMG 要素に画像をロードすると、イベントtouchstart、touchmove、およびtouchendが適切に検出されます。しかし、画像を回転させる必要がある場合は、CANVAS とtoDataUrl()メソッドを使用すると、タッチ イベントが検出されないようです。私が使用するソース コードは次のようなものです (すべてのオブジェクト、変数、および関数が適切に宣言されていることを考慮してください)。

var context = canvas.getContext("2d");

function loadImage(strFile, intDeg) {
  if (intDeg == 90) image.onload = function() { rotateImage(); };
  imagePhoto.src = strFile;
}

function rotateImage() {
  image.onload = function() { moveImage(); };
  canvas.width = image.height;
  canvas.height = image.width;
  context.translate(canvas.width, 0);
  context.rotate(90 * Math.PI / 180);
  context.drawImage(image, 0, 0, canvas.width, canvas.height);
  context.restore();
  image.src = canvas.toDataURL("image/png");
}

image.addEventListener("touchstart", downEvent, true, true);
image.addEventListener("touchmove", moveEvent, true, true);
image.addEventListener("touchend", upEvent, true, true);

ありがとう！

4

2 に答える 2

0

これは4.1より前のAndroidのバグのようです: http://developersday.wordpress.com/2012/08/17/missing-events-touchstartmoveend-and-scroll-on-android-4-0-x-and-ついさっき/

非常に短いバージョンは、タッチ イベントがスクロールでうまく機能しないことです。http://code.google.com/p/android/issues/detail?id=19827では、タッチ イベント ハンドラで e.preventDefault() を呼び出すことを提案しています。

于 2013-11-12T02:00:18.433 に答える
0

（今、この答えは完全に間違った方向に進んでいたと思います。申し訳ありません！）

問題はtoDataURL、同期のブロッキング API 呼び出しです。つまり、実行中、ブラウザーは他のことをリッスンしていません。何が起こっているのかについての私の推測は次のとおりです。

  1. を呼び出しますloadImage。これはonload()ハンドラーを設定し、に割り当てstrFileます.src
  2. onload発火し、呼び出しますrotateImage。キャンバスに画像を描画し、 でしばらくブロックしtoDataURLます。
  3. の結果を代入toDataURLします.src
  4. ステップ 2 に戻ります。

ローテーション、base64 への変換、および読み込みで忙しく、イベントを処理する機会がまったくありません。

3 つの可能な修正を優先順に示します。

  1. 画面上に表示されるキャンバスに画像を回転させます。image.srcこの方法では、 andtoDataURLビットはまったく必要ありません。(または、csstransform: rotate(90deg);を使用し、javascript でローテーションをまったく行わないでください。これは、よりトリッキーなクロスブラウザーになる可能性があります)
  2. onloadの最後にあるイベント ハンドラーを削除しrotateImageて、ループに陥らないようにします。
  3. の代わりにcanvas.toBlobandを使用すると、すべてがナイスで非同期になります。chrome はまだ を実装していないので、これはあまり役に立たないかもしれないことに注意してください。FileReader.readAsDataURLCanvas.toDataURLtoBlob
于 2013-10-30T02:39:54.790 に答える