Have ideas to improve npm?Join in the discussion! »

    pixi-drawable-textinput
    TypeScript icon, indicating that this package has built-in type declarations

    1.0.33 • Public • Published

    Pixi-Drawable-TextInput

    You need to create a text input with pixi but you don't want to use the dom of the canvas, this plugin allows you to draw your own text input

    Documentation

    Documentation link

    Installation :

    You can install pixi drawable text input with standard npm

    npm install pixi-drawable-textinput

    Or with yarn

    yarn add pixi-drawable-textinput

    Use :

    Simple text input

    import * as PIXI from "pixi.js";
    import TextInput, {InputOption} from "pixi-drawable-textinput";
    const app = new PIXI.Application({
      width: 400,
      height: 200,
      backgroundColor: 0x1099bb
    });
    document.body.appendChild(app.view);
     
    var option = new InputOption();
    option.style = { fontSize: 12 };
    option.value = "A simple text input";
    var input = new TextInput(option);
    app.stage.addChild(input);

    Test online

    Complexe text input

    import * as PIXI from "pixi.js";
    import TextInput, {InputOption, InputCursorStyle} from "pixi-drawable-textinput";
    const app = new PIXI.Application({
      width: 800,
      height: 400,
      backgroundColor: 0x1099bb
    });
    document.body.appendChild(app.view);
    var option = new InputOption();
    option.backgroundColorFocus = { color: 0xcffbff, aplha: 1 };
    option.backgroundColor = { color: 0xe02f5e, aplha: 1 };
    option.multiLine = true;
    option.maxLength = 100;
    option.roundedBorder = 40;
    option.borderWidth = 5;
    option.style = {
      fontFamily: "Arial",
      fontSize: 36,
      fontStyle: "italic",
      fontWeight: "bold",
      fill: ["#ffffff", "#00ff99"], // gradient
      stroke: "#4a1850",
      strokeThickness: 5,
      dropShadow: true,
      dropShadowColor: "#000000",
      dropShadowBlur: 4,
      dropShadowAngle: Math.PI / 6,
      dropShadowDistance: 6
      };
    option.height = 60;
    option.width = 400;
    option.value = "A complexe text input";
     
    option.cursorStyle = new InputCursorStyle();
    option.cursorStyle.distance = 0;
    option.cursorStyle.colorBlind = { color: 0xff0000, alpha: 1 };
    option.cursorStyle.colorLow = { color: 0x00ffff, alpha: 0.5 };
    option.cursorStyle.width = 10;
    option.cursorStyle.speedSwap = 200;
    var input = new TextInput(option);
     
    app.stage.addChild(input);
     

    Test online

    to-do list

    The project is open to any new proposal and correction pull request and issues I will take the necessary measures to advance the project

    V1.0.32

    • Fix cursor do not display

    V1.0.3

    • Update documentation
    • Fix import
    • Fix package

    V1.0.2

    • Add development test server
    • Fix placeholder
    • Fix alpha cursor
    • Update height component for multiline
    • Fix input out of field
    • Create a documentation
    • Fix cursor field empty

    Futur

    • Add mobile support
    • Cursor up when key up and down when key down

    Install

    npm i pixi-drawable-textinput

    DownloadsWeekly Downloads

    15

    Version

    1.0.33

    License

    MIT

    Unpacked Size

    25.3 kB

    Total Files

    16

    Last publish

    Collaborators

    • avatar