Next2D PlayerのAPI [Graphics編]

Graphicsクラスは描画(ベクターシェイプ)作成で利用する関数がまとまっています。描画を動的に開始するには塗り、もしくは、線の描画宣言関数をコールします。

# 塗りの描画

関数 | 説明
---|---
beginFill|単一色の塗りの開始宣言
beginGradientFill|グラデーションの塗りの開始宣言
beginBitmapFill|イメージ(JPEG,PNG,GIF)の塗りの開始宣言

# 線の描画

関数 | 説明
---|---
lineStyle|単一色の線の開始宣言
lineGradientStyle|グラデーションの線の開始宣言
lineBitmapStyle|イメージ(JPEG,PNG,GIF)の線の開始宣言

# ヘルパー関数
簡単な図形であればヘルパー関数を利用すると便利です。

関数 | 説明
---|---
drawCircle|円の図形を描画します。
drawEllipse|楕円の図形を描画します。
drawRect|矩形の図形を描画します。
drawRoundRect|角丸矩形の図形を描画します。

# パス指定の関数
より複雑な描画はパス指定の関数を利用することで実現が可能です。

関数 | 説明
---|---
moveTo|指定のx,y座標に移動して、そこを始点として描画を開始します。
lineTo|指定したx,yに向かって直線を描画します。
curveTo|2次ベジェ曲線を描画します。
cubicCurveTo|3次ベジェ曲線を描画します。
endFill|描画パスを閉じて、塗りつぶしを実行します。
endLine|描画パスを閉じて、線の描画を実行します。

# Graphicsプロパティーを所有しているクラス
下記のオブジェクトから、`graphics`でアクセスが可能です。
Shapeクラスは、最も軽量なDisplayObjectで、描画機能のみを利用したい場合に最適です。

- MovieClip
- Sprite
- Shape

# ヘルパー関数サンプルコード
まずは、ヘルパー関数を使って簡単な図形を描画してみたいと思います。

```javascript
const { Shape } = next2d.display;

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

/**
 * drawCircle
 **/
 
// fill only
root
    .addChild(new Shape())
    .graphics
    .beginFill("steelblue")
    .drawCircle(20, 30, 15);

// fill and stroke
root
    .addChild(new Shape())
    .graphics
    .lineStyle(10, "red")
    .beginFill("steelblue")
    .drawCircle(70, 30, 20);

/**
 * drawEllipse
 **/

// fill only
root
    .addChild(new Shape())
    .graphics
    .beginFill("#FF9966")
    .drawEllipse(0, 60, 60, 30);

// fill and stroke
root
    .addChild(new Shape())
    .graphics
    .beginFill(0x966c3b)
    .lineStyle(10, 0x000000)
    .drawEllipse(80, 60, 30, 60);

/**
 * drawRect
 **/

// fill only
root
    .addChild(new Shape())
    .graphics
    .beginFill("rgb(6, 70, 99)")
    .drawRect(100, 20, 60, 30);

// fill and stroke
root
    .addChild(new Shape())
    .graphics
    .beginFill("#FFC286")
    .lineStyle(10, "#FFF1AF")
    .drawRect(125, 70, 30, 60);

/**
 * drawRoundRect
 **/

// fill only
root
    .addChild(new Shape())
    .graphics
    .beginFill("#66806A")
    .drawRoundRect(10, 100, 60, 30, 10);

// fill and stroke
root
    .addChild(new Shape())
    .graphics
    .beginFill("#E4FBFF")
    .lineStyle(10, "#BCFFB9")
    .drawRoundRect(10, 140, 60, 30, 10);
```

<p class="codepen" data-height="400" data-theme-id="dark" data-default-tab="js,result" data-slug-hash="VwMmKRL" data-user="next2d" style="height: 400px; 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/VwMmKRL">
  [Next2D Player] Graphics Helper function 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>


# グラデーション
グラデーションは線状グラデーション(`linear`)と円状グラデーション(`radial`)の2種類があり、グラデーションのカラー、透明度、配分をそれぞれ配列で細かく設定が可能です。

## 塗りのグラデーションサンプル

``` javascript
const { 
    Shape, 
    GradientType, 
    InterpolationMethod,
    SpreadMethod
} = next2d.display;

const { Matrix } = next2d.geom;

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

const matrix = new Matrix();
matrix.identity();
matrix.scale(240 / 1638.4 , 240 / 1638.4);
matrix.rotate(Math.PI / 180);
matrix.translate(120, 60);

// Radial
root
    .addChild(new Shape())
    .graphics
    .beginGradientFill(
        GradientType.RADIAL, 
        [0xff0000 , 0x00ff00 , 0x0000ff], 
        [1.0, 1.0, 1.0], 
        [0, 127.5, 255], 
        matrix, 
        SpreadMethod.PAD, 
        InterpolationMethod.LINEAR_RGB, 
        0.0
    )
    .drawRoundRect(20, 30, 200, 60, 20);

// Linner
root
    .addChild(new Shape())
    .graphics
    .beginGradientFill(
        GradientType.LINNER, 
        [0xff0000 , 0x00ff00 , 0x0000ff], 
        [1.0, 1.0, 1.0], 
        [0, 127.5, 255], 
        matrix, 
        SpreadMethod.PAD, 
        InterpolationMethod.LINEAR_RGB, 
        0.0
    )
    .drawRoundRect(20, 130, 200, 60, 20);
```

<p class="codepen" data-height="300" data-theme-id="dark" data-default-tab="js,result" data-slug-hash="xxXRqrQ" 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/xxXRqrQ">
  [Next2D Player] Graphics Gradient 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>

## 線のグラデーションサンプル

```javascript
const { 
    Shape, 
    GradientType, 
    InterpolationMethod,
    SpreadMethod
} = next2d.display;

const { Matrix } = next2d.geom;

const root = next2d.createRootMovieClip(240, 240, 12, {
    "tagId": "container"
});
            
const matrix = new Matrix();
matrix.createGradientBox(200, 40, 0, 0, 0); 

root
    .addChild(new Shape())
    .graphics
    .lineStyle(5)
    .lineGradientStyle(
        GradientType.LINEAR, 
        [0xff0000 , 0x00ff00 , 0x0000ff], 
        [1.0, 1.0, 1.0], 
        [0, 127.5, 255], 
        matrix, 
        SpreadMethod.PAD, 
        InterpolationMethod.LINEAR_RGB, 
        0.0
    )
    .drawRect(10, 50, 200, 40)
    .drawCircle(110, 120, 50);
```

<p class="codepen" data-height="300" data-theme-id="dark" data-default-tab="js,result" data-slug-hash="YzrpZvP" 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/YzrpZvP">
  [Next2D Player] Graphics Gradient Stroke 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>

# 動的な画像の描画

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

const image = new Image();
image.crossOrigin = "Anonymous";

image.addEventListener("load", (event) => 
{
    const { Shape, BitmapData } = next2d.display;
    
    const bitmapData = new BitmapData();
    bitmapData.image = event.target;
    
    root
        .addChild(new Shape())
        .graphics
        .beginBitmapFill(bitmapData)
        .drawRect(0, 0, bitmapData.width, bitmapData.height);
});

image.src = "https://next2d-demonstration.herokuapp.com/image/logo.png";
```

<p class="codepen" data-height="300" data-theme-id="dark" data-default-tab="js,result" data-slug-hash="poWNper" 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/poWNper">
  [Next2D Player] Graphics BitmapData 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>


この他にも任意のパスでの描画や、数学を用いたい描画などが可能です。
少し長くなってしまいましたので、本日はここで終わりにしたいと思います。

明日は、TextFieldクラスを紹介できればと思います。