PIXI & DOM Inpus

[Goga]

How can I add HTML DOM Input (or any other element) to PIXI container with relative position ?

Thanks

[ivan.popelyshev]

Hello!

There's no clear article on that, but Accessability package of pixijs has all necessary code inside. Also you can copy something from https://github.com/Mwni/PIXI.TextInput .

Basically, need to take calculated transform matrix from pixi element and put it to css transform of DOM element.

Edited April 11, 2020 by ivan.popelyshev

[bubamara]

You can also use https://github.com/EneaEntertainment/pixi-html-element-wrapper

It will link your HTML element with dummy PIXI.DisplayObject which you can then position, rotate and scale in scene as you would with any other display object.

[gonulbuya]

sample use:
html page section

<input id = "number1_input" type = "number" min = "0" max = "100000" value = "10" onchange = "html_inputChange_Sayi1 ()" onkeyup = "html_inputChange_Sayi1 ()" style = "visibility: hidden">

 

window.addEventListener('resize', resize);
window.addEventListener('orientationchange', resize);

resize();
var w,h;
function resize() {

    
    
    var canvasRatio = 800 / 1440; ////canvas genişlik ve canvas yükseklik
    var windowRatio = window.innerHeight / window.innerWidth;

    

    if (windowRatio < canvasRatio) {
        h = window.innerHeight;  
        w = h / canvasRatio;
        
    } else {
        w = window.innerWidth;
        h = w * canvasRatio;
        
        
}
    app.view.style.width = w + 'px';
    app.view.style.height = h + 'px';
    resizeHtmlElement();
}

function resizeHtmlElement(){

    var sayı1_size_degis=document.getElementById('number1_input');

    
    sayı1_size_degis.style.width=w*8/100+'px';
    sayı1_size_degis.style.left=-w*25/100+'px';    
    sayı1_size_degis.style.height=h*6/100+"px";
    sayı1_size_degis.style.top=-h*75/100+'px'; 
    sayı1_size_degis.style["font-size"]=w*2.6/100+'px';

    sayı1_size_degis.style.visibility="visible"
    

  }