Description
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 ^^