React Native+OpenGLペイント


gl-reactをReact Nativeで使う方法の覚書。

前回(設定やフィルタ処理)の続きのような感じ。

 

使ってみたいのはこちら。

https://gl-react-cookbook.surge.sh/paint

GLによるペイントプログラムです。

サーフェイス

ソースをコピペした後、まずはSurfaceのインポート元を変更します。

gl-react-dom と gl-react-expo

基本的に環境の違いを吸収していると思いますが、gl-react-domgl-react-nativeのソースを見てみます。

GLViewとloaderを変えてcreateSurface.jsでSurfaceを返しています。

マウスイベントとタッチイベント

React Nativeを使うのでマウスでなくタッチイベントになるんですが、この辺のドキュメントが見当たらないです。

とりあえず関数はそのままでイベントの方を書き換える。

style の cursor は Native で対応していないので削除。

また、Surface の width, height 指定方法も変更する必要があることに注意。

 

続いてgetPosition()(座標を得る関数)を書き換えます。

ここもちょっと問題があって、ReactやReactNativeタッチイベントの中身ってちゃんとしたドキュメントがないので中身を見ながら書くしかない。

全画面ならこれで[0-1]範囲の位置を取得できる。

 

マウスイベントと違ってターゲットを取れないので相対位置はさらに面倒です。

とりあえず要素のサイズさえわかれば計算可能なのでSurfaceのonLayoutイベントでWidth、Heightを保存します。

nativeEvent.locationXは要素内の座標(nativeEvent.pageXは絶対座標)なのでサイズで割って[0,1]範囲に収めます。

タップで書けるのは楽しいけど、反応がちょっと怪しいのと動きが早いととぎれとぎれになるので実用化するには色々調整がいりそうです。

追記:Gesture Responder System

ジェスチャーレスポンダーというのを見つけた。

基本的にタッチイベントと同じように使うことになるけど、イベント情報が多くて特に touchHistory.touchBank を使うと移動の補完がしやすいかもしれない。

タッチイベントを上のように置き換えると同様に動きます。

onStartShouldSetResponderを設定しておかないと動かないので注意。

onMoveShouldSetResponderでもいいけどこのへん説明の本意がよくわからない。

追記:React GL API Document

Cookbookの左上のAPIリンクからドキュメントに移動できた(API)。

上のExamplesとGithubがコンテンツのリンクと一緒だったからAPIを見逃してた。

もうちょっと主張してほしい所。せめてコンテンツ部分ににリンクがあれば。


コメントを残す

メールアドレスが公開されることはありません。