PIXI InputBox

[clifftm]

Hello.

Please don't kill me for my stupid question, may be i'm wrong in a core approach becase i'm noob in webdev and animation.

I'm trying to build a webpage based on canvas animation (created in DragonBones) using PIXI.js. The canvas is stretching by width\height of it's parent div, so my background and objects are scaled\stretched too.

I want to put an inputText on the canvas, not as DOM inside a div on the canvas, so user can enter login\password in it.

I found a CanvasInput https://goldfirestudios.com/blog/108/CanvasInput-HTML5-Canvas-Text-Input and this example (https://codepen.io/jdnichollsc/pen/waVMdB?editors=0010) based on Phaser, but don't understand how to use it with PIXI.

var myCanvas = document.getElementById("cvs")

this.app = new PIXI.Application({view: myCanvas});

var input = new CanvasInput({canvas: ???????});  // an exeption if canvas: myCanvas

this.app.stage.addChild( ?????? ); // don't understand what to write here

In codePen example they do:

var bmd = this.add.bitmapData(400, 50);

var myInput = this.game.add.sprite(x, y, bmd);

myInput.canvasInput = new CanvasInput({ canvas: bmd.canvas }); // add instance of CanvasInput to Sprite property?

How to implement that code in PIXI? How to create Sprite with empty texture? and how to setup CanvasInput canvas on it? I was trying with no luck

let graphics = new PIXI.Graphics();

graphics.beginFill(0xFFFFFF);

graphics.drawRect(0, 0, 500, 500);

graphics.endFill();

 

let texture = this.app.renderer.generateTexture(graphics);   

let sprite = new PIXI.Sprite(texture);  // can't figure out how to create it in a proper way

 

let cvs = this.app.view;

var input = new CanvasInput({

canvas: texture

      // or

      // canvas: sprite.texture

      // or

      // canvas: cvs

});

 

this.app.stage.addChild(sprite);

Or maybe that CanvasInput not compatible with PIXI v4 ?  Also tried that : https://github.com/SebastianNette/PIXI.Input  and can't able to make it work

I wonder why in 2018 there is no Input examples with PIXI in whole internet. I want to learn, but have nobody for ask a question.

I've also read that topic 

 where TickleMeElmo said : Other way and in my opinion, better way, would be to just build a new text input for pixi. Add event listener for key up event and filter out all unwanted keystrokes, add registered key to stored string and just display that string as PIXI.Text. This way it's also quite easy to later on add some fancy stuff to the input. 

I think that i would be difficult for me to make a blink cursor for example  or tab for 2 inputs... Anyway i will explore https://github.com/limikael/PixiTextInput to understand main approach

Please, give me an advice how to equal my problem. Thanks, and sorry for my bad english