usage with pixijs (4.8.1)+ haxe

[NicolasVereenoghe]

Hello,

Not really an issue. I needed to prototype an input text field for a coming development.

I did a wrapper (work in progress), adapted to my own framework. If you can read Haxe code, maybe it can help you to develop your own solution :
wrapper :
https://github.com/NicolasVereenoghe/git.vega.pixi4/blob/master/src/vega/ui/MyCanvasInputContainer.hx
haxe externs (minimum to make it work) :
https://github.com/NicolasVereenoghe/git.vega.pixi4/blob/master/haxe/lib/CanvasInput/1%2C2%2C7/src/CanvasInput.hx

It only works with "canvas" rendering mode. With "webgl", it is displayed but i didn't manage to input anything.

The trick is :

• create a CanvasInput without a "canvas" defined
• create a Texture from the CanvasInput::renderCanvas returned value, and assign it to a pixi Sprite :
  new Sprite( Texture.fromCanvas( lInput.renderCanvas()));
• catch "touchstart" and "mousedown" on this Sprite's conatiner to manually control focus :
  myCanvasInput.focus(); myCanvasInput._mouseDown = true; // "hack" to avoid to lose focus
• override the Sprite's Container "updateTransform" method to force focus on CanvasInput::_hiddenInput every time the Container is updated :
  myCanvasInput._hiddenInput.focus();
• you have to manage the end of input in your own way, by manually calling CanvasInput::blur
• when input is done, you also need refresh the whole rendering : on android, the virtual keyboard shift / scale the rendering
• using a "viewport" statement into your html seems to help a bit to prevent weird zoom effects (I need more tests) :
  <meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1.0" />

For now my tests are on stand by, but I hope it could help someone who would try to make this nice CanvasInput work with pixijs.

Thanks for reading, and thanks to people developing CanvasInput ^^