info_outline
# 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
## 使用範例
```typescript
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 樣式屬性。例如，要更改字體大小，使用：<br/>
> `input.setInputStyle('fontSize', '21px')`
## 事件
所有事件都通過默認的 pixi EventEmitter 發送。
```ts
input.on('keydown', keycode => {
console.log('key pressed:', keycode)
})
```
**keydown** -> keycode: number
> 當按下某個鍵時連同其[鍵碼](http://keycode.info/)一起發送。
**keyup** -> keycode: number
> 當釋放某個鍵時連同其[鍵碼](http://keycode.info/)一起發送。
**input** -> text: string
> 當輸入文字改變時連同當前輸入的文字一起發送。
**focus**
> 當輸入元素獲得焦點時發送。
**blur**
> 當輸入元素失去焦點時發送。
## Links and Resources
- [pixi-text-input](https://github.com/Mwni/pixi-text-input)
## Authors
**[cook1470](/profile/cook1470)**
Haskasu 
cook1470 
Chinatsu 
module_cook1470 
kkk87 
zy.jiang 
winoCG