createjs,canvasでハマるところ2014
経緯
先日、初めてcreatejs使ったスマホ向けwebアプリ作ってリリースした。
まあ、予想通り、createjs、canvasにいろいろハマった。
はまったところは、gistにメモしておいたので、ここにも整理して乗っけておく。
なお、類似blog記事多数あり、俺もほとんど8割位それらの記事で助かりました。
ここで、参考にlink貼った記事書かれた方々に感謝します。
そして、次にcreatejs使う人のために、
既出の物、あまり他の記事に見ない物も、まとめて書いておきます。
参考までに。
概要
- 以下の現象の原因と対応について書いていきます
タッチイベントがずれる
- 現象
- タッチした時、実際のタッチした箇所と反応している箇所にズレがあった
- 原因
- 対応
- 全体にかかっているズーム率を取得。その後、canvasに対して以下スタイルをあてる
- zoom: 1 / ズーム率
- transform-origin: top left
- transform: scale(ズーム率, ズーム率)
- 参考
staging環境で画像click時にエラーに
retinaでcanvasがぼやける
if (window.devicePixelRatio) { var height = canvas.getAttribute('height'); var width = canvas.getAttribute('width'); canvas.setAttribute('width', Math.round(width * window.devicePixelRatio)); canvas.setAttribute('height', Math.round( height * window.devicePixelRatio)); canvas.style.width = width+"px"; canvas.style.height = height+"px"; stage.scaleX = stage.scaleY = window.devicePixelRatio; }
(android)canvasが2つ出てきた
- 現象
- 原因
- 対応
- 親要素のoverflow(or overflow-x):hiddenをvisibleにして解決
- 不都合あれば、DOMを調整しよう。
(android)でcanvasに1clickすると2clickした事になってる
- 現象
- createjsのtouch enableつけて、androidの一部の機種に悪影響
- 原因
- どうやら、タッチした時に、touchstartと、mousedownもfireしてるっぽい。
- androidの一部端末に見られた。(galaxy系とか)
- 対策
(android)特定の条件で、eventに対して意図しないオブジェクトが反応してしまう
- 現象
- 原因
- 対象objの上に別のobjを重ねてtweenアニメしていたのが原因で、元の対象objまでevent callできなくなってる様子
- 普通にcreatejsのバグっぽい
- 対応
- 今回の場合、たまたまanimeしてるobjはtouchする必要がなかったので、animeしてるobjにmouseEnabled = falseすると、解決
(android) 古い端末でcanvasが重すぎる
(android)一部の端末でcanvasではじめに描画した画像の残像が残って画面が崩れる
- 現象
- 原因
- 描画についてこれていないっぽい
- 対応
// android4.1と4.2の時だけ、毎回のupdate()で、以下。 this.canvas.style.visibility = 'hidden'; this.canvas.offsetHeight; this.canvas.style.visibility = 'inherit';
(iOS)iphone4をios7にした端末で、なぜか一部タッチできない
- 現象
- 基本的に、iphoneでは、殆ど問題なく動く
- ところが、iphone4をios7にupdateした端末だけタッチが効かなくなった。
- 原因
- 対応
- 上記一個目のページの下部にあるcacheを追記したら、確かにうまくいった!
結論
- やっぱり、androidで苦労したなーという印象。
以上。