@next2d/display 1.15.0 → 1.17.0

package/dist/Graphics.d.ts

@@ -1,6 +1,6 @@
 import type { BitmapData } from "./BitmapData";
 import type { Matrix } from "@next2d/geom";
-import type { GraphicsParentImpl, CapsStyleImpl, JointStyleImpl, FilterArrayImpl, BlendModeImpl, BoundsImpl, PlayerHitObjectImpl, SpreadMethodImpl, GradientTypeImpl, InterpolationMethodImpl } from "@next2d/interface";
+import type { GraphicsParentImpl, CapsStyleImpl, JointStyleImpl, FilterArrayImpl, BlendModeImpl, BoundsImpl, PlayerHitObjectImpl, SpreadMethodImpl, GradientTypeImpl, InterpolationMethodImpl, CachePositionImpl, ShapeModeImpl } from "@next2d/interface";
 import type { CanvasToWebGLContext } from "@next2d/webgl";
 /**
  * Graphics クラスには、ベクターシェイプの作成に使用できる一連のメソッドがあります。
@@ -51,6 +51,12 @@ export declare class Graphics {
     _$recode: any[] | null;
     private _$fills;
     private _$lines;
+    private _$uniqueKey;
+    private _$cacheKeys;
+    private _$cacheParams;
+    _$bitmapId: number;
+    _$mode: ShapeModeImpl;
+    _$posted: boolean;
     /**
      * @param {DisplayObject} src
      *
@@ -491,6 +497,12 @@ export declare class Graphics {
      * @private
      */
     _$draw(context: CanvasToWebGLContext, matrix: Float32Array, color_transform: Float32Array, blend_mode?: BlendModeImpl, filters?: FilterArrayImpl | null): void;
+    /**
+     * @return {WebGLTexture | null}
+     * @method
+     * @private
+     */
+    _$createBitmapTexture(context: CanvasToWebGLContext, position: CachePositionImpl, x_scale: number, y_scale: number, width: number, height: number): WebGLTexture | null;
     /**
      * @param  {CanvasToWebGLContext} context
      * @param  {Float32Array}         [color_transform=null]
@@ -552,6 +564,12 @@ export declare class Graphics {
      * @private
      */
     _$margePath(data: any[]): void;
+    /**
+     * @return {string}
+     * @method
+     * @private
+     */
+    _$createCacheKey(): string;
     /**
      * @return {Float32Array}
      * @method

package/dist/Graphics.js

@@ -1,7 +1,7 @@
 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";
+import { $cacheStore, $doUpdated, $Math, $Number, $getArray, $poolArray, $toColorInt, $intToRGBA, $clamp, $boundsMatrix, $poolBoundsObject, $Infinity, $getFloat32Array6, $multiplicationMatrix, $poolFloat32Array6, $getBoundsObject, $Float32Array, $getFloat32Array4, $linearGradientXY } from "@next2d/share";
 /**
  * Graphics クラスには、ベクターシェイプの作成に使用できる一連のメソッドがあります。
  * 描画をサポートする表示オブジェクトには、Sprite および Shape オブジェクトがあります。
@@ -218,6 +218,40 @@ export class Graphics {
          * @private
          */
         this._$lines = null;
+        /**
+         * @type {string}
+         * @default ""
+         * @private
+         */
+        this._$uniqueKey = "";
+        /**
+         * @type {array}
+         * @private
+         */
+        this._$cacheKeys = $getArray();
+        /**
+         * @type {array}
+         * @private
+         */
+        this._$cacheParams = $getArray(0, 0, 0);
+        /**
+         * @type {number}
+         * @default 0
+         * @private
+         */
+        this._$bitmapId = 0;
+        /**
+         * @type {string}
+         * @default "shape"
+         * @private
+         */
+        this._$mode = "shape";
+        /**
+         * @type {boolean}
+         * @default false
+         * @private
+         */
+        this._$posted = false;
     }
     /**
      * @description 指定されたクラスのストリングを返します。
@@ -538,6 +572,9 @@ export class Graphics {
         this._$pointerX = 0;
         this._$pointerY = 0;
         this._$canDraw = false;
+        this._$bitmapId = 0;
+        this._$mode = "shape";
+        this._$posted = false;
         // fill
         this._$fillType = 0;
         this._$fillGradient = null;
@@ -578,6 +615,10 @@ export class Graphics {
         this._$recode = null;
         this._$fills = null;
         this._$lines = null;
+        // cache clear
+        this._$cacheKeys.length = 0;
+        this._$uniqueKey = "";
+        this._$cacheParams.fill(0);
         // restart
         this._$restart();
         return this;
@@ -735,6 +776,7 @@ export class Graphics {
         x = +x || 0;
         y = +y || 0;
         radius = +radius || 0;
+        radius = $Math.round(radius);
         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));
@@ -761,6 +803,8 @@ export class Graphics {
         y = +y || 0;
         width = +width || 0;
         height = +height || 0;
+        width = $Math.round(width);
+        height = $Math.round(height);
         const hw = width / 2; // half width
         const hh = height / 2; // half height
         const x0 = x + hw;
@@ -795,8 +839,8 @@ export class Graphics {
         y = +y || 0;
         width = +width || 0;
         height = +height || 0;
-        const xMax = x + width;
-        const yMax = y + height;
+        const xMax = $Math.round(x + width);
+        const yMax = $Math.round(y + height);
         return this
             .moveTo(x, y)
             .lineTo(x, yMax)
@@ -825,6 +869,10 @@ export class Graphics {
         height = +height || 0;
         ellipse_width = +ellipse_width || 0;
         ellipse_height = +ellipse_height || ellipse_width;
+        width = $Math.round(width);
+        height = $Math.round(height);
+        ellipse_width = $Math.round(ellipse_width);
+        ellipse_height = $Math.round(ellipse_height);
         const hew = ellipse_width / 2;
         const heh = ellipse_height / 2;
         const c = 4 / 3 * ($Math.SQRT2 - 1);
@@ -1216,14 +1264,6 @@ export class Graphics {
             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)) {
@@ -1244,55 +1284,95 @@ export class Graphics {
             }
             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;
+        const canApply = filters !== null
+            && filters.length > 0
+            && displayObject._$canApply(filters);
+        let filterBounds = $getBoundsObject(0, width, 0, height);
+        if (canApply && filters) {
+            for (let idx = 0; idx < filters.length; ++idx) {
+                filterBounds = filters[idx]
+                    ._$generateFilterRect(filterBounds, xScale, yScale);
             }
         }
+        // cache current buffer
+        const manager = context.frameBuffer;
+        const currentAttachment = manager.currentAttachment;
+        if (!currentAttachment
+            || xMin - filterBounds.xMin > currentAttachment.width
+            || yMin - filterBounds.yMin > currentAttachment.height) {
+            $poolBoundsObject(filterBounds);
+            return;
+        }
+        if (0 > xMin + filterBounds.xMax || 0 > yMin + filterBounds.yMax) {
+            $poolBoundsObject(filterBounds);
+            return;
+        }
+        $poolBoundsObject(filterBounds);
         // get cache
-        const keys = $getArray(xScale, yScale);
-        let uniqueId = `${displayObject._$instanceId}`;
-        if (!hasGrid
-            && displayObject._$loaderInfo
-            && displayObject._$characterId) {
-            uniqueId = `${displayObject._$loaderInfo._$id}@${displayObject._$characterId}`;
+        if (this._$uniqueKey === "") {
+            if (!hasGrid
+                && displayObject._$loaderInfo
+                && displayObject._$characterId) {
+                this._$uniqueKey = `${displayObject._$loaderInfo._$id}@${this._$bitmapId || displayObject._$characterId}`;
+            }
+            else {
+                this._$uniqueKey = this._$createCacheKey();
+            }
         }
         const player = $currentPlayer();
-        const cacheStore = player.cacheStore;
-        const cacheKeys = cacheStore.generateKeys(uniqueId, keys, color_transform);
-        $poolArray(keys);
-        let texture = cacheStore.get(cacheKeys);
-        if (!texture) {
+        if (this._$mode === "bitmap") {
+            if (!this._$cacheKeys.length) {
+                this._$cacheKeys = $cacheStore.generateKeys(this._$uniqueKey);
+            }
+        }
+        else {
+            if (!this._$cacheKeys.length
+                || this._$cacheParams[0] !== xScale
+                || this._$cacheParams[1] !== yScale
+                || this._$cacheParams[2] !== color_transform[7]) {
+                const keys = $getArray();
+                keys[0] = xScale;
+                keys[1] = yScale;
+                this._$cacheKeys = $cacheStore.generateKeys(this._$uniqueKey, keys, color_transform);
+                $poolArray(keys);
+                this._$cacheParams[0] = xScale;
+                this._$cacheParams[1] = yScale;
+                this._$cacheParams[2] = color_transform[7];
+            }
+        }
+        context.cachePosition = $cacheStore.get(this._$cacheKeys);
+        if (!context.cachePosition) {
             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;
+            if (currentAttachment && currentAttachment.mask) {
+                context.stopStencil();
             }
-            // create cache buffer
-            const attachment = manager
-                .createCacheAttachment(width, height, true);
-            context._$bind(attachment);
+            let width = 0;
+            let height = 0;
+            if (this._$mode === "shape") {
+                width = $Math.ceil($Math.abs(baseBounds.xMax - baseBounds.xMin) * xScale);
+                height = $Math.ceil($Math.abs(baseBounds.yMax - baseBounds.yMin) * yScale);
+                // resize
+                const textureScale = context._$getTextureScale(width, height);
+                if (textureScale < 1) {
+                    width *= textureScale;
+                    height *= textureScale;
+                }
+            }
+            else {
+                width = $Math.ceil($Math.abs(baseBounds.xMax - baseBounds.xMin));
+                height = $Math.ceil($Math.abs(baseBounds.yMax - baseBounds.yMin));
+            }
+            // create cache position
+            context.cachePosition = manager.createCachePosition(width, height);
+            context.bindRenderBuffer(context.cachePosition);
             // reset
             context.reset();
-            context.setTransform(xScale, 0, 0, yScale, -baseBounds.xMin * xScale, -baseBounds.yMin * yScale);
+            if (this._$mode === "shape") {
+                context.setTransform(xScale, 0, 0, yScale, -baseBounds.xMin * xScale, -baseBounds.yMin * yScale);
+            }
+            else {
+                context.setTransform(1, 0, 0, 1, -baseBounds.xMin, -baseBounds.yMin);
+            }
             if (hasGrid) {
                 const mScale = player.scaleX;
                 const baseMatrix = $getFloat32Array6(mScale, 0, 0, mScale, 0, 0);
@@ -1303,8 +1383,8 @@ export class Graphics {
                     ._$transform
                     .concatenatedMatrix
                     ._$matrix;
-                $poolFloat32Array6(aMatrixBase);
                 const aMatrix = $getFloat32Array6(aMatrixBase[0], aMatrixBase[1], aMatrixBase[2], aMatrixBase[3], aMatrixBase[4] * mScale - xMin, aMatrixBase[5] * mScale - yMin);
+                $poolFloat32Array6(aMatrixBase);
                 const apMatrix = $multiplicationMatrix(aMatrix, pMatrix);
                 const aOffsetX = apMatrix[4] - (matrix[4] - xMin);
                 const aOffsetY = apMatrix[5] - (matrix[5] - yMin);
@@ -1317,62 +1397,103 @@ export class Graphics {
                 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);
+                const scale9Grid = displayObject._$scale9Grid;
+                const grid = {
+                    "x": scale9Grid.x,
+                    "y": scale9Grid.y,
+                    "w": scale9Grid.width,
+                    "h": scale9Grid.height
+                };
+                context.grid.enable(parentXMin, parentYMin, parentWidth, parentHeight, baseBounds, grid, 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;
+            // execute
             this._$doDraw(context, color_transform, false);
             if (hasGrid) {
                 context.grid.disable();
             }
-            texture = manager.getTextureFromCurrentAttachment();
+            manager.transferTexture(context.cachePosition);
             // set cache
-            cacheStore.set(cacheKeys, texture);
-            // release buffer
-            manager.releaseAttachment(attachment, false);
+            $cacheStore.set(this._$cacheKeys, context.cachePosition);
             // 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;
+        if (canApply) {
+            const bitmapTexture = this._$createBitmapTexture(context, context.cachePosition, xScale, yScale, width, height);
+            const position = displayObject._$drawFilter(context, matrix, filters, width, height, bitmapTexture);
+            if (position.offsetX) {
+                offsetX = position.offsetX;
             }
+            if (position.offsetY) {
+                offsetY = position.offsetY;
+            }
+            // update
+            context.cachePosition = position;
         }
-        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]);
+        if (!canApply && this._$mode === "bitmap") {
+            context.setTransform(matrix[0], matrix[1], matrix[2], matrix[3], baseBounds.xMin * matrix[0] + baseBounds.yMin * matrix[2] + matrix[4], baseBounds.xMin * matrix[1] + baseBounds.yMin * matrix[3] + matrix[5]);
         }
         else {
-            context.setTransform(1, 0, 0, 1, xMin - offsetX, yMin - offsetY);
+            const radianX = $Math.atan2(matrix[1], matrix[0]);
+            const radianY = $Math.atan2(-matrix[2], matrix[3]);
+            if (!canApply && (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();
+        if (context.cachePosition) {
             context.globalAlpha = alpha;
-            context.imageSmoothingEnabled = true;
+            context.imageSmoothingEnabled = this._$mode === "shape";
             context.globalCompositeOperation = blend_mode;
-            context.drawImage(texture, 0, 0, texture.width, texture.height, color_transform);
+            context.drawInstance(xMin - offsetX, yMin - offsetY, xMax, yMax, color_transform);
+            // cache position clear
+            context.cachePosition = null;
         }
         // pool
-        $poolArray(cacheKeys);
         $poolBoundsObject(baseBounds);
     }
+    /**
+     * @return {WebGLTexture | null}
+     * @method
+     * @private
+     */
+    _$createBitmapTexture(context, position, x_scale, y_scale, width, height) {
+        if (this._$mode !== "bitmap") {
+            return null;
+        }
+        context.drawInstacedArray();
+        const manager = context.frameBuffer;
+        const currentAttachment = manager.currentAttachment;
+        const attachment = manager
+            .createCacheAttachment(width, height);
+        context._$bind(attachment);
+        context.reset();
+        const parentMatrix = $getFloat32Array6(x_scale, 0, 0, y_scale, width / 2, height / 2);
+        const texture = context.getTextureFromRect(position);
+        const baseMatrix = $getFloat32Array6(1, 0, 0, 1, -texture.width / 2, -texture.height / 2);
+        const scaleMatrix = $multiplicationMatrix(parentMatrix, baseMatrix);
+        $poolFloat32Array6(parentMatrix);
+        $poolFloat32Array6(baseMatrix);
+        context.setTransform(scaleMatrix[0], scaleMatrix[1], scaleMatrix[2], scaleMatrix[3], scaleMatrix[4], scaleMatrix[5]);
+        context.drawImage(texture, 0, 0, texture.width, texture.height);
+        const bitmapTexture = manager.getTextureFromCurrentAttachment();
+        context._$bind(currentAttachment);
+        manager.releaseAttachment(attachment);
+        manager.textureManager.release(texture);
+        return bitmapTexture;
+    }
     /**
      * @param  {CanvasToWebGLContext} context
      * @param  {Float32Array}         [color_transform=null]
@@ -1420,16 +1541,14 @@ export class Graphics {
      */
     _$restart() {
         if (this._$displayObject) {
+            // reset
             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);
+                $cacheStore.removeCache(this._$displayObject._$instanceId);
                 if (this._$displayObject._$characterId) {
-                    cacheStore.removeCache(this._$displayObject._$characterId);
+                    $cacheStore.removeCache(this._$displayObject._$characterId);
                 }
             }
         }
@@ -1596,6 +1715,31 @@ export class Graphics {
         }
         $poolArray(data);
     }
+    /**
+     * @return {string}
+     * @method
+     * @private
+     */
+    _$createCacheKey() {
+        if (this._$doLine) {
+            this.endLine();
+        }
+        // fixed logic
+        if (this._$doFill) {
+            this.endFill();
+        }
+        if (!this._$recode) {
+            return "";
+        }
+        const recodes = this._$getRecodes();
+        let hash = 0;
+        for (let idx = 0; idx < recodes.length; idx++) {
+            const chr = recodes[idx];
+            hash = (hash << 5) - hash + chr;
+            hash |= 0;
+        }
+        return `${hash}`;
+    }
     /**
      * @return {Float32Array}
      * @method
@@ -1762,9 +1906,7 @@ export class Graphics {
                             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 canvas = $cacheStore.getCanvas();
                                 const width = bitmapData.width;
                                 const height = bitmapData.height;
                                 canvas.width = width;
@@ -1776,7 +1918,7 @@ export class Graphics {
                                 // @ts-ignore
                                 context.drawImage(bitmapData.image || bitmapData.canvas, 0, 0);
                                 buffer = new Uint8Array(context.getImageData(0, 0, width, height).data);
-                                cacheStore.destroy(context);
+                                $cacheStore.destroy(context);
                             }
                             else if (bitmapData._$buffer !== null) {
                                 buffer = bitmapData._$buffer;
@@ -1833,9 +1975,7 @@ export class Graphics {
                             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 canvas = $cacheStore.getCanvas();
                                 const width = bitmapData.width;
                                 const height = bitmapData.height;
                                 canvas.width = width;
@@ -1847,7 +1987,7 @@ export class Graphics {
                                 // @ts-ignore
                                 context.drawImage(bitmapData.image || bitmapData.canvas, 0, 0);
                                 buffer = new Uint8Array(context.getImageData(0, 0, width, height).data);
-                                cacheStore.destroy(context);
+                                $cacheStore.destroy(context);
                             }
                             else if (bitmapData._$buffer !== null) {
                                 buffer = bitmapData._$buffer;
@@ -1929,8 +2069,8 @@ export class Graphics {
                         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;
+                            if (color_transform[7] !== 0) {
+                                color[3] = $Math.max(0, $Math.min(color[3] * color_transform[7], 255)) / 255;
                             }
                         }
                         context.fillStyle = color;
@@ -1961,8 +2101,8 @@ export class Graphics {
                         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;
+                            if (color_transform[7] !== 0) {
+                                color[3] = $Math.max(0, $Math.min(color[3] + color_transform[7], 255)) / 255;
                             }
                         }
                         context.strokeStyle = color;
@@ -2018,8 +2158,8 @@ export class Graphics {
                             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;
+                                if (color_transform[7] !== 0) {
+                                    alpha = $Math.max(0, $Math.min(color.A + color_transform[7], 255)) | 0;
                                 }
                             }
                             css.addColorStop(color.ratio, $getFloat32Array4(color.R, color.G, color.B, alpha));
@@ -2067,8 +2207,8 @@ export class Graphics {
                             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;
+                                if (color_transform[7] !== 0) {
+                                    alpha = $Math.max(0, $Math.min(color.A + color_transform[7], 255)) | 0;
                                 }
                             }
                             css.addColorStop(color.ratio, $getFloat32Array4(color.R, color.G, color.B, alpha));
@@ -2104,14 +2244,14 @@ export class Graphics {
                         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);
+                        context.imageSmoothingEnabled = smooth;
+                        if (this._$bitmapId
+                            || bitmapData.width === this._$xMax - this._$xMin
+                                && bitmapData.height === this._$yMax - this._$yMin) {
+                            context.drawBitmap(texture);
                         }
                         else {
                             context.fillStyle = context.createPattern(texture, repeat, color_transform);
-                            context.imageSmoothingEnabled = smooth;
                             context.fill();
                         }
                         // restore

package/dist/Loader.d.ts

@@ -1,7 +1,7 @@
 import { DisplayObjectContainer } from "./DisplayObjectContainer";
 import { LoaderInfo } from "./LoaderInfo";
 import { URLRequest } from "@next2d/net";
-import type { NoCodeDataImpl, ParentImpl } from "@next2d/interface";
+import type { NoCodeDataZlibImpl, NoCodeDataImpl, ParentImpl } from "@next2d/interface";
 /**
  * Loader クラスは、JSON ファイルまたはイメージ（JPEG、PNG、または GIF）ファイルを読み込むために使用します。
  * 読み込みを開始するには load() メソッドを使用します。
@@ -92,6 +92,16 @@ export declare class Loader extends DisplayObjectContainer {
      * @public
      */
     load(request: URLRequest): void;
+    /**
+     * @description NoCodeToolのJSONを直接読み込む
+     *              Read JSON directly from NoCodeTool
+     *
+     * @param  {string} json
+     * @return {void}
+     * @method
+     * @public
+     */
+    loadJSON(json: NoCodeDataZlibImpl | NoCodeDataImpl): void;
     /**
      * @param  {ProgressEvent} event
      * @return {void}