GalaxyS4のWebviewでのCanvasがおかしい件の解決方法
Galaxy S4のWebviewで、非同期処理の中でのCanvasの描画がバグってる
というエントリを書いて放置していたところいくつか解決方法を書いてくださった方がいて、それらを参考に再び戦ってみました。
その1. Create.JSの場合
- http://blog.happyelements.co.jp/2013/08/love-peace-and-android.html
- Stageをクリアすればいいらしいということでそこのコードでやっていた処理をそのまま持ってきて見ましたがうまくいきませんでした...。
// 擬似コード var canvas = document.getElementById("canvas"); var ctx = canvas.getContext("2d"); ctx.setTransform(1, 0, 0, 1, 0, 0); ctx.clearRect(0, 0, canvas.width+1, canvas.height+1); img.onload = function() { ctx.drawImage(img, 0, 0, 100, 100); };
その2. 要素を非表示にしてCanvasいじって要素を表示する
- http://ushisantoasobu.hateblo.jp/entry/2013/11/08/231708
- Canvas触る前にhide()して終わったらshow()する方法です。この方法で確かに表示されました!!素晴らしい。
// 擬似コード var $canvas = $("#canvas"); $canvas.hide(); var ctx = document.getElementById("canvas").getContext("2d"); img.onload = function() { ctx.drawImage(img, 0, 0, 100, 100); $canvas.show(); };
- ちなみにhide()を非同期処理の中でやるとダメなようです...
// 擬似コード // うまくいかない例 var $canvas = $("#canvas"); var ctx = document.getElementById("canvas").getContext("2d"); img.onload = function() { $canvas.hide(); // ↓ちなみにしてもダメ // var ctx = document.getElementById("canvas").getContext("2d"); ctx.drawImage(img, 0, 0, 100, 100); $canvas.show(); };
その3. アプリ側でハードウェアアクセラレーションをオフにする
- http://stackoverflow.com/questions/16480197/samsung-galaxy-s4-and-phonegap-issue
- アプリ側でハードウェアアクセラレーションをオフにすればいいみたいですが、上で解決したのでこれは試してないです...
とんちにしか思えないのですが、ブラウザに気持ちになって考えればわかるんですかね...。