Sign in to follow this  
buryo

Creating Input element

Recommended Posts

Hi,

I've found some old examples where people use 

document.createElement("input");

and add it to the stage. 

I'm getting the following error:

Quote

TypeError: Cannot set property '_parentID' of undefined

export default class UI {
    constructor(app, CANVAS_WIDTH, CANVAS_HEIGHT) {
        this.app = app;
        this.CANVAS_WIDTH = CANVAS_WIDTH;
        this.CANVAS_HEIGHT = CANVAS_HEIGHT;
        this.graphics = new PIXI.Graphics();
        this.textField();
    }

    textField() {
        this.domField = document.createElement("input");
        this.domField.type = "text";
        this.domField.style.position = "absolute";
        this.app.stage.addChild(this.domField);
    }
}

 

 

Share this post


Link to post
Share on other sites

You can't add dom elements to pixi stage. You could add it on top of the canvas and use it as a regular input. Do you have a link for the example that has dom mixed with pixi stage?

It could be that there's some library that allows thatkind of methods.

Share this post


Link to post
Share on other sites

I am not sure if this is correct, but I guess @buryo is using some module bundler ( webpack / browserify ) and he cannot easily consume the PIXI.TextInput class in its current state.

I would go with a fork of the repo and make a pull request in a few days ( when I finish with my current work ) if this is the problem

Share this post


Link to post
Share on other sites

Has someone worked with this before? I've made my own Input plugin the only problem is the screen size, I can't figure out how to calculate that

https://i.imgur.com/sO3FzMI.png

https://i.imgur.com/nwdXm9v.png

Mwni is doing some calculations on screen resize: https://manuelotto.com/opensource/PIXI.TextInput/demos/demo_default.html

Share this post


Link to post
Share on other sites

How I fixed this:
 

I've put the input and canvas in the same div (this is the parent div) and set the parent div to Relative

Set the input field to Absolute, and now you can put it where you want with Top and Left

HWMZxlg.png

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.