@next2d/display 1.14.20

package/dist/Graphics.js

@@ -0,0 +1,2164 @@
+import { GraphicsBitmapFill } from "./GraphicsBitmapFill";
+import { GraphicsGradientFill } from "./GraphicsGradientFill";
+import { $currentPlayer } from "@next2d/util";
+import { $doUpdated, $Math, $Number, $getArray, $poolArray, $toColorInt, $intToRGBA, $clamp, $boundsMatrix, $poolBoundsObject, $Infinity, $getFloat32Array6, $multiplicationMatrix, $poolFloat32Array6, $getBoundsObject, $Float32Array, $getFloat32Array4, $linearGradientXY } from "@next2d/share";
+/**
+ * Graphics クラスには、ベクターシェイプの作成に使用できる一連のメソッドがあります。
+ * 描画をサポートする表示オブジェクトには、Sprite および Shape オブジェクトがあります。
+ * これらの各クラスには、Graphics オブジェクトである graphics プロパティがあります。
+ * 以下は、簡単に使用できるように用意されているヘルパー関数の一例です。
+ * drawRect()、drawRoundRect()、drawCircle()、および drawEllipse()。
+ *
+ * The Graphics class contains a set of methods that you can use to create a vector shape.
+ * Display objects that support drawing include Sprite and Shape objects.
+ * Each of these classes includes a graphics property that is a Graphics object.
+ * The following are among those helper functions provided for ease of use:
+ * drawRect(), drawRoundRect(), drawCircle(), and drawEllipse().
+ *
+ * @class
+ * @memberOf next2d.display
+ */
+export class Graphics {
+    /**
+     * @param {DisplayObject} src
+     *
+     * @constructor
+     * @public
+     */
+    constructor(src = null) {
+        /**
+         * @type {DisplayObject}
+         * @default null
+         * @private
+         */
+        this._$displayObject = src;
+        /**
+         * @type {number}
+         * @default 0
+         * @private
+         */
+        this._$maxAlpha = 0;
+        /**
+         * @type {number}
+         * @default 0
+         * @private
+         */
+        this._$pointerX = 0;
+        /**
+         * @type {number}
+         * @default 0
+         * @private
+         */
+        this._$pointerY = 0;
+        /**
+         * @type {boolean}
+         * @default false
+         * @private
+         */
+        this._$canDraw = false;
+        /**
+         * @type {number}
+         * @default 0
+         * @private
+         */
+        this._$fillType = 0;
+        /**
+         * @type {GraphicsGradientFill}
+         * @default null
+         * @private
+         */
+        this._$fillGradient = null;
+        /**
+         * @type {GraphicsGradientFill}
+         * @default null
+         * @private
+         */
+        this._$fillBitmap = null;
+        /**
+         * @type {number}
+         * @default 0
+         * @private
+         */
+        this._$fillStyleR = 0;
+        /**
+         * @type {number}
+         * @default 0
+         * @private
+         */
+        this._$fillStyleG = 0;
+        /**
+         * @type {number}
+         * @default 0
+         * @private
+         */
+        this._$fillStyleB = 0;
+        /**
+         * @type {number}
+         * @default 0
+         * @private
+         */
+        this._$fillStyleA = 0;
+        /**
+         * @type {boolean}
+         * @default false
+         * @private
+         */
+        this._$doFill = false;
+        /**
+         * @type {number}
+         * @default 0
+         * @private
+         */
+        this._$lineType = 0;
+        /**
+         * @type {GraphicsGradientFill}
+         * @default 0
+         * @private
+         */
+        this._$lineGradient = null;
+        /**
+         * @type {string}
+         * @default none
+         * @private
+         */
+        this._$caps = "none";
+        /**
+         * @type {string}
+         * @default round
+         * @private
+         */
+        this._$joints = "round";
+        /**
+         * @type {number}
+         * @default 0
+         * @private
+         */
+        this._$miterLimit = 0;
+        /**
+         * @type {number}
+         * @default 1
+         * @private
+         */
+        this._$lineWidth = 1;
+        /**
+         * @type {number}
+         * @default 0
+         * @private
+         */
+        this._$lineStyleR = 0;
+        /**
+         * @type {number}
+         * @default 0
+         * @private
+         */
+        this._$lineStyleG = 0;
+        /**
+         * @type {number}
+         * @default 0
+         * @private
+         */
+        this._$lineStyleB = 0;
+        /**
+         * @type {number}
+         * @default 0
+         * @private
+         */
+        this._$lineStyleA = 0;
+        /**
+         * @type {boolean}
+         * @default false
+         * @private
+         */
+        this._$doLine = false;
+        /**
+         * @type {number}
+         * @default Number.MAX_VALUE
+         * @private
+         */
+        this._$xMin = $Number.MAX_VALUE;
+        /**
+         * @type {number}
+         * @default -Number.MAX_VALUE
+         * @private
+         */
+        this._$xMax = -$Number.MAX_VALUE;
+        /**
+         * @type {number}
+         * @default Number.MAX_VALUE
+         * @private
+         */
+        this._$yMin = $Number.MAX_VALUE;
+        /**
+         * @type {number}
+         * @default -Number.MAX_VALUE
+         * @private
+         */
+        this._$yMax = -$Number.MAX_VALUE;
+        /**
+         * @type {Float32Array}
+         * @default null
+         * @private
+         */
+        this._$buffer = null;
+        /**
+         * @type {array}
+         * @default null
+         * @private
+         */
+        this._$recode = null;
+        /**
+         * @type {array}
+         * @default null
+         * @private
+         */
+        this._$fills = null;
+        /**
+         * @type {array}
+         * @default null
+         * @private
+         */
+        this._$lines = null;
+    }
+    /**
+     * @description 指定されたクラスのストリングを返します。
+     *              Returns the string representation of the specified class.
+     *
+     * @return  {string}
+     * @default [class Graphics]
+     * @method
+     * @static
+     */
+    static toString() {
+        return "[class Graphics]";
+    }
+    /**
+     * @description 指定されたクラスの空間名を返します。
+     *              Returns the space name of the specified class.
+     *
+     * @return  {string}
+     * @default next2d.display.Bitmap
+     * @const
+     * @static
+     */
+    static get namespace() {
+        return "next2d.display.Graphics";
+    }
+    /**
+     * @description 指定されたオブジェクトのストリングを返します。
+     *              Returns the string representation of the specified object.
+     *
+     * @return  {string}
+     * @default [object Graphics]
+     * @method
+     * @public
+     */
+    toString() {
+        return "[object Graphics]";
+    }
+    /**
+     * @description 指定されたオブジェクトの空間名を返します。
+     *              Returns the space name of the specified object.
+     *
+     * @return  {string}
+     * @default next2d.display.Graphics
+     * @const
+     * @public
+     */
+    get namespace() {
+        return "next2d.display.Graphics";
+    }
+    /**
+     * @return {number}
+     * @default 0
+     * @const
+     * @static
+     * @private
+     */
+    static get MOVE_TO() {
+        return 0;
+    }
+    /**
+     * @return {number}
+     * @default 1
+     * @const
+     * @static
+     * @private
+     */
+    static get CURVE_TO() {
+        return 1;
+    }
+    /**
+     * @return {number}
+     * @default 2
+     * @const
+     * @static
+     * @private
+     */
+    static get LINE_TO() {
+        return 2;
+    }
+    /**
+     * @return {number}
+     * @default 3
+     * @const
+     * @static
+     * @private
+     */
+    static get CUBIC() {
+        return 3;
+    }
+    /**
+     * @return {number}
+     * @default 4
+     * @const
+     * @static
+     * @private
+     */
+    static get ARC() {
+        return 4;
+    }
+    /**
+     * @return {number}
+     * @default 5
+     * @const
+     * @static
+     * @private
+     */
+    static get FILL_STYLE() {
+        return 5;
+    }
+    /**
+     * @return {number}
+     * @default 6
+     * @const
+     * @static
+     * @private
+     */
+    static get STROKE_STYLE() {
+        return 6;
+    }
+    /**
+     * @return {number}
+     * @default 7
+     * @const
+     * @static
+     * @private
+     */
+    static get END_FILL() {
+        return 7;
+    }
+    /**
+     * @return {number}
+     * @default 8
+     * @const
+     * @static
+     * @private
+     */
+    static get END_STROKE() {
+        return 8;
+    }
+    /**
+     * @return {number}
+     * @default 9
+     * @const
+     * @static
+     * @private
+     */
+    static get BEGIN_PATH() {
+        return 9;
+    }
+    /**
+     * @return {number}
+     * @default 10
+     * @const
+     * @static
+     * @private
+     */
+    static get GRADIENT_FILL() {
+        return 10;
+    }
+    /**
+     * @return {number}
+     * @default 11
+     * @const
+     * @static
+     * @private
+     */
+    static get GRADIENT_STROKE() {
+        return 11;
+    }
+    /**
+     * @return {number}
+     * @default 12
+     * @const
+     * @static
+     * @private
+     */
+    static get CLOSE_PATH() {
+        return 12;
+    }
+    /**
+     * @return {number}
+     * @default 13
+     * @const
+     * @static
+     * @private
+     */
+    static get BITMAP_FILL() {
+        return 13;
+    }
+    /**
+     * @return {number}
+     * @default 14
+     * @const
+     * @static
+     * @private
+     */
+    static get BITMAP_STROKE() {
+        return 14;
+    }
+    /**
+     * @description 描画領域をビットマップイメージで塗りつぶします。
+     *              Fills a drawing area with a bitmap image.
+     *
+     * @param  {BitmapData} bitmap_data
+     * @param  {Matrix}     [matrix=null]
+     * @param  {boolean}    [repeat=true]
+     * @param  {boolean}    [smooth=false]
+     * @return {Graphics}
+     * @method
+     * @public
+     */
+    beginBitmapFill(bitmap_data, matrix = null, repeat = true, smooth = false) {
+        // end fill
+        if (this._$doFill) {
+            this.endFill();
+        }
+        if (!this._$fills) {
+            this._$fills = $getArray();
+        }
+        // start
+        this._$maxAlpha = 1;
+        this._$doFill = true;
+        this._$canDraw = true;
+        // beginPath
+        this._$fills.push(Graphics.BEGIN_PATH);
+        this._$fillType = Graphics.BITMAP_FILL;
+        this._$fillBitmap = new GraphicsBitmapFill(bitmap_data, matrix, repeat, smooth);
+        return this;
+    }
+    /**
+     * @description 描画のときに他の Graphics メソッド（lineTo() や drawCircle() など）
+     *              に対する今後の呼び出しに使用する単純な一色塗りを指定します。
+     *              Specifies a simple one-color fill that subsequent calls
+     *              to other Graphics methods (such as lineTo() or drawCircle()) use when drawing.
+     *
+     * @param  {string|number} [color=0]
+     * @param  {number} [alpha=1.0]
+     * @return {Graphics}
+     * @method
+     * @public
+     */
+    beginFill(color = 0, alpha = 1) {
+        // end fill
+        if (this._$doFill) {
+            this.endFill();
+        }
+        if (!this._$fills) {
+            this._$fills = $getArray();
+        }
+        // valid
+        color = $clamp($toColorInt(color), 0, 0xffffff, 0);
+        alpha = $clamp(alpha, 0, 1, 1);
+        // setup
+        this._$maxAlpha = $Math.max(this._$maxAlpha, alpha);
+        this._$doFill = true;
+        this._$canDraw = true;
+        // beginPath
+        this._$fills.push(Graphics.BEGIN_PATH);
+        // add Fill Style
+        const object = $intToRGBA(color, alpha);
+        this._$fillType = Graphics.FILL_STYLE;
+        this._$fillStyleR = object.R;
+        this._$fillStyleG = object.G;
+        this._$fillStyleB = object.B;
+        this._$fillStyleA = object.A;
+        return this;
+    }
+    /**
+     * @description Graphics の他のメソッド（lineTo()、drawCircle() など）に対する、
+     *              オブジェクトの後続の呼び出しに使用するグラデーション塗りを指定します。
+     *              Specifies a gradient fill used by subsequent calls
+     *              to other Graphics methods (such as lineTo() or drawCircle()) for the object.
+     *
+     * @param  {string} type
+     * @param  {array}  colors
+     * @param  {array}  alphas
+     * @param  {array}  ratios
+     * @param  {Matrix} [matrix=null]
+     * @param  {string} [spread_method=SpreadMethod.PAD]
+     * @param  {string} [interpolation_method=InterpolationMethod.RGB]
+     * @param  {number} [focal_point_ratio=0]
+     * @return {Graphics}
+     * @method
+     * @public
+     */
+    beginGradientFill(type, colors, alphas, ratios, matrix = null, spread_method = "pad", interpolation_method = "rgb", focal_point_ratio = 0) {
+        if (this._$doFill) {
+            this.endFill();
+        }
+        if (!this._$fills) {
+            this._$fills = $getArray();
+        }
+        // setup
+        for (let idx = 0; idx < alphas.length; ++idx) {
+            this._$maxAlpha = $Math.max(this._$maxAlpha, alphas[idx]);
+        }
+        this._$doFill = true;
+        this._$canDraw = true;
+        // beginPath
+        this._$fills.push(Graphics.BEGIN_PATH);
+        this._$fillType = Graphics.GRADIENT_FILL;
+        this._$fillGradient = new GraphicsGradientFill(type, colors, alphas, ratios, matrix, spread_method, interpolation_method, focal_point_ratio);
+        return this;
+    }
+    /**
+     * @description この Graphics オブジェクトに描画されているグラフィックをクリアし、
+     *              塗りと線のスタイルの設定をリセットします。
+     *              Clears the graphics that were drawn to this Graphics object,
+     *              and resets fill and line style settings.
+     *
+     * @return {Graphics}
+     * @method
+     * @public
+     */
+    clear() {
+        // param clear
+        this._$maxAlpha = 0;
+        this._$pointerX = 0;
+        this._$pointerY = 0;
+        this._$canDraw = false;
+        // fill
+        this._$fillType = 0;
+        this._$fillGradient = null;
+        this._$fillBitmap = null;
+        this._$fillStyleR = 0;
+        this._$fillStyleG = 0;
+        this._$fillStyleB = 0;
+        this._$fillStyleA = 0;
+        this._$doFill = false;
+        // stroke
+        this._$lineType = 0;
+        this._$lineGradient = null;
+        this._$caps = "none";
+        this._$joints = "round";
+        this._$miterLimit = 0;
+        this._$lineWidth = 1;
+        this._$lineStyleR = 0;
+        this._$lineStyleG = 0;
+        this._$lineStyleB = 0;
+        this._$lineStyleA = 0;
+        this._$doLine = false;
+        // bounds size
+        this._$xMin = $Number.MAX_VALUE;
+        this._$xMax = -$Number.MAX_VALUE;
+        this._$yMin = $Number.MAX_VALUE;
+        this._$yMax = -$Number.MAX_VALUE;
+        // init array
+        if (this._$recode) {
+            $poolArray(this._$recode);
+        }
+        if (this._$fills) {
+            $poolArray(this._$fills);
+        }
+        if (this._$lines) {
+            $poolArray(this._$lines);
+        }
+        this._$buffer = null;
+        this._$recode = null;
+        this._$fills = null;
+        this._$lines = null;
+        // restart
+        this._$restart();
+        return this;
+    }
+    /**
+     * @description すべての描画コマンドをソース Graphics オブジェクトから、呼び出し Graphics オブジェクトにコピーします。
+     *              Copies all of drawing commands from the source Graphics object into the calling Graphics object.
+     *
+     * @return {Graphics}
+     * @method
+     * @public
+     */
+    clone() {
+        const graphics = new Graphics();
+        graphics.copyFrom(this);
+        return graphics;
+    }
+    /**
+     * @description すべての描画コマンドをソース Graphics オブジェクトから、呼び出し Graphics オブジェクトにコピーします。
+     *              Copies all of drawing commands from the source Graphics object into the calling Graphics object.
+     *
+     * @param  {Graphics} graphics
+     * @return {void}
+     * @method
+     * @public
+     */
+    copyFrom(graphics) {
+        if (graphics._$fillGradient) {
+            this._$fillGradient = graphics._$fillGradient.clone();
+        }
+        if (graphics._$fillBitmap) {
+            this._$fillBitmap = graphics._$fillBitmap.clone();
+        }
+        // fill
+        this._$doFill = graphics._$doFill;
+        this._$fillType = graphics._$fillType;
+        this._$fillStyleR = graphics._$fillStyleR;
+        this._$fillStyleG = graphics._$fillStyleG;
+        this._$fillStyleB = graphics._$fillStyleB;
+        this._$fillStyleA = graphics._$fillStyleA;
+        if (graphics._$lineGradient) {
+            this._$lineGradient = graphics._$lineGradient.clone();
+        }
+        // stroke
+        this._$doLine = graphics._$doLine;
+        this._$lineType = graphics._$lineType;
+        this._$caps = graphics._$caps;
+        this._$joints = graphics._$joints;
+        this._$miterLimit = graphics._$miterLimit;
+        this._$lineWidth = graphics._$lineWidth;
+        this._$lineStyleR = graphics._$lineStyleR;
+        this._$lineStyleG = graphics._$lineStyleG;
+        this._$lineStyleB = graphics._$lineStyleB;
+        this._$lineStyleA = graphics._$lineStyleA;
+        // bounds
+        this._$xMin = graphics._$xMin;
+        this._$xMax = graphics._$xMax;
+        this._$yMin = graphics._$yMin;
+        this._$yMax = graphics._$yMax;
+        // params
+        this._$maxAlpha = graphics._$maxAlpha;
+        this._$pointerX = graphics._$pointerX;
+        this._$pointerY = graphics._$pointerY;
+        this._$canDraw = graphics._$canDraw;
+        // path params
+        if (graphics._$fills) {
+            this._$fills = graphics._$fills.slice(0);
+        }
+        if (graphics._$lines) {
+            this._$lines = graphics._$lines.slice(0);
+        }
+        if (graphics._$recode) {
+            this._$recode = graphics._$recode.slice(0);
+        }
+    }
+    /**
+     * @description 現在の描画位置から指定されたアンカーポイントに 3 次ベジェ曲線を描画します。
+     *              Draws a cubic Bezier curve from the current drawing position to the specified anchor point.
+     *
+     * @param  {number} control_x1
+     * @param  {number} control_y1
+     * @param  {number} control_x2
+     * @param  {number} control_y2
+     * @param  {number} anchor_x
+     * @param  {number} anchor_y
+     * @return {Graphics}
+     * @method
+     * @public
+     */
+    cubicCurveTo(control_x1, control_y1, control_x2, control_y2, anchor_x, anchor_y) {
+        anchor_x = +anchor_x || 0;
+        anchor_y = +anchor_y || 0;
+        if (this._$pointerX === anchor_x && this._$pointerY === anchor_y) {
+            return this;
+        }
+        control_x1 = +control_x1 || 0;
+        control_y1 = +control_y1 || 0;
+        control_x2 = +control_x2 || 0;
+        control_y2 = +control_y2 || 0;
+        // set bounds
+        this._$setBounds(control_x1, control_y1);
+        this._$setBounds(control_x2, control_y2);
+        this._$setBounds(anchor_x, anchor_y);
+        this._$margePath($getArray(Graphics.CUBIC, control_x1, control_y1, control_x2, control_y2, anchor_x, anchor_y));
+        this._$pointerX = anchor_x;
+        this._$pointerY = anchor_y;
+        // restart
+        this._$restart();
+        return this;
+    }
+    /**
+     * @description (controlX, controlY) で指定されたコントロールポイントを使用し、
+     *              現在の描画位置から (anchorX, anchorY) まで、現在の線のスタイルで 2 次ベジェ曲線を描画します。
+     *              Draws a quadratic Bezier curve using the current line style from
+     *              the current drawing position to (anchorX, anchorY)
+     *              and using the control point that (controlX, controlY) specifies.
+     *
+     * @param  {number} control_x
+     * @param  {number} control_y
+     * @param  {number} anchor_x
+     * @param  {number} anchor_y
+     * @return {Graphics}
+     * @method
+     * @public
+     */
+    curveTo(control_x, control_y, anchor_x, anchor_y) {
+        anchor_x = +anchor_x || 0;
+        anchor_y = +anchor_y || 0;
+        if (this._$pointerX === anchor_x && this._$pointerY === anchor_y) {
+            return this;
+        }
+        control_x = +control_x || 0;
+        control_y = +control_y || 0;
+        this._$setBounds(control_x, control_y);
+        this._$setBounds(anchor_x, anchor_y);
+        this._$margePath($getArray(Graphics.CURVE_TO, control_x, control_y, anchor_x, anchor_y));
+        this._$pointerX = anchor_x;
+        this._$pointerY = anchor_y;
+        // restart
+        this._$restart();
+        return this;
+    }
+    /**
+     * @description 円を描画します。
+     *              Draws a circle.
+     *
+     * @param  {number} x
+     * @param  {number} y
+     * @param  {number} radius
+     * @return {Graphics}
+     * @method
+     * @public
+     */
+    drawCircle(x, y, radius) {
+        x = +x || 0;
+        y = +y || 0;
+        radius = +radius || 0;
+        this._$setBounds(x - radius, y - radius);
+        this._$setBounds(x + radius, y + radius);
+        this._$margePath($getArray(Graphics.MOVE_TO, x + radius, y, Graphics.ARC, x, y, radius));
+        this._$pointerX = x;
+        this._$pointerY = y;
+        // restart
+        this._$restart();
+        return this;
+    }
+    /**
+     * @description 楕円を描画します。
+     *              Draws an ellipse.
+     *
+     * @param  {number} x
+     * @param  {number} y
+     * @param  {number} width
+     * @param  {number} height
+     * @return {Graphics}
+     * @method
+     * @public
+     */
+    drawEllipse(x, y, width, height) {
+        x = +x || 0;
+        y = +y || 0;
+        width = +width || 0;
+        height = +height || 0;
+        const hw = width / 2; // half width
+        const hh = height / 2; // half height
+        const x0 = x + hw;
+        const y0 = y + hh;
+        const x1 = x + width;
+        const y1 = y + height;
+        const c = 4 / 3 * ($Math.SQRT2 - 1);
+        const cw = c * hw;
+        const ch = c * hh;
+        return this
+            .moveTo(x0, y)
+            .cubicCurveTo(x0 + cw, y, x1, y0 - ch, x1, y0)
+            .cubicCurveTo(x1, y0 + ch, x0 + cw, y1, x0, y1)
+            .cubicCurveTo(x0 - cw, y1, x, y0 + ch, x, y0)
+            .cubicCurveTo(x, y0 - ch, x0 - cw, y, x0, y);
+    }
+    /**
+     * @description 矩形を描画します。
+     *              Draws a rectangle.
+     *
+     * @param  {number} x
+     * @param  {number} y
+     * @param  {number} width
+     * @param  {number} height
+     * @return {Graphics}
+     * @method
+     * @public
+     */
+    drawRect(x, y, width, height) {
+        // valid
+        x = +x || 0;
+        y = +y || 0;
+        width = +width || 0;
+        height = +height || 0;
+        const xMax = x + width;
+        const yMax = y + height;
+        return this
+            .moveTo(x, y)
+            .lineTo(x, yMax)
+            .lineTo(xMax, yMax)
+            .lineTo(xMax, y)
+            .lineTo(x, y);
+    }
+    /**
+     * @description 角丸矩形を描画します。
+     *              Draws a rounded rectangle.
+     *
+     * @param  {number} x
+     * @param  {number} y
+     * @param  {number} width
+     * @param  {number} height
+     * @param  {number} ellipse_width
+     * @param  {number} [ellipse_height=NaN]
+     * @return {Graphics}
+     * @method
+     * @public
+     */
+    drawRoundRect(x, y, width, height, ellipse_width, ellipse_height = NaN) {
+        x = +x || 0;
+        y = +y || 0;
+        width = +width || 0;
+        height = +height || 0;
+        ellipse_width = +ellipse_width || 0;
+        ellipse_height = +ellipse_height || ellipse_width;
+        const hew = ellipse_width / 2;
+        const heh = ellipse_height / 2;
+        const c = 4 / 3 * ($Math.SQRT2 - 1);
+        const cw = c * hew;
+        const ch = c * heh;
+        const dx0 = x + hew;
+        const dx1 = x + width;
+        const dx2 = dx1 - hew;
+        const dy0 = y + heh;
+        const dy1 = y + height;
+        const dy2 = dy1 - heh;
+        return this
+            .moveTo(dx0, y)
+            .lineTo(dx2, y)
+            .cubicCurveTo(dx2 + cw, y, dx1, dy0 - ch, dx1, dy0)
+            .lineTo(dx1, dy2)
+            .cubicCurveTo(dx1, dy2 + ch, dx2 + cw, dy1, dx2, dy1)
+            .lineTo(dx0, dy1)
+            .cubicCurveTo(dx0 - cw, dy1, x, dy2 + ch, x, dy2)
+            .lineTo(x, dy0)
+            .cubicCurveTo(x, dy0 - ch, dx0 - cw, y, dx0, y);
+    }
+    /**
+     * @description beginFill()、beginGradientFill()、または beginBitmapFill() メソッドへの
+     *              最後の呼び出し以降に追加された線と曲線に塗りを適用します。
+     *              Applies a fill to the lines and curves that were added since
+     *              the last call to the beginFill(), beginGradientFill(),
+     *              or beginBitmapFill() method.
+     *
+     * @return {Graphics}
+     * @method
+     * @public
+     */
+    endFill() {
+        if (this._$doFill && this._$fills && this._$fills.length > 7) {
+            if (!this._$recode) {
+                this._$recode = $getArray();
+            }
+            if (this._$fills[2] !== this._$fills[this._$fills.length - 2]
+                || this._$fills[3] !== this._$fills[this._$fills.length - 1]) {
+                this._$fills.push(Graphics.LINE_TO, this._$fills[2], this._$fills[3]);
+            }
+            this._$recode.push(...this._$fills);
+            // fill
+            switch (this._$fillType) {
+                case Graphics.FILL_STYLE:
+                    this._$recode.push(this._$fillType, this._$fillStyleR, this._$fillStyleG, this._$fillStyleB, this._$fillStyleA, Graphics.END_FILL);
+                    break;
+                case Graphics.GRADIENT_FILL:
+                    if (this._$fillGradient) {
+                        this._$recode.push(this._$fillType, ...this._$fillGradient.toArray());
+                    }
+                    break;
+                case Graphics.BITMAP_FILL:
+                    if (this._$fillBitmap) {
+                        this._$recode.push(this._$fillType, ...this._$fillBitmap.toArray());
+                    }
+                    break;
+            }
+        }
+        if (this._$fills) {
+            $poolArray(this._$fills);
+            this._$fills = null;
+        }
+        // reset
+        this._$fillType = 0;
+        this._$fillGradient = null;
+        this._$fillBitmap = null;
+        this._$fillStyleR = 0;
+        this._$fillStyleG = 0;
+        this._$fillStyleB = 0;
+        this._$fillStyleA = 0;
+        this._$doFill = false;
+        // restart
+        this._$restart();
+        return this;
+    }
+    /**
+     * @description lineStyle()、または lineGradientStyle() メソッドへの
+     *              最後の呼び出し以降に追加された線と曲線に塗りを適用します。
+     *              Applies a fill to the lines and curves that were added since
+     *              the last call to the beginFill() or beginGradientFill() method.
+     *
+     * @return {Graphics}
+     * @method
+     * @public
+     */
+    endLine() {
+        if (this._$doLine && this._$lines) {
+            if (!this._$recode) {
+                this._$recode = $getArray();
+            }
+            this._$recode.push(...this._$lines);
+            // clear
+            $poolArray(this._$lines);
+            this._$lines = null;
+            // fill
+            switch (this._$lineType) {
+                case Graphics.STROKE_STYLE:
+                    this._$recode.push(this._$lineType, this._$lineWidth, this._$caps, this._$joints, this._$miterLimit, this._$lineStyleR, this._$lineStyleG, this._$lineStyleB, this._$lineStyleA, Graphics.END_STROKE);
+                    break;
+                case Graphics.GRADIENT_STROKE:
+                    if (this._$lineGradient) {
+                        this._$recode.push(this._$lineType, this._$lineWidth, this._$caps, this._$joints, this._$miterLimit, ...this._$lineGradient.toArray());
+                    }
+                    break;
+                case Graphics.BITMAP_STROKE:
+                    if (this._$fillBitmap) {
+                        this._$recode.push(this._$lineType, this._$lineWidth, this._$caps, this._$joints, this._$miterLimit, ...this._$fillBitmap.toArray());
+                    }
+                    break;
+            }
+        }
+        // reset
+        this._$lineType = 0;
+        this._$lineWidth = 0;
+        this._$lineGradient = null;
+        this._$lineStyleR = 0;
+        this._$lineStyleG = 0;
+        this._$lineStyleB = 0;
+        this._$lineStyleA = 0;
+        this._$caps = "none";
+        this._$joints = "round";
+        this._$miterLimit = 0;
+        this._$doLine = false;
+        // restart
+        this._$restart();
+        return this;
+    }
+    /**
+     * @description 線の描画で、線として使用するビットマップを指定します。
+     *              Specifies a bitmap to use for the line stroke when drawing lines.
+     *
+     * @param  {BitmapData} bitmap_data
+     * @param  {Matrix}     [matrix=null]
+     * @param  {boolean}    [repeat=true]
+     * @param  {boolean}    [smooth=false]
+     * @return {Graphics}
+     * @method
+     * @public
+     */
+    lineBitmapStyle(bitmap_data, matrix = null, repeat = true, smooth = false) {
+        // end fill
+        if (this._$doLine) {
+            this.endLine();
+        }
+        if (!this._$lines) {
+            this._$lines = $getArray();
+        }
+        // start
+        this._$maxAlpha = 1;
+        this._$doLine = true;
+        this._$canDraw = true;
+        // beginPath
+        this._$lines.push(Graphics.BEGIN_PATH);
+        this._$lineType = Graphics.BITMAP_STROKE;
+        this._$fillBitmap = new GraphicsBitmapFill(bitmap_data, matrix, repeat, smooth);
+        return this;
+    }
+    /**
+     * @description 線の描画で使用するグラデーションを指定します。
+     *              Specifies a gradient to use for the stroke when drawing lines.
+     *
+     * @param  {string} type
+     * @param  {array}  colors
+     * @param  {array}  alphas
+     * @param  {array}  ratios
+     * @param  {Matrix} [matrix=null]
+     * @param  {string} [spread_method=SpreadMethod.PAD]
+     * @param  {string} [interpolation_method=InterpolationMethod.RGB]
+     * @param  {number} [focal_point_ratio=0]
+     * @return {Graphics}
+     * @method
+     * @public
+     */
+    lineGradientStyle(type, colors, alphas, ratios, matrix = null, spread_method = "pad", interpolation_method = "rgb", focal_point_ratio = 0) {
+        if (!this._$doLine) {
+            return this;
+        }
+        if (!this._$lines) {
+            this._$lines = $getArray();
+        }
+        // setup
+        for (let idx = 0; idx < alphas.length; ++idx) {
+            this._$maxAlpha = $Math.max(this._$maxAlpha, alphas[idx]);
+        }
+        // beginPath
+        this._$lines.push(Graphics.BEGIN_PATH);
+        this._$lineType = Graphics.GRADIENT_STROKE;
+        this._$lineGradient = new GraphicsGradientFill(type, colors, alphas, ratios, matrix, spread_method, interpolation_method, focal_point_ratio);
+        return this;
+    }
+    /**
+     * @description lineTo() メソッドや drawCircle() メソッドなど、
+     *              Graphics のメソッドの後続の呼び出しに使用する線スタイルを指定します。
+     *              Specifies a line style used for subsequent calls
+     *              to Graphics methods such as the lineTo() method
+     *              or the drawCircle() method.
+     *
+     * @param  {number}  [thickness=NaN]
+     * @param  {number|string} [color=0]
+     * @param  {number}  [alpha=1]
+     * @param  {string}  [caps=CapsStyle.NONE]
+     * @param  {string}  [joints=JointStyle.ROUND]
+     * @param  {number}  [miter_limit=3]
+     * @return {Graphics}
+     * @method
+     * @public
+     */
+    lineStyle(thickness = 1, color = 0, alpha = 1, caps = "round", joints = "round", miter_limit = 3) {
+        if (this._$doLine) {
+            this.endLine();
+        }
+        if (!this._$lines) {
+            this._$lines = $getArray();
+        }
+        color = $clamp($toColorInt(color), 0, 0xffffff, 0);
+        alpha = $clamp(+alpha, 0, 1, 1);
+        // setup
+        this._$maxAlpha = $Math.max(this._$maxAlpha, alpha);
+        this._$doLine = true;
+        this._$canDraw = true;
+        // beginPath
+        if (this._$pointerX || this._$pointerY) {
+            this._$lines.push(Graphics.BEGIN_PATH, Graphics.MOVE_TO, this._$pointerX, this._$pointerY);
+        }
+        else {
+            this._$lines.push(Graphics.BEGIN_PATH);
+        }
+        // add Fill Style
+        const object = $intToRGBA(color, alpha);
+        // color
+        this._$lineType = Graphics.STROKE_STYLE;
+        this._$lineStyleR = object.R;
+        this._$lineStyleG = object.G;
+        this._$lineStyleB = object.B;
+        this._$lineStyleA = object.A;
+        // param
+        this._$lineWidth = thickness;
+        this._$caps = `${caps}`;
+        this._$joints = `${joints}`;
+        // set miter limit
+        if (this._$joints === "miter") {
+            this._$miterLimit = miter_limit;
+        }
+        return this;
+    }
+    /**
+     * @description 現在の描画位置から (x, y) まで、現在の線のスタイルを使用して線を描画します。
+     *              その後で、現在の描画位置は (x, y) に設定されます。
+     *              Draws a line using the current line style from the current drawing position to (x, y);
+     *              the current drawing position is then set to (x, y).
+     *
+     * @param   {number} x
+     * @param   {number} y
+     * @returns {Graphics}
+     * @method
+     * @public
+     */
+    lineTo(x, y) {
+        x = +x || 0;
+        y = +y || 0;
+        if (this._$pointerX === x && this._$pointerY === y) {
+            return this;
+        }
+        this._$setBounds(x, y);
+        this._$margePath($getArray(Graphics.LINE_TO, x, y));
+        this._$pointerX = x;
+        this._$pointerY = y;
+        // restart
+        this._$restart();
+        return this;
+    }
+    /**
+     * @description 現在の描画位置を (x, y) に移動します。
+     *              Moves the current drawing position to (x, y).
+     *
+     * @param   {number} x
+     * @param   {number} y
+     * @returns {Graphics}
+     * @method
+     * @public
+     */
+    moveTo(x, y) {
+        x = +x || 0;
+        y = +y || 0;
+        this._$pointerX = x;
+        this._$pointerY = y;
+        this._$setBounds(x, y);
+        let duplication = false;
+        if (this._$doFill && this._$fills) {
+            const isMove = this._$fills[this._$fills.length - 3] === Graphics.MOVE_TO;
+            if (isMove) {
+                duplication = true;
+                this._$fills[this._$fills.length - 2] = x;
+                this._$fills[this._$fills.length - 1] = y;
+            }
+        }
+        if (this._$doLine && this._$lines) {
+            const isMove = this._$lines[this._$lines.length - 3] === Graphics.MOVE_TO;
+            if (isMove) {
+                duplication = true;
+                this._$lines[this._$lines.length - 2] = x;
+                this._$lines[this._$lines.length - 1] = y;
+            }
+        }
+        if (!duplication) {
+            this._$margePath($getArray(Graphics.MOVE_TO, x, y));
+        }
+        // restart
+        this._$restart();
+        return this;
+    }
+    /**
+     * @param  {CanvasToWebGLContext} context
+     * @param  {Float32Array} matrix
+     * @return {void}
+     * @method
+     * @private
+     */
+    _$clip(context, matrix) {
+        // size
+        const baseBounds = this._$getBounds();
+        const bounds = $boundsMatrix(baseBounds, matrix);
+        $poolBoundsObject(baseBounds);
+        const width = $Math.ceil($Math.abs(bounds.xMax - bounds.xMin));
+        const height = $Math.ceil($Math.abs(bounds.yMax - bounds.yMin));
+        $poolBoundsObject(bounds);
+        switch (true) {
+            case width === 0:
+            case height === 0:
+            case width === -$Infinity:
+            case height === -$Infinity:
+            case width === $Infinity:
+            case height === $Infinity:
+                return;
+            default:
+                break;
+        }
+        context.reset();
+        context.setTransform(matrix[0], matrix[1], matrix[2], matrix[3], matrix[4], matrix[5]);
+        this._$doDraw(context, null, true);
+        context.clip();
+    }
+    /**
+     * @param  {CanvasToWebGLContext} context
+     * @param  {Float32Array} matrix
+     * @param  {Float32Array} color_transform
+     * @param  {string} [blend_mode=BlendMode.NORMAL]
+     * @param  {array}  [filters=null]
+     * @return {void}
+     * @method
+     * @private
+     */
+    _$draw(context, matrix, color_transform, blend_mode = "normal", filters = null) {
+        if (!this._$maxAlpha) {
+            return;
+        }
+        const alpha = $clamp(color_transform[3] + color_transform[7] / 255, 0, 1);
+        const displayObject = this._$displayObject;
+        // set grid data
+        let hasGrid = displayObject._$scale9Grid !== null;
+        // 9スライスを有効にしたオブジェクトが回転・傾斜成分を含む場合は
+        // 9スライスは無効になる
+        const rawMatrix = displayObject._$transform._$rawMatrix();
+        if (hasGrid) {
+            hasGrid = hasGrid
+                && $Math.abs(rawMatrix[1]) < 0.001
+                && $Math.abs(rawMatrix[2]) < 0.0001;
+        }
+        // size
+        const baseBounds = this._$getBounds();
+        const bounds = $boundsMatrix(baseBounds, matrix);
+        const xMax = bounds.xMax;
+        const xMin = bounds.xMin;
+        const yMax = bounds.yMax;
+        const yMin = bounds.yMin;
+        $poolBoundsObject(bounds);
+        const width = $Math.ceil($Math.abs(xMax - xMin));
+        const height = $Math.ceil($Math.abs(yMax - yMin));
+        switch (true) {
+            case width === 0:
+            case height === 0:
+            case width === -$Infinity:
+            case height === -$Infinity:
+            case width === $Infinity:
+            case height === $Infinity:
+                return;
+            default:
+                break;
+        }
+        // cache current buffer
+        const manager = context.frameBuffer;
+        const currentAttachment = manager.currentAttachment;
+        if (!currentAttachment
+            || xMin > currentAttachment.width
+            || yMin > currentAttachment.height) {
+            return;
+        }
+        let xScale = +$Math.sqrt(matrix[0] * matrix[0]
+            + matrix[1] * matrix[1]);
+        if (!$Number.isInteger(xScale)) {
+            const value = xScale.toString();
+            const index = value.indexOf("e");
+            if (index !== -1) {
+                xScale = +value.slice(0, index);
+            }
+            xScale = +xScale.toFixed(4);
+        }
+        let yScale = +$Math.sqrt(matrix[2] * matrix[2]
+            + matrix[3] * matrix[3]);
+        if (!$Number.isInteger(yScale)) {
+            const value = yScale.toString();
+            const index = value.indexOf("e");
+            if (index !== -1) {
+                yScale = +value.slice(0, index);
+            }
+            yScale = +yScale.toFixed(4);
+        }
+        if (0 > xMin + width || 0 > yMin + height) {
+            if (filters && filters.length
+                && displayObject._$canApply(filters)) {
+                let filterBounds = $getBoundsObject(0, width, 0, height);
+                for (let idx = 0; idx < filters.length; ++idx) {
+                    filterBounds = filters[idx]
+                        ._$generateFilterRect(filterBounds, xScale, yScale);
+                }
+                if (0 > filterBounds.xMin + filterBounds.xMax
+                    || 0 > filterBounds.yMin + filterBounds.yMax) {
+                    $poolBoundsObject(filterBounds);
+                    return;
+                }
+                $poolBoundsObject(filterBounds);
+            }
+            else {
+                return;
+            }
+        }
+        // get cache
+        const keys = $getArray(xScale, yScale);
+        let uniqueId = `${displayObject._$instanceId}`;
+        if (!hasGrid
+            && displayObject._$loaderInfo
+            && displayObject._$characterId) {
+            uniqueId = `${displayObject._$loaderInfo._$id}@${displayObject._$characterId}`;
+        }
+        const player = $currentPlayer();
+        const cacheStore = player.cacheStore;
+        const cacheKeys = cacheStore.generateKeys(uniqueId, keys, color_transform);
+        $poolArray(keys);
+        let texture = cacheStore.get(cacheKeys);
+        if (!texture) {
+            const currentAttachment = manager.currentAttachment;
+            // resize
+            let width = $Math.ceil($Math.abs(baseBounds.xMax - baseBounds.xMin) * xScale);
+            let height = $Math.ceil($Math.abs(baseBounds.yMax - baseBounds.yMin) * yScale);
+            const textureScale = context._$getTextureScale(width, height);
+            if (textureScale < 1) {
+                width *= textureScale;
+                height *= textureScale;
+            }
+            // create cache buffer
+            const attachment = manager
+                .createCacheAttachment(width, height, true);
+            context._$bind(attachment);
+            // reset
+            context.reset();
+            context.setTransform(xScale, 0, 0, yScale, -baseBounds.xMin * xScale, -baseBounds.yMin * yScale);
+            if (hasGrid) {
+                const mScale = player.scaleX;
+                const baseMatrix = $getFloat32Array6(mScale, 0, 0, mScale, 0, 0);
+                const pMatrix = $multiplicationMatrix(baseMatrix, rawMatrix);
+                $poolFloat32Array6(baseMatrix);
+                const aMatrixBase = displayObject
+                    ._$parent
+                    ._$transform
+                    .concatenatedMatrix
+                    ._$matrix;
+                $poolFloat32Array6(aMatrixBase);
+                const aMatrix = $getFloat32Array6(aMatrixBase[0], aMatrixBase[1], aMatrixBase[2], aMatrixBase[3], aMatrixBase[4] * mScale - xMin, aMatrixBase[5] * mScale - yMin);
+                const apMatrix = $multiplicationMatrix(aMatrix, pMatrix);
+                const aOffsetX = apMatrix[4] - (matrix[4] - xMin);
+                const aOffsetY = apMatrix[5] - (matrix[5] - yMin);
+                $poolFloat32Array6(apMatrix);
+                const parentBounds = $boundsMatrix(baseBounds, pMatrix);
+                const parentXMax = +parentBounds.xMax;
+                const parentXMin = +parentBounds.xMin;
+                const parentYMax = +parentBounds.yMax;
+                const parentYMin = +parentBounds.yMin;
+                const parentWidth = $Math.ceil($Math.abs(parentXMax - parentXMin));
+                const parentHeight = $Math.ceil($Math.abs(parentYMax - parentYMin));
+                $poolBoundsObject(parentBounds);
+                context.grid.enable(parentXMin, parentYMin, parentWidth, parentHeight, baseBounds, displayObject._$scale9Grid, mScale, pMatrix[0], pMatrix[1], pMatrix[2], pMatrix[3], pMatrix[4], pMatrix[5], aMatrix[0], aMatrix[1], aMatrix[2], aMatrix[3], aMatrix[4] - aOffsetX, aMatrix[5] - aOffsetY);
+                $poolFloat32Array6(pMatrix);
+                $poolFloat32Array6(aMatrix);
+            }
+            // plain alpha
+            color_transform[3] = 1;
+            this._$doDraw(context, color_transform, false);
+            if (hasGrid) {
+                context.grid.disable();
+            }
+            texture = manager.getTextureFromCurrentAttachment();
+            // set cache
+            cacheStore.set(cacheKeys, texture);
+            // release buffer
+            manager.releaseAttachment(attachment, false);
+            // end draw and reset current buffer
+            context._$bind(currentAttachment);
+        }
+        let drawFilter = false;
+        let offsetX = 0;
+        let offsetY = 0;
+        if (filters && filters.length
+            && displayObject._$canApply(filters)) {
+            drawFilter = true;
+            texture = displayObject._$drawFilter(context, texture, matrix, filters, width, height);
+            if (texture) {
+                offsetX = texture._$offsetX;
+                offsetY = texture._$offsetY;
+            }
+        }
+        const radianX = $Math.atan2(matrix[1], matrix[0]);
+        const radianY = $Math.atan2(-matrix[2], matrix[3]);
+        if (!drawFilter && (radianX || radianY)) {
+            const tx = baseBounds.xMin * xScale;
+            const ty = baseBounds.yMin * yScale;
+            const cosX = $Math.cos(radianX);
+            const sinX = $Math.sin(radianX);
+            const cosY = $Math.cos(radianY);
+            const sinY = $Math.sin(radianY);
+            context.setTransform(cosX, sinX, -sinY, cosY, tx * cosX - ty * sinY + matrix[4], tx * sinX + ty * cosY + matrix[5]);
+        }
+        else {
+            context.setTransform(1, 0, 0, 1, xMin - offsetX, yMin - offsetY);
+        }
+        // draw
+        if (texture) {
+            context.reset();
+            context.globalAlpha = alpha;
+            context.imageSmoothingEnabled = true;
+            context.globalCompositeOperation = blend_mode;
+            context.drawImage(texture, 0, 0, texture.width, texture.height, color_transform);
+        }
+        // pool
+        $poolArray(cacheKeys);
+        $poolBoundsObject(baseBounds);
+    }
+    /**
+     * @param  {CanvasToWebGLContext} context
+     * @param  {Float32Array}         [color_transform=null]
+     * @param  {boolean}              [is_clip=false]
+     * @return {void}
+     * @method
+     * @private
+     */
+    _$doDraw(context, color_transform = null, is_clip = false) {
+        // draw
+        context.reset();
+        context.beginPath();
+        this._$runCommand(context, color_transform, is_clip);
+    }
+    /**
+     * @param  {CanvasRenderingContext2D} context
+     * @param  {Float32Array} matrix
+     * @param  {object}  options
+     * @param  {boolean} [is_clip=false]
+     * @return {boolean}
+     * @method
+     * @private
+     */
+    _$hit(context, matrix, options, is_clip = false) {
+        context.beginPath();
+        context.setTransform(matrix[0], matrix[1], matrix[2], matrix[3], matrix[4], matrix[5]);
+        return this._$runCommand(context, null, is_clip, options);
+    }
+    /**
+     * @return {object}
+     * @method
+     * @private
+     */
+    _$getBounds() {
+        const displayObject = this._$displayObject;
+        if (displayObject && displayObject._$bounds) {
+            return $getBoundsObject(displayObject._$bounds.xMin, displayObject._$bounds.xMax, displayObject._$bounds.yMin, displayObject._$bounds.yMax);
+        }
+        return $getBoundsObject(this._$xMin, this._$xMax, this._$yMin, this._$yMax);
+    }
+    /**
+     * @return {void}
+     * @method
+     * @private
+     */
+    _$restart() {
+        if (this._$displayObject) {
+            this._$displayObject._$posted = false;
+            this._$buffer = null;
+            if (!this._$displayObject._$isUpdated()) {
+                this._$displayObject._$doChanged();
+                $doUpdated();
+                const player = $currentPlayer();
+                const cacheStore = player.cacheStore;
+                cacheStore.removeCache(this._$displayObject._$instanceId);
+                if (this._$displayObject._$characterId) {
+                    cacheStore.removeCache(this._$displayObject._$characterId);
+                }
+            }
+        }
+    }
+    /**
+     * @param  {number} [x=0]
+     * @param  {number} [y=0]
+     * @return {void}
+     * @method
+     * @private
+     */
+    _$setBounds(x = 0, y = 0) {
+        this._$setFillBounds(x, y);
+        if (this._$doLine) {
+            this._$setLineBounds(x, y);
+        }
+    }
+    /**
+     * @param  {number} x
+     * @param  {number} y
+     * @return {void}
+     * @method
+     * @private
+     */
+    _$setFillBounds(x = 0, y = 0) {
+        this._$xMin = $Math.min(this._$xMin, x);
+        this._$xMax = $Math.max(this._$xMax, x);
+        this._$yMin = $Math.min(this._$yMin, y);
+        this._$yMax = $Math.max(this._$yMax, y);
+    }
+    /**
+     * @param  {number} x
+     * @param  {number} y
+     * @return {void}
+     * @method
+     * @private
+     */
+    _$setLineBounds(x = 0, y = 0) {
+        this._$xMin = $Math.min(this._$xMin, $Math.min(x, this._$pointerX));
+        this._$xMax = $Math.max(this._$xMax, $Math.max(x, this._$pointerX));
+        this._$yMin = $Math.min(this._$yMin, $Math.min(y, this._$pointerY));
+        this._$yMax = $Math.max(this._$yMax, $Math.max(y, this._$pointerY));
+        // correction
+        const half = this._$lineWidth / 2;
+        const radian90 = 0.5 * $Math.PI;
+        const radian1 = $Math.atan2(y - this._$pointerY, x - this._$pointerX); // to end point
+        const radian2 = $Math.atan2(this._$pointerY - y, this._$pointerX - x); // to start point
+        const radian3 = radian1 + radian90;
+        const radian4 = radian1 - radian90;
+        const radian5 = radian2 + radian90;
+        const radian6 = radian2 - radian90;
+        // init
+        let x1 = x + half;
+        let x2 = -half + x;
+        let x3 = this._$pointerX + half;
+        let x4 = -half + this._$pointerX;
+        let y1 = y + half;
+        let y2 = -half + y;
+        let y3 = this._$pointerY + half;
+        let y4 = -half + this._$pointerY;
+        this._$xMin = $Math.min(this._$xMin, $Math.min(x1, $Math.min(x2, $Math.min(x3, x4))));
+        this._$xMax = $Math.max(this._$xMax, $Math.max(x1, $Math.max(x2, $Math.max(x3, x4))));
+        this._$yMin = $Math.min(this._$yMin, $Math.min(y1, $Math.min(y2, $Math.min(y3, y4))));
+        this._$yMax = $Math.max(this._$yMax, $Math.max(y1, $Math.max(y2, $Math.max(y3, y4))));
+        // pointer x
+        if ($Math.abs(radian3) % radian90 !== 0) {
+            x1 = x + $Math.cos(radian3) * half;
+        }
+        if ($Math.abs(radian4) % radian90 !== 0) {
+            x2 = x + $Math.cos(radian4) * half;
+        }
+        if ($Math.abs(radian5) % radian90 !== 0) {
+            x3 = this._$pointerX + $Math.cos(radian5) * half;
+        }
+        if ($Math.abs(radian6) % radian90 !== 0) {
+            x4 = this._$pointerX + $Math.cos(radian6) * half;
+        }
+        // pointer y
+        if (radian3 && $Math.abs(radian3) % $Math.PI !== 0) {
+            y1 = y + $Math.sin(radian3) * half;
+        }
+        if (radian4 && $Math.abs(radian4) % $Math.PI !== 0) {
+            y2 = y + $Math.sin(radian4) * half;
+        }
+        if (radian5 && $Math.abs(radian5) % $Math.PI !== 0) {
+            y3 = this._$pointerY + $Math.sin(radian5) * half;
+        }
+        if (radian6 && $Math.abs(radian6) % $Math.PI !== 0) {
+            y4 = this._$pointerY + $Math.sin(radian6) * half;
+        }
+        this._$xMin = $Math.min(this._$xMin, $Math.min(x1, $Math.min(x2, $Math.min(x3, x4))));
+        this._$xMax = $Math.max(this._$xMax, $Math.max(x1, $Math.max(x2, $Math.max(x3, x4))));
+        this._$yMin = $Math.min(this._$yMin, $Math.min(y1, $Math.min(y2, $Math.min(y3, y4))));
+        this._$yMax = $Math.max(this._$yMax, $Math.max(y1, $Math.max(y2, $Math.max(y3, y4))));
+        // case
+        switch (this._$caps) {
+            case "round":
+                if ($Math.abs(radian1) % radian90 !== 0) {
+                    const rx1 = x + $Math.cos(radian1) * half;
+                    this._$xMin = $Math.min(this._$xMin, rx1);
+                    this._$xMax = $Math.max(this._$xMax, rx1);
+                }
+                if (radian1 && $Math.abs(radian1) % $Math.PI !== 0) {
+                    const ry1 = y + $Math.sin(radian1) * half;
+                    this._$yMin = $Math.min(this._$yMin, ry1);
+                    this._$yMax = $Math.max(this._$yMax, ry1);
+                }
+                if ($Math.abs(radian2) % radian90 !== 0) {
+                    const rx2 = this._$pointerX + $Math.cos(radian2) * half;
+                    this._$xMin = $Math.min(this._$xMin, rx2);
+                    this._$xMax = $Math.max(this._$xMax, rx2);
+                }
+                if (radian2 && $Math.abs(radian2) % $Math.PI !== 0) {
+                    const ry2 = this._$pointerY + $Math.sin(radian2) * half;
+                    this._$yMin = $Math.min(this._$yMin, ry2);
+                    this._$yMax = $Math.max(this._$yMax, ry2);
+                }
+                break;
+            case "square":
+                if ($Math.abs(radian1) % radian90 !== 0) {
+                    const r1cos = $Math.cos(radian1) * half;
+                    const rx1 = x1 + r1cos;
+                    const rx2 = x2 + r1cos;
+                    this._$xMin = $Math.min(this._$xMin, $Math.min(rx1, rx2));
+                    this._$xMax = $Math.max(this._$xMax, $Math.max(rx1, rx2));
+                }
+                if ($Math.abs(radian2) % radian90 !== 0) {
+                    const r2cos = $Math.cos(radian2) * half;
+                    const rx3 = x3 + r2cos;
+                    const rx4 = x4 + r2cos;
+                    this._$xMin = $Math.min(this._$xMin, $Math.min(rx3, rx4));
+                    this._$xMax = $Math.max(this._$xMax, $Math.max(rx3, rx4));
+                }
+                if (radian1 && $Math.abs(radian1) % $Math.PI !== 0) {
+                    const r1sin = $Math.sin(radian1) * half;
+                    const ry1 = y1 + r1sin;
+                    const ry2 = y2 + r1sin;
+                    this._$yMin = $Math.min(this._$yMin, $Math.min(ry1, ry2));
+                    this._$yMax = $Math.max(this._$yMax, $Math.max(ry1, ry2));
+                }
+                if (radian2 && $Math.abs(radian2) % $Math.PI !== 0) {
+                    const r2sin = $Math.sin(radian2) * half;
+                    const ry3 = y3 + r2sin;
+                    const ry4 = y4 + r2sin;
+                    this._$yMin = $Math.min(this._$yMin, $Math.min(ry3, ry4));
+                    this._$yMax = $Math.max(this._$yMax, $Math.max(ry3, ry4));
+                }
+                break;
+            default:
+                break;
+        }
+    }
+    /**
+     * @param {array} data
+     * @method
+     * @private
+     */
+    _$margePath(data) {
+        if (this._$doFill && this._$fills) {
+            this._$fills.push(...data);
+        }
+        if (this._$doLine && this._$lines) {
+            this._$lines.push(...data);
+        }
+        $poolArray(data);
+    }
+    /**
+     * @return {Float32Array}
+     * @method
+     * @private
+     */
+    _$getRecodes() {
+        // fixed logic
+        if (this._$doLine) {
+            this.endLine();
+        }
+        // fixed logic
+        if (this._$doFill) {
+            this.endFill();
+        }
+        if (!this._$recode) {
+            this._$recode = $getArray();
+        }
+        if (!this._$buffer) {
+            const array = $getArray();
+            const recode = this._$recode;
+            for (let idx = 0; idx < recode.length;) {
+                const type = recode[idx++];
+                array.push(type);
+                switch (type) {
+                    case Graphics.BEGIN_PATH:
+                    case Graphics.END_FILL:
+                    case Graphics.END_STROKE:
+                    case Graphics.CLOSE_PATH:
+                        break;
+                    case Graphics.MOVE_TO:
+                    case Graphics.LINE_TO:
+                        array.push(recode[idx++], recode[idx++]);
+                        break;
+                    case Graphics.CURVE_TO:
+                    case Graphics.FILL_STYLE:
+                        array.push(recode[idx++], recode[idx++], recode[idx++], recode[idx++]);
+                        break;
+                    case Graphics.CUBIC:
+                        array.push(recode[idx++], recode[idx++], recode[idx++], recode[idx++], recode[idx++], recode[idx++]);
+                        break;
+                    case Graphics.STROKE_STYLE:
+                        {
+                            array.push(recode[idx++]);
+                            const lineCap = recode[idx++];
+                            switch (lineCap) {
+                                case "none":
+                                    array.push(0);
+                                    break;
+                                case "round":
+                                    array.push(1);
+                                    break;
+                                case "square":
+                                    array.push(2);
+                                    break;
+                            }
+                            const lineJoin = recode[idx++];
+                            switch (lineJoin) {
+                                case "bevel":
+                                    array.push(0);
+                                    break;
+                                case "miter":
+                                    array.push(1);
+                                    break;
+                                case "round":
+                                    array.push(2);
+                                    break;
+                            }
+                            array.push(recode[idx++], // MITER LIMIT
+                            recode[idx++], recode[idx++], recode[idx++], recode[idx++]);
+                        }
+                        break;
+                    case Graphics.ARC:
+                        array.push(recode[idx++], recode[idx++], recode[idx++]);
+                        break;
+                    case Graphics.GRADIENT_FILL:
+                        {
+                            const type = recode[idx++];
+                            const stops = recode[idx++];
+                            const matrix = recode[idx++];
+                            const spread = recode[idx++];
+                            const interpolation = recode[idx++];
+                            const focal = recode[idx++];
+                            array.push(type === "linear" ? 0 : 1);
+                            array.push(stops.length);
+                            for (let idx = 0; idx < stops.length; ++idx) {
+                                const color = stops[idx];
+                                array.push(color.ratio, color.R, color.G, color.B, color.A);
+                            }
+                            array.push(matrix[0], matrix[1], matrix[2], matrix[3], matrix[4], matrix[5]);
+                            switch (spread) {
+                                case "reflect":
+                                    array.push(0);
+                                    break;
+                                case "repeat":
+                                    array.push(1);
+                                    break;
+                                default:
+                                    array.push(2);
+                                    break;
+                            }
+                            array.push(interpolation === "linearRGB" ? 0 : 1);
+                            array.push(focal);
+                        }
+                        break;
+                    case Graphics.GRADIENT_STROKE:
+                        {
+                            array.push(recode[idx++]);
+                            const lineCap = recode[idx++];
+                            switch (lineCap) {
+                                case "none":
+                                    array.push(0);
+                                    break;
+                                case "round":
+                                    array.push(1);
+                                    break;
+                                case "square":
+                                    array.push(2);
+                                    break;
+                            }
+                            const lineJoin = recode[idx++];
+                            switch (lineJoin) {
+                                case "bevel":
+                                    array.push(0);
+                                    break;
+                                case "miter":
+                                    array.push(1);
+                                    break;
+                                case "round":
+                                    array.push(2);
+                                    break;
+                            }
+                            // miterLimit
+                            array.push(recode[idx++]);
+                            const type = recode[idx++];
+                            const stops = recode[idx++];
+                            const matrix = recode[idx++];
+                            const spread = recode[idx++];
+                            const interpolation = recode[idx++];
+                            const focal = recode[idx++];
+                            array.push(type === "linear" ? 0 : 1);
+                            array.push(stops.length);
+                            for (let idx = 0; idx < stops.length; ++idx) {
+                                const color = stops[idx];
+                                array.push(color.ratio, color.R, color.G, color.B, color.A);
+                            }
+                            array.push(matrix[0], matrix[1], matrix[2], matrix[3], matrix[4], matrix[5]);
+                            switch (spread) {
+                                case "reflect":
+                                    array.push(0);
+                                    break;
+                                case "repeat":
+                                    array.push(1);
+                                    break;
+                                default:
+                                    array.push(2);
+                                    break;
+                            }
+                            array.push(interpolation === "linearRGB" ? 0 : 1);
+                            array.push(focal);
+                        }
+                        break;
+                    case Graphics.BITMAP_FILL:
+                        {
+                            const bitmapData = recode[idx++];
+                            let buffer;
+                            if (bitmapData.image !== null || bitmapData.canvas !== null) {
+                                const player = $currentPlayer();
+                                const cacheStore = player.cacheStore;
+                                const canvas = cacheStore.getCanvas();
+                                const width = bitmapData.width;
+                                const height = bitmapData.height;
+                                canvas.width = width;
+                                canvas.height = height;
+                                const context = canvas.getContext("2d");
+                                if (!context) {
+                                    throw new Error("the context is null.");
+                                }
+                                // @ts-ignore
+                                context.drawImage(bitmapData.image || bitmapData.canvas, 0, 0);
+                                buffer = new Uint8Array(context.getImageData(0, 0, width, height).data);
+                                cacheStore.destroy(context);
+                            }
+                            else if (bitmapData._$buffer !== null) {
+                                buffer = bitmapData._$buffer;
+                            }
+                            else {
+                                break;
+                            }
+                            array.push(bitmapData.width, bitmapData.height, this._$xMax - this._$xMin, this._$yMax - this._$yMin, buffer.length);
+                            for (let idx = 0; idx < buffer.length; ++idx) {
+                                array.push(buffer[idx]);
+                            }
+                            const matrix = recode[idx++];
+                            if (matrix) {
+                                array.push(matrix[0], matrix[1], matrix[2], matrix[3], matrix[4], matrix[5]);
+                            }
+                            else {
+                                array.push(1, 0, 0, 1, 0, 0);
+                            }
+                            const repeat = recode[idx++];
+                            array.push(repeat ? 1 : 0);
+                            const smooth = recode[idx++];
+                            array.push(smooth ? 1 : 0);
+                        }
+                        break;
+                    case Graphics.BITMAP_STROKE:
+                        {
+                            array.push(recode[idx++]);
+                            const lineCap = recode[idx++];
+                            switch (lineCap) {
+                                case "none":
+                                    array.push(0);
+                                    break;
+                                case "round":
+                                    array.push(1);
+                                    break;
+                                case "square":
+                                    array.push(2);
+                                    break;
+                            }
+                            const lineJoin = recode[idx++];
+                            switch (lineJoin) {
+                                case "bevel":
+                                    array.push(0);
+                                    break;
+                                case "miter":
+                                    array.push(1);
+                                    break;
+                                case "round":
+                                    array.push(2);
+                                    break;
+                            }
+                            // MITER LIMIT
+                            array.push(recode[idx++]);
+                            const bitmapData = recode[idx++];
+                            let buffer;
+                            if (bitmapData.image !== null || bitmapData.canvas !== null) {
+                                const player = $currentPlayer();
+                                const cacheStore = player.cacheStore;
+                                const canvas = cacheStore.getCanvas();
+                                const width = bitmapData.width;
+                                const height = bitmapData.height;
+                                canvas.width = width;
+                                canvas.height = height;
+                                const context = canvas.getContext("2d");
+                                if (!context) {
+                                    throw new Error("the context is null.");
+                                }
+                                // @ts-ignore
+                                context.drawImage(bitmapData.image || bitmapData.canvas, 0, 0);
+                                buffer = new Uint8Array(context.getImageData(0, 0, width, height).data);
+                                cacheStore.destroy(context);
+                            }
+                            else if (bitmapData._$buffer !== null) {
+                                buffer = bitmapData._$buffer;
+                            }
+                            else {
+                                break;
+                            }
+                            array.push(bitmapData.width, bitmapData.height, this._$xMax - this._$xMin, this._$yMax - this._$yMin, buffer.length);
+                            for (let idx = 0; idx < buffer.length; ++idx) {
+                                array.push(buffer[idx]);
+                            }
+                            const matrix = recode[idx++];
+                            if (matrix) {
+                                array.push(matrix[0], matrix[1], matrix[2], matrix[3], matrix[4], matrix[5]);
+                            }
+                            else {
+                                array.push(1, 0, 0, 1, 0, 0);
+                            }
+                            const repeat = recode[idx++];
+                            array.push(repeat ? 1 : 0);
+                            const smooth = recode[idx++];
+                            array.push(smooth ? 1 : 0);
+                        }
+                        break;
+                    default:
+                        break;
+                }
+            }
+            this._$buffer = new $Float32Array(array);
+        }
+        return this._$buffer.slice();
+    }
+    /**
+     * @param  {CanvasToWebGLContext|CanvasRenderingContext2D} context
+     * @param  {Float32Array} [color_transform=null]
+     * @param  {boolean}      [is_clip=false]
+     * @param  {object}       [options=null]
+     * @return {boolean}
+     * @method
+     * @private
+     */
+    _$runCommand(context, color_transform = null, is_clip = false, options = null) {
+        // fixed logic
+        if (this._$doLine) {
+            this.endLine();
+        }
+        // fixed logic
+        if (this._$doFill) {
+            this.endFill();
+        }
+        if (!this._$recode) {
+            return false;
+        }
+        const recode = this._$recode;
+        const length = recode.length;
+        for (let idx = 0; idx < length;) {
+            switch (recode[idx++]) {
+                case Graphics.BEGIN_PATH:
+                    context.beginPath();
+                    break;
+                case Graphics.MOVE_TO:
+                    context.moveTo(recode[idx++], recode[idx++]);
+                    break;
+                case Graphics.LINE_TO:
+                    context.lineTo(recode[idx++], recode[idx++]);
+                    break;
+                case Graphics.CURVE_TO:
+                    context.quadraticCurveTo(recode[idx++], recode[idx++], recode[idx++], recode[idx++]);
+                    break;
+                case Graphics.FILL_STYLE:
+                    {
+                        if (is_clip || options) {
+                            idx += 4;
+                            continue;
+                        }
+                        const color = $getFloat32Array4();
+                        color[0] = recode[idx++] / 255;
+                        color[1] = recode[idx++] / 255;
+                        color[2] = recode[idx++] / 255;
+                        color[3] = recode[idx++] / 255;
+                        if (color_transform !== null) {
+                            if (color_transform[3] !== 1 || color_transform[7] !== 0) {
+                                color[3] = $Math.max(0, $Math.min(color[3] * color_transform[3] + color_transform[7], 255)) / 255;
+                            }
+                        }
+                        context.fillStyle = color;
+                    }
+                    break;
+                case Graphics.END_FILL:
+                    if (options && "isPointInPath" in context
+                        && context.isPointInPath(options.x, options.y)) {
+                        return true;
+                    }
+                    if (!is_clip && !options) {
+                        context.fill();
+                    }
+                    break;
+                case Graphics.STROKE_STYLE:
+                    {
+                        if (is_clip || options) {
+                            idx += 8;
+                            continue;
+                        }
+                        context.lineWidth = recode[idx++];
+                        context.lineCap = recode[idx++];
+                        context.lineJoin = recode[idx++];
+                        context.miterLimit = recode[idx++];
+                        const color = $getFloat32Array4();
+                        color[0] = recode[idx++] / 255;
+                        color[1] = recode[idx++] / 255;
+                        color[2] = recode[idx++] / 255;
+                        color[3] = recode[idx++] / 255;
+                        if (color_transform !== null) {
+                            if (color_transform[3] !== 1 || color_transform[7] !== 0) {
+                                color[3] = $Math.max(0, $Math.min(color[3] * color_transform[3] + color_transform[7], 255)) / 255;
+                            }
+                        }
+                        context.strokeStyle = color;
+                    }
+                    break;
+                case Graphics.END_STROKE:
+                    if (options && "isPointInStroke" in context
+                        && context.isPointInStroke(options.x, options.y)) {
+                        return true;
+                    }
+                    if (!is_clip && !options) {
+                        context.stroke();
+                    }
+                    break;
+                case Graphics.CLOSE_PATH:
+                    context.closePath();
+                    break;
+                case Graphics.CUBIC:
+                    context.bezierCurveTo(recode[idx++], recode[idx++], recode[idx++], recode[idx++], recode[idx++], recode[idx++]);
+                    break;
+                case Graphics.ARC:
+                    context.arc(recode[idx++], recode[idx++], recode[idx++], 0, 2 * $Math.PI);
+                    break;
+                case Graphics.GRADIENT_FILL:
+                    {
+                        if (options && "isPointInPath" in context
+                            && context.isPointInPath(options.x, options.y)) {
+                            return true;
+                        }
+                        if (is_clip || options
+                            || context instanceof CanvasRenderingContext2D // fixed logic
+                        ) {
+                            idx += 6;
+                            continue;
+                        }
+                        const type = recode[idx++];
+                        const stops = recode[idx++];
+                        const matrix = recode[idx++];
+                        const spread = recode[idx++];
+                        const interpolation = recode[idx++];
+                        const focal = recode[idx++];
+                        let css;
+                        if (type === "linear") {
+                            const xy = $linearGradientXY(matrix);
+                            css = context.createLinearGradient(xy[0], xy[1], xy[2], xy[3], interpolation, spread);
+                        }
+                        else {
+                            context.save();
+                            context.transform(matrix[0], matrix[1], matrix[2], matrix[3], matrix[4], matrix[5]);
+                            css = context.createRadialGradient(0, 0, 0, 0, 0, 819.2, interpolation, spread, focal);
+                        }
+                        for (let idx = 0; idx < stops.length; ++idx) {
+                            const color = stops[idx];
+                            let alpha = color.A;
+                            if (color_transform) {
+                                if (color_transform[3] !== 1 || color_transform[7] !== 0) {
+                                    alpha = $Math.max(0, $Math.min(color.A * color_transform[3] + color_transform[7], 255)) | 0;
+                                }
+                            }
+                            css.addColorStop(color.ratio, $getFloat32Array4(color.R, color.G, color.B, alpha));
+                        }
+                        context.fillStyle = css;
+                        context.fill();
+                        if (type === "radial") {
+                            context.restore();
+                        }
+                    }
+                    break;
+                case Graphics.GRADIENT_STROKE:
+                    {
+                        if (options && "isPointInStroke" in context
+                            && context.isPointInStroke(options.x, options.y)) {
+                            return true;
+                        }
+                        if (is_clip || options
+                            || context instanceof CanvasRenderingContext2D // fixed logic
+                        ) {
+                            idx += 12;
+                            continue;
+                        }
+                        context.lineWidth = recode[idx++];
+                        context.lineCap = recode[idx++];
+                        context.lineJoin = recode[idx++];
+                        context.miterLimit = recode[idx++];
+                        const type = recode[idx++];
+                        const stops = recode[idx++];
+                        const matrix = recode[idx++];
+                        const spread = recode[idx++];
+                        const interpolation = recode[idx++];
+                        const focal = recode[idx++];
+                        let css;
+                        if (type === "linear") {
+                            const xy = $linearGradientXY(matrix);
+                            css = context.createLinearGradient(xy[0], xy[1], xy[2], xy[3], interpolation, spread);
+                        }
+                        else {
+                            context.save();
+                            context.transform(matrix[0], matrix[1], matrix[2], matrix[3], matrix[4], matrix[5]);
+                            css = context.createRadialGradient(0, 0, 0, 0, 0, 819.2, interpolation, spread, focal);
+                        }
+                        for (let idx = 0; idx < stops.length; ++idx) {
+                            const color = stops[idx];
+                            let alpha = color.A;
+                            if (color_transform) {
+                                if (color_transform[3] !== 1 || color_transform[7] !== 0) {
+                                    alpha = $Math.max(0, $Math.min(color.A * color_transform[3] + color_transform[7], 255)) | 0;
+                                }
+                            }
+                            css.addColorStop(color.ratio, $getFloat32Array4(color.R, color.G, color.B, alpha));
+                        }
+                        context.strokeStyle = css;
+                        context.stroke();
+                        if (type === "radial") {
+                            context.restore();
+                        }
+                    }
+                    break;
+                case Graphics.BITMAP_FILL:
+                    {
+                        if (options && "isPointInPath" in context
+                            && context.isPointInPath(options.x, options.y)) {
+                            return true;
+                        }
+                        if (is_clip || options
+                            || context instanceof CanvasRenderingContext2D // fixed logic
+                        ) {
+                            idx += 6;
+                            continue;
+                        }
+                        context.save();
+                        const bitmapData = recode[idx++];
+                        const matrix = recode[idx++];
+                        const repeat = recode[idx++];
+                        const smooth = recode[idx++];
+                        if (matrix) {
+                            context.transform(matrix[0], matrix[1], matrix[2], matrix[3], matrix[4], matrix[5]);
+                        }
+                        const texture = bitmapData.getTexture();
+                        if (!texture || !color_transform) {
+                            break;
+                        }
+                        if (!repeat
+                            && bitmapData.width === this._$xMax - this._$xMin
+                            && bitmapData.height === this._$yMax - this._$yMin) {
+                            context.drawImage(texture, 0, 0, bitmapData.width, bitmapData.height);
+                        }
+                        else {
+                            context.fillStyle = context.createPattern(texture, repeat, color_transform);
+                            context.imageSmoothingEnabled = smooth;
+                            context.fill();
+                        }
+                        // restore
+                        context.restore();
+                        context.imageSmoothingEnabled = false;
+                    }
+                    break;
+                case Graphics.BITMAP_STROKE:
+                    {
+                        if (options && "isPointInStroke" in context
+                            && context.isPointInStroke(options.x, options.y)) {
+                            return true;
+                        }
+                        if (is_clip || options
+                            || context instanceof CanvasRenderingContext2D // fixed logic
+                        ) {
+                            idx += 9;
+                            continue;
+                        }
+                        context.save();
+                        context.lineWidth = recode[idx++];
+                        context.lineCap = recode[idx++];
+                        context.lineJoin = recode[idx++];
+                        context.miterLimit = recode[idx++];
+                        const bitmapData = recode[idx++];
+                        const matrix = recode[idx++];
+                        const repeat = recode[idx++];
+                        const smooth = recode[idx++];
+                        if (matrix) {
+                            context.transform(matrix[0], matrix[1], matrix[2], matrix[3], matrix[4], matrix[5]);
+                        }
+                        const texture = bitmapData.getTexture();
+                        if (!texture || !color_transform) {
+                            break;
+                        }
+                        context.strokeStyle = context.createPattern(texture, repeat, color_transform);
+                        context.imageSmoothingEnabled = smooth;
+                        context.stroke();
+                        // restore
+                        context.restore();
+                        context.imageSmoothingEnabled = false;
+                    }
+                    break;
+                default:
+                    break;
+            }
+        }
+        return false;
+    }
+}