Next2D PlayerのAPI [TextField編]

TextFieldのテキスト機能は`プレインテキスト`と`HTMLテキスト`の2つの機能がついています。

# プレインテキスト
Stringとして受け取ったテキスト情報をそのまま描画に出力します。

```javascript
const root = next2d.createRootMovieClip(240, 240, 12, {
    "tagId": "container"
});

const { TextField } = next2d.text;

const textField = new TextField();

textField.defaultTextFormat.size = 16;
textField.text  = "Hello, World.";

textField.x = (240 - textField.width)  / 2;
textField.y = (240 - textField.height) / 2;

root.addChild(textField);
```

<p class="codepen" data-height="300" data-theme-id="dark" data-default-tab="js,result" data-slug-hash="gOGLvQv" data-user="next2d" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/next2d/pen/gOGLvQv">
  [Next2D Player] TextField plain text sample code</a> by Next2D (<a href="https://codepen.io/next2d">@next2d</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>


# HTMLテキスト

受け取ったHTMLを解析して、描画に出力します。
お知らせなどの機能で利用できるのではないかと思ってます。

```javascript
const root = next2d.createRootMovieClip(240, 240, 12, {
    "tagId": "container"
});

const { TextField } = next2d.text;

const textField = new TextField();

textField.multiline = true;
textField.wordWrap  = true;
textField.htmlText  = `<p align="center"><font size="14" color="red"><b>Hello, World.</b></font></p><p><img src="https://next2d-demonstration.herokuapp.com/image/logo.png" width="50" height="50"></p>`;

textField.x = (240 - textField.width)  / 2;
textField.y = (240 - textField.height) / 2;

root.addChild(textField);
```

<p class="codepen" data-height="300" data-theme-id="dark" data-default-tab="js,result" data-slug-hash="vYeydqW" data-user="next2d" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/next2d/pen/vYeydqW">
  [Next2D Player] TextField html text sample code</a> by Next2D (<a href="https://codepen.io/next2d">@next2d</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>


# リサイズ機能
リサイズ機能はテキストサイズに合わせて枠が拡大縮小する`autoSize`機能と、枠のサイズに合わせてテキストサイズが拡大縮小する`autoFontSize`機能です。文字を使った演出などは枠が拡大縮小する`autoSize`機能がお勧めで、ユーザー情報など、枠に収まってほしいシーンではテキストサイズが拡大縮小する`autoFontSize`機能がお勧めです。

## autoSize
テキストサイズに応じてテキストエリア枠を拡大縮小するautoSize機能のサンプルコードです。

```javascript
import "https://cdn.skypack.dev/@next2d/player@latest";

const root = next2d.createRootMovieClip(240, 240, 12, {
    "tagId": "container"
});

const { TextField, TextFieldAutoSize } = next2d.text;

const textField = new TextField();

textField.defaultTextFormat.size = 10;

textField.border   = true;
textField.autoSize = TextFieldAutoSize.CENTER;
textField.text     = "autoSize";

textField.x = (240 - textField.width)  / 2;
textField.y = (240 - textField.height) / 2;

root.addChild(textField);

const timerId = setInterval((text_field) => 
{
    // reset
    text_field.text = "";
    
    text_field.defaultTextFormat.size++;
    text_field.text = "autoSize";
    text_field.x = (240 - text_field.width)  / 2;
    text_field.y = (240 - text_field.height) / 2;
    
    // end
    if (text_field.defaultTextFormat.size === 50) {
        clearInterval(timerId);
    }
}, 1000, textField);
```

<p class="codepen" data-height="300" data-theme-id="dark" data-default-tab="js,result" data-slug-hash="PoJbLEV" data-user="next2d" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/next2d/pen/PoJbLEV">
  [Next2D Player] TextField autoSize sample code</a> by Next2D (<a href="https://codepen.io/next2d">@next2d</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

## autoFontSize
テキストエリアの枠のサイズに合わせてテキストサイズが拡大縮小するautoFontSize機能のサンプルコードです。

```javascript
const root = next2d.createRootMovieClip(240, 240, 12, {
    "tagId": "container"
});

const { TextField, TextFormatAlign } = next2d.text;

const textField = new TextField();

textField.defaultTextFormat.align = TextFormatAlign.CENTER;
textField.defaultTextFormat.size = 10;

textField.border       = true;
textField.multiline    = true;
textField.wordWrap     = true;
textField.autoFontSize = true;
textField.width        = 200;
textField.text         = "autoFontSize";

textField.x = (240 - textField.width)  / 2;
textField.y = (240 - textField.height) / 2;

root.addChild(textField);

let text = "";
const timerId = setInterval((text_field) => 
{
    // reset
    text_field.text = "";
    text += "xyz. ";
    text_field.defaultTextFormat.size++;
    text_field.text = `autoFontSize\nFontSize:${text_field.defaultTextFormat.size}\n${text}`;
    text_field.x = (240 - text_field.width)  / 2;
    text_field.y = (240 - text_field.height) / 2;
    
    // end
    if (text_field.defaultTextFormat.size === 100) {
        clearInterval(timerId);
    }
}, 1000, textField);
```

<p class="codepen" data-height="300" data-theme-id="dark" data-default-tab="js,result" data-slug-hash="qBPqvGY" data-user="next2d" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/next2d/pen/qBPqvGY">
  [Next2D Player] TextField autoFontSize sample code</a> by Next2D (<a href="https://codepen.io/next2d">@next2d</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

いかがだったでしょうか？
他にも紹介したいNext2D Playerの機能はあるのですが、それはまた別の機会に掲載できればと思います。
明日からはNext2D Frameworkの紹介をできればと思います。