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

ヘルパー関数サンプルコード

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

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);

See the Pen [Next2D Player] Graphics Helper function sample code by Next2D (@next2d) on CodePen.

グラデーション

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

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

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);

See the Pen [Next2D Player] Graphics Gradient sample code by Next2D (@next2d) on CodePen.

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

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);

See the Pen [Next2D Player] Graphics Gradient Stroke sample code by Next2D (@next2d) on CodePen.

動的な画像の描画

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";

See the Pen [Next2D Player] Graphics BitmapData sample code by Next2D (@next2d) on CodePen.

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

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