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
You can install pixi drawable text input with standard npm
npm install pixi-drawable-textinput
Or with yarn
yarn add pixi-drawable-textinput
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);
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);
The project is open to any new proposal and correction pull request and issues I will take the necessary measures to advance the project
- Fix cursor do not display
- Update documentation
- Fix import
- Fix package
- 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
- Add mobile support
- Cursor up when key up and down when key down