PIXI 文字輸入框（PixiTextInput）

基於 Mwni 的函式庫改編而來，

這個 PIXI.js 的模組提供了一種方便的方法來將文字輸入框添加到 PIXI.js 舞台上。輸入框本身是一個 HTML \<input> 元素，根據 PIXI.DisplayObject 給定的變換位置放置在舞台上方。方框會在 PIXI 舞台上繪製。此外，您可以選擇在文字輸入框失去焦點時，選擇是否應該用 PIXI.Text 來替代 \<input>。

我的改動 v0.0.1

1. 事先宣告 Class 的屬性變數，因為 TypeScript 在使用 this 賦值前，需要事先宣告屬性變數。
2. 將所有帶有 _ 前綴的屬性、函數，變成私有屬性（private）。
3. 修正了一個把 _dom_visible 誤寫成 dom_visible 的 BUG。
4. 添加了三個 interface，TextInputOptions、TextInputStyle、TextBoxStyle，並於部分輸入參數加上型別標註。
5. 刪除函數 renderWebGL、renderCanvas，這些函數用於支援 pixi v4，但此模組使用的 pixi 為 v5，因此不需要這些函數。
6. 讓 _surrogate.resolution 預設為 2。
7. 修正部分因 JavaScript 源碼，轉移到 TypeScript 後所出現的錯誤提示，如型別錯誤等。

其餘詳見 CHANGELOG.md

使用範例

import pixi = CG.Base.pixi;
import TextInput = CG.PixiTextInput.TextInput;

function examples() {
    // 初始化 pixi 舞台
    pixi.initialize(600, 500);

    // 建立文字輸入框
    const input = new TextInput({
        input: {
            fontSize: '25pt',
            padding: '14px',
            width: '500px',
            color: '#26272E'
        },
        box: { fill: 0xE8E9F3, rounded: 16, stroke: { color: 0xCBCEE0, width: 4 } }
    })
    input.position.set(pixi.stageWidth * 0.5, pixi.stageHeight * 0.5); // 調整輸入框的位置
    input.pivot.set(input.width * 0.5, input.height * 0.5); // 調整輸入框的錨點
    pixi.root.addChild(input); // 將文字框添加到舞台中

    const input2 = new TextInput({
        input: {
            fontSize: '20pt',
            padding: '14px',
            width: '400',
            color: '#26272E'
        },
        box: { fill: 0xFFFFFF, rounded: 16, stroke: { color: 0x333333, width: 4 } }
    })
    input2.position.set(pixi.stageWidth * 0.5, pixi.stageHeight * 0.75);
    input2.pivot.set(input.width * 0.5, input.height * 0.5);
    pixi.root.addChild(input2);

}

examples();

屬性

substituteText : boolean

當沒有焦點時，插件是否應該將 HTML 的 input 標籤替換為 pixi-Text DisplayObject。

本模組盡量模仿 HTML input 元素的外觀，但是在某些字體/樣式下可能會有一些差異。

將此設置為 false 以便 HTML input 元素始終可見。缺點是：你無法在輸入欄位上方顯示疊加層。

placeholder : string

應用於 HTML input 元素或替代的 pixi-Text 的佔位符文字。

placeholderColor : int

佔位符的顏色（當 substituteText 設置為 false 時無效；使用 CSS 設置佔位符顏色）。

text : string

HTML input 元素的文字（值）。

maxLength : int

文字的最大長度。

restrict : RegExp | string

限制輸入文字的字符集。可以傳遞包含所有可能字符的字符串或正則表達式，正則表達式將與整個輸入字符串匹配。

htmlInput : HTMLInputElement

直接訪問原生 HTML input 元素。不知道你計劃做什麼。

disabled : boolean

設置為 true 以禁用輸入。

函數

focus() : void

使輸入元素獲得焦點。

select() : void

使輸入元素獲得焦點並選中其中的文字。

blur() : void

移除輸入元素的焦點。

setInputStyle( key：string, value：string ) : void

更改輸入元素的 CSS 樣式屬性。例如，要更改字體大小，使用：
input.setInputStyle('fontSize', '21px')

事件

所有事件都通過默認的 pixi EventEmitter 發送。

input.on('keydown', keycode => {
    console.log('key pressed:', keycode)
})

keydown -> keycode: number

當按下某個鍵時連同其鍵碼一起發送。

keyup -> keycode: number

當釋放某個鍵時連同其鍵碼一起發送。

input -> text: string

當輸入文字改變時連同當前輸入的文字一起發送。

focus

當輸入元素獲得焦點時發送。

blur

當輸入元素失去焦點時發送。

Links and Resources

• pixi-text-input

Authors

cook1470