@galacean/effects-threejs 2.3.0-alpha.1 → 2.3.0-alpha.2

package/dist/index.mjs

@@ -3,7 +3,7 @@
  * Description: Galacean Effects runtime threejs plugin for the web
  * Author: Ant Group CO., Ltd.
  * Contributors: 燃然,飂兮,十弦,云垣,茂安,意绮
- * Version: v2.3.0-alpha.1
+ * Version: v2.3.0-alpha.2
  */
 
 import * as THREE from 'three';
@@ -1037,7 +1037,8 @@ function _inherits(subClass, superClass) {
     JSONSceneVersion["2_4"] = "2.4";
     JSONSceneVersion["3_0"] = "3.0";
     JSONSceneVersion["3_1"] = "3.1";
-    JSONSceneVersion["LATEST"] = "3.1";
+    JSONSceneVersion["3_2"] = "3.2";
+    JSONSceneVersion["LATEST"] = "3.2";
 })(JSONSceneVersion || (JSONSceneVersion = {}));
 
 /*********************************************/ /*               元素属性参数类型               */ /*********************************************/ /**
@@ -1575,7 +1576,7 @@ var MaterialBlending;
 var TextOverflow;
 (function(TextOverflow) {
     /**
-     * display 模式下，会显示所有文本，存在文本超过边界框的情况。
+     * display 模式下，会显示所有文本，文本大小会根据边界框调整。
      */ TextOverflow[TextOverflow["display"] = 0] = "display";
     /**
      * clip 模式下，当文本内容超出边界框时，多余的会被截断。
@@ -1668,12 +1669,18 @@ var BuiltinObjectGUID = {
      */ ShapePrimitiveType[ShapePrimitiveType["Star"] = 4] = "Star";
 })(ShapePrimitiveType || (ShapePrimitiveType = {}));
 
-// 本期无该功能 待补充
-var ShapeConnectType;
-(function(ShapeConnectType) {})(ShapeConnectType || (ShapeConnectType = {}));
-// @待补充
-var ShapePointType;
-(function(ShapePointType) {})(ShapePointType || (ShapePointType = {}));
+var LineCap;
+(function(LineCap) {
+    /** 默认值。向线条的每个末端添加平直的边缘 */ LineCap[LineCap["Butt"] = 0] = "Butt";
+    /** 向线条的每个末端添加圆形线帽 */ LineCap[LineCap["Round"] = 1] = "Round";
+    /** 向线条的每个末端添加正方形线帽 */ LineCap[LineCap["Square"] = 2] = "Square";
+})(LineCap || (LineCap = {}));
+var LineJoin;
+(function(LineJoin) {
+    /** 创建圆角 */ LineJoin[LineJoin["Round"] = 0] = "Round";
+    /** 创建斜角 */ LineJoin[LineJoin["Bevel"] = 1] = "Bevel";
+    /** 创建尖角 */ LineJoin[LineJoin["Miter"] = 2] = "Miter";
+})(LineJoin || (LineJoin = {}));
 
 /**
  * 动态换图类型
@@ -1882,8 +1889,8 @@ var index$1 = /*#__PURE__*/Object.freeze({
     get FontStyle () { return FontStyle; },
     BuiltinObjectGUID: BuiltinObjectGUID,
     get ShapePrimitiveType () { return ShapePrimitiveType; },
-    get ShapeConnectType () { return ShapeConnectType; },
-    get ShapePointType () { return ShapePointType; },
+    get LineCap () { return LineCap; },
+    get LineJoin () { return LineJoin; },
     get BackgroundType () { return BackgroundType; },
     get MultimediaType () { return MultimediaType; },
     get DataType () { return DataType; },
@@ -3802,7 +3809,9 @@ Vector4.ZERO = new Vector4(0.0, 0.0, 0.0, 0.0);
         if (renderer.renderingData.currentFrame.globalUniforms) {
             renderer.setGlobalMatrix("effects_ObjectToWorld", this.transform.getWorldMatrix());
         }
-        renderer.drawGeometry(this.geometry, this.material);
+        for(var i = 0; i < this.materials.length; i++){
+            renderer.drawGeometry(this.geometry, this.materials[i], i);
+        }
     };
     _proto.getBoundingBox = function getBoundingBox() {
         var worldMatrix = this.transform.getWorldMatrix();
@@ -7337,7 +7346,15 @@ var BYTES_TYPE_MAP = (_obj$6 = {}, _obj$6[glContext.FLOAT] = Float32Array.BYTES_
  */ var Geometry = /*#__PURE__*/ function(EffectsObject) {
     _inherits(Geometry, EffectsObject);
     function Geometry() {
-        return EffectsObject.apply(this, arguments);
+        var _this;
+        _this = EffectsObject.apply(this, arguments) || this;
+        /**
+   * Geometry 的名称
+   */ _this.name = "";
+        /**
+   * 子网格数据
+   */ _this.subMeshes = [];
+        return _this;
     }
     var _proto = Geometry.prototype;
     /**
@@ -12703,18 +12720,12 @@ var BezierCurve = /*#__PURE__*/ function(ValueGetter) {
         var keyTimeStart = this.curveMap[keyTimeData[0]].timeStart;
         var keyTimeEnd = this.curveMap[keyTimeData[keyTimeData.length - 1]].timeEnd;
         if (time <= keyTimeStart) {
-            if (this.startKeyframe[0] === BezierKeyframeType.LINE || this.startKeyframe[0] === BezierKeyframeType.HOLD) {
-                keyframeInfo.getPointIndexInCurve(this.startKeyframe, keyframeInfo.pointIndexCache);
-                return this.endKeyframe[1][keyframeInfo.pointIndexCache.yIndex];
-            }
-            return this.getCurveValue(keyTimeData[0], keyTimeStart);
+            keyframeInfo.getPointIndexInCurve(this.startKeyframe, keyframeInfo.pointIndexCache);
+            return this.startKeyframe[1][keyframeInfo.pointIndexCache.yIndex];
         }
         if (time >= keyTimeEnd) {
-            if (this.endKeyframe[0] === BezierKeyframeType.LINE || this.endKeyframe[0] === BezierKeyframeType.HOLD) {
-                keyframeInfo.getPointIndexInCurve(this.endKeyframe, keyframeInfo.pointIndexCache);
-                return this.endKeyframe[1][keyframeInfo.pointIndexCache.yIndex];
-            }
-            return this.getCurveValue(keyTimeData[keyTimeData.length - 1], keyTimeEnd);
+            keyframeInfo.getPointIndexInCurve(this.endKeyframe, keyframeInfo.pointIndexCache);
+            return this.endKeyframe[1][keyframeInfo.pointIndexCache.yIndex];
         }
         for(var i = 0; i < keyTimeData.length; i++){
             var xMin = this.curveMap[keyTimeData[i]].timeStart;
@@ -14860,6 +14871,10 @@ function triangulate(contours) {
             points
         ]);
         var indexStart = vertices.length / 2;
+        // 当所有 points 在一条直线时, gluTess 三角化 triangles 会返回空数组，这边做一下额外处理返回线段左右端点组成的三角形，确保拿到的包围盒是正确的。
+        if (triangles.length === 0) {
+            this.getLineEndPointsTriangle(points, triangles);
+        }
         for(var i = 0; i < triangles.length; i++){
             vertices[verticesOffset * 2 + i] = triangles[i];
         }
@@ -14868,6 +14883,57 @@ function triangulate(contours) {
             indices[indicesOffset + i1] = indexStart + i1;
         }
     };
+    /**
+   * 获取直线上最远的两个端点坐标组成的三角形
+   */ _proto.getLineEndPointsTriangle = function getLineEndPointsTriangle(points, triangles) {
+        // 参数检查
+        if (!points || points.length < 2 || points.length % 2 !== 0) {
+            throw new Error("Invalid points array");
+        }
+        if (points.length === 2) {
+            triangles.push(points[0], points[1], points[0], points[1], points[0], points[1]);
+            return;
+        }
+        // 取第一个线段计算斜率
+        var dx = points[2] - points[0];
+        var dy = points[3] - points[1];
+        // 存放结果坐标
+        var startX = points[0];
+        var startY = points[1];
+        var endX = points[0];
+        var endY = points[1];
+        // 根据斜率决定比较x还是y
+        if (Math.abs(dx) >= Math.abs(dy)) {
+            // 水平方向为主,比较x坐标
+            for(var i = 0; i < points.length; i += 2){
+                var x = points[i];
+                var y = points[i + 1];
+                if (x < startX) {
+                    startX = x;
+                    startY = y;
+                }
+                if (x > endX) {
+                    endX = x;
+                    endY = y;
+                }
+            }
+        } else {
+            // 垂直方向为主,比较y坐标
+            for(var i1 = 0; i1 < points.length; i1 += 2){
+                var x1 = points[i1];
+                var y1 = points[i1 + 1];
+                if (y1 < startY) {
+                    startX = x1;
+                    startY = y1;
+                }
+                if (y1 > endY) {
+                    endX = x1;
+                    endY = y1;
+                }
+            }
+        }
+        triangles.push(startX, startY, endX, endY, endX, endY);
+    };
     _create_class(Polygon, [
         {
             key: "lastX",
@@ -15341,47 +15407,48 @@ var PolyStar = /*#__PURE__*/ function(ShapePrimitive) {
 }(ShapePrimitive);
 
 // Based on:
-// const tempPoints = [new Point(), new Point(), new Point(), new Point()];
 /**
- * The `Rectangle` object is an area defined by its position, as indicated by its upper-left corner
- * point (`x`, `y`) and by its `width` and its `height`.
+ * The `Rectangle` object is an area defined by its position, as indicated by its top-left corner
+ * point (`x`, `y`) and by its `width` and its `height`, including a `roundness` property that
+ * defines the roundness of the rounded corners.
+ * @memberof maths
  */ var Rectangle$1 = /*#__PURE__*/ function(ShapePrimitive) {
     _inherits(Rectangle, ShapePrimitive);
-    function Rectangle(x, y, width, height) {
+    function Rectangle(x, y, width, height, roundness) {
         if (x === void 0) x = 0;
         if (y === void 0) y = 0;
         if (width === void 0) width = 0;
         if (height === void 0) height = 0;
+        if (roundness === void 0) roundness = 20;
         var _this;
         _this = ShapePrimitive.call(this) || this;
-        _this.x = Number(x);
-        _this.y = Number(y);
-        _this.width = Number(width);
-        _this.height = Number(height);
+        _this.x = x;
+        _this.y = y;
+        _this.width = width;
+        _this.height = height;
+        _this.roundness = roundness;
         return _this;
     }
     var _proto = Rectangle.prototype;
-    /** Determines whether the Rectangle is empty. */ _proto.isEmpty = function isEmpty() {
-        return this.left === this.right || this.top === this.bottom;
+    /**
+   * Returns the framing rectangle of the rectangle as a Rectangle object
+   * @param out - optional rectangle to store the result
+   * @returns The framing rectangle
+   */ _proto.getBounds = function getBounds(out) {
+        out = out || new Rectangle();
+        out.x = this.x;
+        out.y = this.y;
+        out.width = this.width;
+        out.height = this.height;
+        return out;
     };
     /**
-   * Creates a clone of this Rectangle
-   * @returns a copy of the rectangle
+   * Creates a clone of this rectangle.
+   * @returns - A copy of the rectangle.
    */ _proto.clone = function clone() {
-        return new Rectangle(this.x, this.y, this.width, this.height);
+        return new Rectangle(this.x, this.y, this.width, this.height, this.roundness);
     };
     /**
-   * Converts a Bounds object to a Rectangle object.
-   * @param bounds - The bounds to copy and convert to a rectangle.
-   * @returns Returns itself.
-   */ //   copyFromBounds (bounds: Bounds): this {
-    //     this.x = bounds.minX;
-    //     this.y = bounds.minY;
-    //     this.width = bounds.maxX - bounds.minX;
-    //     this.height = bounds.maxY - bounds.minY;
-    //     return this;
-    //   }
-    /**
    * Copies another rectangle to this one.
    * @param rectangle - The rectangle to copy from.
    * @returns Returns itself.
@@ -15390,6 +15457,7 @@ var PolyStar = /*#__PURE__*/ function(ShapePrimitive) {
         this.y = rectangle.y;
         this.width = rectangle.width;
         this.height = rectangle.height;
+        this.roundness = rectangle.roundness;
         return this;
     };
     /**
@@ -15400,267 +15468,121 @@ var PolyStar = /*#__PURE__*/ function(ShapePrimitive) {
         rectangle.copyFrom(this);
         return rectangle;
     };
-    /**
-   * Checks whether the x and y coordinates given are contained within this Rectangle
-   * @param x - The X coordinate of the point to test
-   * @param y - The Y coordinate of the point to test
-   * @returns Whether the x/y coordinates are within this Rectangle
-   */ _proto.contains = function contains(x, y) {
-        if (this.width <= 0 || this.height <= 0) {
-            return false;
+    _proto.build = function build(points) {
+        var ry;
+        var halfWidth = this.width / 2;
+        var halfHeight = this.height / 2;
+        var x = this.x + halfWidth;
+        var y = this.y + halfHeight;
+        var rx = ry = Math.max(0, Math.min(this.roundness / 100, 1) * Math.min(halfWidth, halfHeight));
+        var dx = halfWidth - rx;
+        var dy = halfHeight - ry;
+        if (!(rx >= 0 && ry >= 0 && dx >= 0 && dy >= 0)) {
+            return;
         }
-        if (x >= this.x && x < this.x + this.width) {
-            if (y >= this.y && y < this.y + this.height) {
-                return true;
-            }
+        // 控制边缘的平滑程度
+        var densityScale = 5;
+        // Choose a number of segments such that the maximum absolute deviation from the circle is approximately 0.029
+        var n = densityScale * Math.ceil(2.3 * Math.sqrt(rx + ry));
+        var m = n * 8 + (dx ? 4 : 0) + (dy ? 4 : 0);
+        if (m === 0) {
+            return;
         }
-        return false;
-    };
-    /**
-   * Checks whether the x and y coordinates given are contained within this rectangle including the stroke.
-   * @param x - The X coordinate of the point to test
-   * @param y - The Y coordinate of the point to test
-   * @param strokeWidth - The width of the line to check
-   * @returns Whether the x/y coordinates are within this rectangle
-   */ _proto.strokeContains = function strokeContains(x, y, strokeWidth) {
-        var _this = this, width = _this.width, height = _this.height;
-        if (width <= 0 || height <= 0) {
-            return false;
+        if (n === 0) {
+            points[0] = points[6] = x + dx;
+            points[1] = points[3] = y + dy;
+            points[2] = points[4] = x - dx;
+            points[5] = points[7] = y - dy;
+            return;
         }
-        var _x = this.x;
-        var _y = this.y;
-        var outerLeft = _x - strokeWidth / 2;
-        var outerRight = _x + width + strokeWidth / 2;
-        var outerTop = _y - strokeWidth / 2;
-        var outerBottom = _y + height + strokeWidth / 2;
-        var innerLeft = _x + strokeWidth / 2;
-        var innerRight = _x + width - strokeWidth / 2;
-        var innerTop = _y + strokeWidth / 2;
-        var innerBottom = _y + height - strokeWidth / 2;
-        return x >= outerLeft && x <= outerRight && y >= outerTop && y <= outerBottom && !(x > innerLeft && x < innerRight && y > innerTop && y < innerBottom);
-    };
-    /**
-   * Determines whether the `other` Rectangle transformed by `transform` intersects with `this` Rectangle object.
-   * Returns true only if the area of the intersection is >0, this means that Rectangles
-   * sharing a side are not overlapping. Another side effect is that an arealess rectangle
-   * (width or height equal to zero) can't intersect any other rectangle.
-   * @param {Rectangle} other - The Rectangle to intersect with `this`.
-   * @param {Matrix} transform - The transformation matrix of `other`.
-   * @returns {boolean} A value of `true` if the transformed `other` Rectangle intersects with `this`; otherwise `false`.
-   */ //   intersects (other: Rectangle, transform?: Matrix4): boolean {
-    //     if (!transform) {
-    //       const x0 = this.x < other.x ? other.x : this.x;
-    //       const x1 = this.right > other.right ? other.right : this.right;
-    //       if (x1 <= x0) {
-    //         return false;
-    //       }
-    //       const y0 = this.y < other.y ? other.y : this.y;
-    //       const y1 = this.bottom > other.bottom ? other.bottom : this.bottom;
-    //       return y1 > y0;
-    //     }
-    //     const x0 = this.left;
-    //     const x1 = this.right;
-    //     const y0 = this.top;
-    //     const y1 = this.bottom;
-    //     if (x1 <= x0 || y1 <= y0) {
-    //       return false;
-    //     }
-    //     const lt = tempPoints[0].set(other.left, other.top);
-    //     const lb = tempPoints[1].set(other.left, other.bottom);
-    //     const rt = tempPoints[2].set(other.right, other.top);
-    //     const rb = tempPoints[3].set(other.right, other.bottom);
-    //     if (rt.x <= lt.x || lb.y <= lt.y) {
-    //       return false;
-    //     }
-    //     const s = Math.sign((transform.a * transform.d) - (transform.b * transform.c));
-    //     if (s === 0) {
-    //       return false;
-    //     }
-    //     transform.apply(lt, lt);
-    //     transform.apply(lb, lb);
-    //     transform.apply(rt, rt);
-    //     transform.apply(rb, rb);
-    //     if (Math.max(lt.x, lb.x, rt.x, rb.x) <= x0
-    //             || Math.min(lt.x, lb.x, rt.x, rb.x) >= x1
-    //             || Math.max(lt.y, lb.y, rt.y, rb.y) <= y0
-    //             || Math.min(lt.y, lb.y, rt.y, rb.y) >= y1) {
-    //       return false;
-    //     }
-    //     const nx = s * (lb.y - lt.y);
-    //     const ny = s * (lt.x - lb.x);
-    //     const n00 = (nx * x0) + (ny * y0);
-    //     const n10 = (nx * x1) + (ny * y0);
-    //     const n01 = (nx * x0) + (ny * y1);
-    //     const n11 = (nx * x1) + (ny * y1);
-    //     if (Math.max(n00, n10, n01, n11) <= (nx * lt.x) + (ny * lt.y)
-    //             || Math.min(n00, n10, n01, n11) >= (nx * rb.x) + (ny * rb.y)) {
-    //       return false;
-    //     }
-    //     const mx = s * (lt.y - rt.y);
-    //     const my = s * (rt.x - lt.x);
-    //     const m00 = (mx * x0) + (my * y0);
-    //     const m10 = (mx * x1) + (my * y0);
-    //     const m01 = (mx * x0) + (my * y1);
-    //     const m11 = (mx * x1) + (my * y1);
-    //     if (Math.max(m00, m10, m01, m11) <= (mx * lt.x) + (my * lt.y)
-    //             || Math.min(m00, m10, m01, m11) >= (mx * rb.x) + (my * rb.y)) {
-    //       return false;
-    //     }
-    //     return true;
-    //   }
-    /**
-   * Pads the rectangle making it grow in all directions.
-   * If paddingY is omitted, both paddingX and paddingY will be set to paddingX.
-   * @param paddingX - The horizontal padding amount.
-   * @param paddingY - The vertical padding amount.
-   * @returns Returns itself.
-   */ _proto.pad = function pad(paddingX, paddingY) {
-        if (paddingX === void 0) paddingX = 0;
-        if (paddingY === void 0) paddingY = paddingX;
-        this.x -= paddingX;
-        this.y -= paddingY;
-        this.width += paddingX * 2;
-        this.height += paddingY * 2;
-        return this;
-    };
-    /**
-   * Fits this rectangle around the passed one.
-   * @param rectangle - The rectangle to fit.
-   * @returns Returns itself.
-   */ _proto.fit = function fit(rectangle) {
-        var x1 = Math.max(this.x, rectangle.x);
-        var x2 = Math.min(this.x + this.width, rectangle.x + rectangle.width);
-        var y1 = Math.max(this.y, rectangle.y);
-        var y2 = Math.min(this.y + this.height, rectangle.y + rectangle.height);
-        this.x = x1;
-        this.width = Math.max(x2 - x1, 0);
-        this.y = y1;
-        this.height = Math.max(y2 - y1, 0);
-        return this;
-    };
-    /**
-   * Enlarges rectangle that way its corners lie on grid
-   * @param resolution - resolution
-   * @param eps - precision
-   * @returns Returns itself.
-   */ _proto.ceil = function ceil(resolution, eps) {
-        if (resolution === void 0) resolution = 1;
-        if (eps === void 0) eps = 0.001;
-        var x2 = Math.ceil((this.x + this.width - eps) * resolution) / resolution;
-        var y2 = Math.ceil((this.y + this.height - eps) * resolution) / resolution;
-        this.x = Math.floor((this.x + eps) * resolution) / resolution;
-        this.y = Math.floor((this.y + eps) * resolution) / resolution;
-        this.width = x2 - this.x;
-        this.height = y2 - this.y;
-        return this;
-    };
-    /**
-   * Enlarges this rectangle to include the passed rectangle.
-   * @param rectangle - The rectangle to include.
-   * @returns Returns itself.
-   */ _proto.enlarge = function enlarge(rectangle) {
-        var x1 = Math.min(this.x, rectangle.x);
-        var x2 = Math.max(this.x + this.width, rectangle.x + rectangle.width);
-        var y1 = Math.min(this.y, rectangle.y);
-        var y2 = Math.max(this.y + this.height, rectangle.y + rectangle.height);
-        this.x = x1;
-        this.width = x2 - x1;
-        this.y = y1;
-        this.height = y2 - y1;
-        return this;
-    };
-    /**
-   * Returns the framing rectangle of the rectangle as a Rectangle object
-   * @param out - optional rectangle to store the result
-   * @returns The framing rectangle
-   */ _proto.getBounds = function getBounds(out) {
-        out = out || new Rectangle();
-        out.copyFrom(this);
-        return out;
-    };
-    _proto.getX = function getX() {
-        return this.x;
-    };
-    _proto.getY = function getY() {
-        return this.y;
-    };
-    _proto.build = function build(points) {
-        var x = this.x;
-        var y = this.y;
-        var width = this.width;
-        var height = this.height;
-        if (!(width >= 0 && height >= 0)) {
-            return points;
+        var j1 = 0;
+        var j2 = n * 4 + (dx ? 2 : 0) + 2;
+        var j3 = j2;
+        var j4 = m;
+        var x0 = dx + rx;
+        var y0 = dy;
+        var x1 = x + x0;
+        var x2 = x - x0;
+        var y1 = y + y0;
+        points[j1++] = x1;
+        points[j1++] = y1;
+        points[--j2] = y1;
+        points[--j2] = x2;
+        if (dy) {
+            var y2 = y - y0;
+            points[j3++] = x2;
+            points[j3++] = y2;
+            points[--j4] = y2;
+            points[--j4] = x1;
+        }
+        for(var i = 1; i < n; i++){
+            var a = Math.PI / 2 * (i / n);
+            var x01 = dx + Math.cos(a) * rx;
+            var y01 = dy + Math.sin(a) * ry;
+            var x11 = x + x01;
+            var x21 = x - x01;
+            var y11 = y + y01;
+            var y21 = y - y01;
+            points[j1++] = x11;
+            points[j1++] = y11;
+            points[--j2] = y11;
+            points[--j2] = x21;
+            points[j3++] = x21;
+            points[j3++] = y21;
+            points[--j4] = y21;
+            points[--j4] = x11;
+        }
+        x0 = dx;
+        y0 = dy + ry;
+        x1 = x + x0;
+        x2 = x - x0;
+        y1 = y + y0;
+        var y22 = y - y0;
+        points[j1++] = x1;
+        points[j1++] = y1;
+        points[--j4] = y22;
+        points[--j4] = x1;
+        if (dx) {
+            points[j1++] = x2;
+            points[j1++] = y1;
+            points[--j4] = y22;
+            points[--j4] = x2;
         }
-        points[0] = x;
-        points[1] = y;
-        points[2] = x + width;
-        points[3] = y;
-        points[4] = x + width;
-        points[5] = y + height;
-        points[6] = x;
-        points[7] = y + height;
-        return points;
     };
     _proto.triangulate = function triangulate(points, vertices, verticesOffset, indices, indicesOffset) {
-        var count = 0;
-        var verticesStride = 2;
-        verticesOffset *= verticesStride;
-        vertices[verticesOffset + count] = points[0];
-        vertices[verticesOffset + count + 1] = points[1];
-        count += verticesStride;
-        vertices[verticesOffset + count] = points[2];
-        vertices[verticesOffset + count + 1] = points[3];
-        count += verticesStride;
-        vertices[verticesOffset + count] = points[6];
-        vertices[verticesOffset + count + 1] = points[7];
-        count += verticesStride;
-        vertices[verticesOffset + count] = points[4];
-        vertices[verticesOffset + count + 1] = points[5];
-        count += verticesStride;
-        var verticesIndex = verticesOffset / verticesStride;
-        // triangle 1
-        indices[indicesOffset++] = verticesIndex;
-        indices[indicesOffset++] = verticesIndex + 1;
-        indices[indicesOffset++] = verticesIndex + 2;
-        // triangle 2
-        indices[indicesOffset++] = verticesIndex + 1;
-        indices[indicesOffset++] = verticesIndex + 3;
-        indices[indicesOffset++] = verticesIndex + 2;
-    };
-    _create_class(Rectangle, [
-        {
-            key: "left",
-            get: /** Returns the left edge of the rectangle. */ function get() {
-                return this.x;
-            }
-        },
-        {
-            key: "right",
-            get: /** Returns the right edge of the rectangle. */ function get() {
-                return this.x + this.width;
-            }
-        },
-        {
-            key: "top",
-            get: /** Returns the top edge of the rectangle. */ function get() {
-                return this.y;
-            }
-        },
-        {
-            key: "bottom",
-            get: /** Returns the bottom edge of the rectangle. */ function get() {
-                return this.y + this.height;
-            }
+        if (points.length === 0) {
+            return;
         }
-    ], [
-        {
-            key: "EMPTY",
-            get: /** A constant empty rectangle. This is a new object every time the property is accessed */ function get() {
-                return new Rectangle(0, 0, 0, 0);
+        // Compute center (average of all points)
+        var centerX = 0;
+        var centerY = 0;
+        for(var i = 0; i < points.length; i += 2){
+            centerX += points[i];
+            centerY += points[i + 1];
+        }
+        centerX /= points.length / 2;
+        centerY /= points.length / 2;
+        // Set center vertex
+        var count = verticesOffset;
+        vertices[count * 2] = centerX;
+        vertices[count * 2 + 1] = centerY;
+        var centerIndex = count++;
+        // Set edge vertices and indices
+        for(var i1 = 0; i1 < points.length; i1 += 2){
+            vertices[count * 2] = points[i1];
+            vertices[count * 2 + 1] = points[i1 + 1];
+            if (i1 > 0) {
+                indices[indicesOffset++] = count;
+                indices[indicesOffset++] = centerIndex;
+                indices[indicesOffset++] = count - 1;
             }
+            count++;
         }
-    ]);
+        // Connect last point to the first edge point
+        indices[indicesOffset++] = centerIndex + 1;
+        indices[indicesOffset++] = centerIndex;
+        indices[indicesOffset++] = count - 1;
+    };
     return Rectangle;
 }(ShapePrimitive);
 
@@ -15758,8 +15680,8 @@ var ShapePath = /*#__PURE__*/ function() {
    * @param h - The height of the rectangle.
    * @param transform - An optional `Matrix` object to apply a transformation to the rectangle.
    * @returns The instance of the current object for chaining.
-   */ _proto.rect = function rect(x, y, w, h, transform) {
-        this.drawShape(new Rectangle$1(x, y, w, h), transform);
+   */ _proto.rect = function rect(x, y, w, h, roundness, transform) {
+        this.drawShape(new Rectangle$1(x, y, w, h, roundness), transform);
         return this;
     };
     /**
@@ -15905,7 +15827,7 @@ var GraphicsPath = /*#__PURE__*/ function() {
    * @param h - The height of the rectangle.
    * @param transform - An optional `Matrix` object to apply a transformation to the rectangle.
    * @returns The instance of the current object for chaining.
-   */ _proto.rect = function rect(x, y, w, h, transform) {
+   */ _proto.rect = function rect(x, y, w, h, roundness, transform) {
         this.instructions.push({
             action: "rect",
             data: [
@@ -15913,6 +15835,7 @@ var GraphicsPath = /*#__PURE__*/ function() {
                 y,
                 w,
                 h,
+                roundness,
                 transform
             ]
         });
@@ -16222,9 +16145,9 @@ vertices, _verticesStride, _verticesOffset, indices, _indicesOffset) {
     var innerWeight = (1 - ratio) * 2;
     var outerWeight = ratio * 2;
     if (!closedShape) {
-        if (style.cap === "round") {
+        if (style.cap === LineCap.Round) {
             indexCount += round(x0 - perpX * (innerWeight - outerWeight) * 0.5, y0 - perpY * (innerWeight - outerWeight) * 0.5, x0 - perpX * innerWeight, y0 - perpY * innerWeight, x0 + perpX * outerWeight, y0 + perpY * outerWeight, verts, true) + 2;
-        } else if (style.cap === "square") {
+        } else if (style.cap === LineCap.Square) {
             indexCount += square(x0, y0, perpX, perpY, innerWeight, outerWeight, true, verts);
         }
     }
@@ -16263,7 +16186,7 @@ vertices, _verticesStride, _verticesOffset, indices, _indicesOffset) {
             verts.push(x1 - perpX * innerWeight, y1 - perpY * innerWeight);
             verts.push(x1 + perpX * outerWeight, y1 + perpY * outerWeight);
             /* 180 degree corner? */ if (dot >= 0) {
-                if (style.join === "round") {
+                if (style.join === LineJoin.Round) {
                     indexCount += round(x1, y1, x1 - perpX * innerWeight, y1 - perpY * innerWeight, x1 - perp1x * innerWeight, y1 - perp1y * innerWeight, verts, false) + 4;
                 } else {
                     indexCount += 2;
@@ -16287,7 +16210,7 @@ vertices, _verticesStride, _verticesOffset, indices, _indicesOffset) {
         var smallerInsideDiagonalSq = smallerInsideSegmentSq + insideWeight * insideWeight * widthSquared;
         var insideMiterOk = pDist <= smallerInsideDiagonalSq;
         if (insideMiterOk) {
-            if (style.join === "bevel" || pDist / widthSquared > miterLimitSquared) {
+            if (style.join === LineJoin.Bevel || pDist / widthSquared > miterLimitSquared) {
                 if (clockwise) /* rotating at inner angle */ {
                     verts.push(imx, imy); // inner miter point
                     verts.push(x1 + perpX * outerWeight, y1 + perpY * outerWeight); // first segment's outer vertex
@@ -16300,7 +16223,7 @@ vertices, _verticesStride, _verticesOffset, indices, _indicesOffset) {
                     verts.push(omx, omy); // outer miter point
                 }
                 indexCount += 2;
-            } else if (style.join === "round") {
+            } else if (style.join === LineJoin.Round) {
                 if (clockwise) /* arc is outside */ {
                     verts.push(imx, imy);
                     verts.push(x1 + perpX * outerWeight, y1 + perpY * outerWeight);
@@ -16321,13 +16244,13 @@ vertices, _verticesStride, _verticesOffset, indices, _indicesOffset) {
         } else {
             verts.push(x1 - perpX * innerWeight, y1 - perpY * innerWeight); // first segment's inner vertex
             verts.push(x1 + perpX * outerWeight, y1 + perpY * outerWeight); // first segment's outer vertex
-            if (style.join === "round") {
+            if (style.join === LineJoin.Round) {
                 if (clockwise) /* arc is outside */ {
                     indexCount += round(x1, y1, x1 + perpX * outerWeight, y1 + perpY * outerWeight, x1 + perp1x * outerWeight, y1 + perp1y * outerWeight, verts, true) + 2;
                 } else /* arc is inside */ {
                     indexCount += round(x1, y1, x1 - perpX * innerWeight, y1 - perpY * innerWeight, x1 - perp1x * innerWeight, y1 - perp1y * innerWeight, verts, false) + 2;
                 }
-            } else if (style.join === "miter" && pDist / widthSquared <= miterLimitSquared) {
+            } else if (style.join === LineJoin.Miter && pDist / widthSquared <= miterLimitSquared) {
                 if (clockwise) {
                     verts.push(omx, omy); // inner miter point
                     verts.push(omx, omy); // inner miter point
@@ -16356,9 +16279,9 @@ vertices, _verticesStride, _verticesOffset, indices, _indicesOffset) {
     verts.push(x1 - perpX * innerWeight, y1 - perpY * innerWeight);
     verts.push(x1 + perpX * outerWeight, y1 + perpY * outerWeight);
     if (!closedShape) {
-        if (style.cap === "round") {
+        if (style.cap === LineCap.Round) {
             indexCount += round(x1 - perpX * (innerWeight - outerWeight) * 0.5, y1 - perpY * (innerWeight - outerWeight) * 0.5, x1 - perpX * innerWeight, y1 - perpY * innerWeight, x1 + perpX * outerWeight, y1 + perpY * outerWeight, verts, false) + 2;
-        } else if (style.cap === "square") {
+        } else if (style.cap === LineCap.Square) {
             indexCount += square(x1, y1, perpX, perpY, innerWeight, outerWeight, false, verts);
         }
     }
@@ -16385,9 +16308,10 @@ var ShapeComponent = /*#__PURE__*/ function(MeshComponent) {
         var _this;
         _this = MeshComponent.call(this, engine) || this;
         _this.isStroke = false;
+        _this.isFill = false;
+        _this.shapeDirty = true;
         _this.graphicsPath = new GraphicsPath();
         _this.curveValues = [];
-        _this.shapeDirty = true;
         _this.vert = "\nprecision highp float;\n\nattribute vec3 aPos;//x y\n\nuniform mat4 effects_MatrixVP;\nuniform mat4 effects_MatrixInvV;\nuniform mat4 effects_ObjectToWorld;\n\nvoid main() {\n  vec4 pos = vec4(aPos.xyz, 1.0);\n  gl_Position = effects_MatrixVP * effects_ObjectToWorld * pos;\n}\n";
         _this.frag = "\nprecision highp float;\n\nuniform vec4 _Color;\n\nvoid main() {\n  vec4 color = _Color;\n  color.rgb *= color.a;\n  gl_FragColor = color;\n}\n";
         if (!_this.geometry) {
@@ -16420,6 +16344,15 @@ var ShapeComponent = /*#__PURE__*/ function(MeshComponent) {
                 mode: glContext.TRIANGLES,
                 drawCount: 4
             });
+            _this.geometry.subMeshes.push({
+                offset: 0,
+                indexCount: 0,
+                vertexCount: 0
+            }, {
+                offset: 0,
+                indexCount: 0,
+                vertexCount: 0
+            });
         }
         if (!_this.material) {
             var materialProps = {
@@ -16429,18 +16362,29 @@ var ShapeComponent = /*#__PURE__*/ function(MeshComponent) {
                     glslVersion: GLSLVersion.GLSL1
                 }
             };
-            _this.material = Material.create(engine, materialProps);
-            _this.material.setColor("_Color", new Color(1, 1, 1, 1));
-            _this.material.depthMask = false;
-            _this.material.depthTest = true;
-            _this.material.blending = true;
+            var fillMaterial = Material.create(engine, materialProps);
+            fillMaterial.setColor("_Color", new Color(1, 1, 1, 1));
+            fillMaterial.depthMask = false;
+            fillMaterial.depthTest = true;
+            fillMaterial.blending = true;
+            _this.material = fillMaterial;
+            var strokeMaterial = Material.create(engine, materialProps);
+            strokeMaterial.setColor("_Color", new Color(0.25, 0.25, 0.25, 1));
+            strokeMaterial.depthMask = false;
+            strokeMaterial.depthTest = true;
+            strokeMaterial.blending = true;
+            _this.materials[1] = strokeMaterial;
         }
         _this.strokeAttributes = {
             width: 1,
             alignment: 0.5,
-            cap: "butt",
-            join: "miter",
-            miterLimit: 10
+            cap: LineCap.Butt,
+            join: LineJoin.Miter,
+            miterLimit: 10,
+            color: new Color(1, 1, 1, 1)
+        };
+        _this.fillAttribute = {
+            color: new Color(1, 1, 1, 1)
         };
         _this.shapeAttribute = {
             type: ShapePrimitiveType.Custom,
@@ -16456,6 +16400,8 @@ var ShapeComponent = /*#__PURE__*/ function(MeshComponent) {
         this.item.getHitTestParams = this.getHitTestParams;
     };
     _proto.onUpdate = function onUpdate(dt) {
+        this.material.color = this.fillAttribute.color;
+        this.materials[1].color = this.strokeAttributes.color;
         if (this.shapeDirty) {
             this.buildPath(this.shapeAttribute);
             this.buildGeometryFromPath(this.graphicsPath.shapePath);
@@ -16466,22 +16412,34 @@ var ShapeComponent = /*#__PURE__*/ function(MeshComponent) {
         var shapePrimitives = shapePath.shapePrimitives;
         var vertices = [];
         var indices = [];
-        // triangulate shapePrimitive
-        for(var _iterator = _create_for_of_iterator_helper_loose(shapePrimitives), _step; !(_step = _iterator()).done;){
-            var shapePrimitive = _step.value;
-            var shape = shapePrimitive.shape;
-            var points = [];
-            var indexOffset = indices.length;
-            var vertOffset = vertices.length / 2;
-            shape.build(points);
-            if (!this.isStroke) {
+        // Triangulate shapePrimitive
+        //---------------------------------------------------
+        if (this.isFill) {
+            for(var _iterator = _create_for_of_iterator_helper_loose(shapePrimitives), _step; !(_step = _iterator()).done;){
+                var shapePrimitive = _step.value;
+                var shape = shapePrimitive.shape;
+                var points = [];
+                var indexOffset = indices.length;
+                var vertOffset = vertices.length / 2;
+                shape.build(points);
                 shape.triangulate(points, vertices, vertOffset, indices, indexOffset);
-            } else {
+            }
+        }
+        var fillIndexCount = indices.length;
+        if (this.isStroke) {
+            for(var _iterator1 = _create_for_of_iterator_helper_loose(shapePrimitives), _step1; !(_step1 = _iterator1()).done;){
+                var shapePrimitive1 = _step1.value;
+                var shape1 = shapePrimitive1.shape;
+                var points1 = [];
+                indices.length;
+                var vertOffset1 = vertices.length / 2;
                 var close = true;
                 var lineStyle = this.strokeAttributes;
-                buildLine(points, lineStyle, false, close, vertices, 2, vertOffset, indices);
+                shape1.build(points1);
+                buildLine(points1, lineStyle, false, close, vertices, 2, vertOffset1, indices);
             }
         }
+        var strokeIndexCount = indices.length - fillIndexCount;
         var vertexCount = vertices.length / 2;
         // get the current attribute and index arrays from the geometry, avoiding re-creation
         var positionArray = this.geometry.getAttributeData("aPos");
@@ -16514,6 +16472,12 @@ var ShapeComponent = /*#__PURE__*/ function(MeshComponent) {
         this.geometry.setAttributeData("aUV", uvArray);
         this.geometry.setIndexData(indexArray);
         this.geometry.setDrawCount(indices.length);
+        var u16Size = 2;
+        var fillSubMesh = this.geometry.subMeshes[0];
+        var strokeSubMesh = this.geometry.subMeshes[1];
+        fillSubMesh.indexCount = fillIndexCount;
+        strokeSubMesh.offset = fillIndexCount * u16Size;
+        strokeSubMesh.indexCount = strokeIndexCount;
     };
     _proto.buildPath = function buildPath(shapeAttribute) {
         this.graphicsPath.clear();
@@ -16527,7 +16491,6 @@ var ShapeComponent = /*#__PURE__*/ function(MeshComponent) {
                     for(var _iterator = _create_for_of_iterator_helper_loose(customShapeAtribute.shapes), _step; !(_step = _iterator()).done;){
                         var shape = _step.value;
                         this.curveValues = [];
-                        this.setFillColor(shape.fill);
                         var indices = shape.indexes;
                         for(var i = 1; i < indices.length; i++){
                             var pointIndex = indices[i];
@@ -16559,38 +16522,28 @@ var ShapeComponent = /*#__PURE__*/ function(MeshComponent) {
                 {
                     var ellipseData = shapeAttribute;
                     this.graphicsPath.ellipse(0, 0, ellipseData.xRadius, ellipseData.yRadius);
-                    this.setFillColor(ellipseData.fill);
                     break;
                 }
             case ShapePrimitiveType.Rectangle:
                 {
                     var rectangleData = shapeAttribute;
-                    this.graphicsPath.rect(-rectangleData.width / 2, -rectangleData.height / 2, rectangleData.width, rectangleData.height);
-                    this.setFillColor(rectangleData.fill);
+                    this.graphicsPath.rect(-rectangleData.width / 2, -rectangleData.height / 2, rectangleData.width, rectangleData.height, rectangleData.roundness);
                     break;
                 }
             case ShapePrimitiveType.Star:
                 {
                     var starData = shapeAttribute;
                     this.graphicsPath.polyStar(starData.pointCount, starData.outerRadius, starData.innerRadius, starData.outerRoundness, starData.innerRoundness, StarType.Star);
-                    this.setFillColor(starData.fill);
                     break;
                 }
             case ShapePrimitiveType.Polygon:
                 {
                     var polygonData = shapeAttribute;
                     this.graphicsPath.polyStar(polygonData.pointCount, polygonData.radius, polygonData.radius, polygonData.roundness, polygonData.roundness, StarType.Polygon);
-                    this.setFillColor(polygonData.fill);
                     break;
                 }
         }
     };
-    _proto.setFillColor = function setFillColor(fill) {
-        if (fill) {
-            var color = fill.color;
-            this.material.setColor("_Color", new Color(color.r, color.g, color.b, color.a));
-        }
-    };
     _proto.fromData = function fromData(data) {
         MeshComponent.prototype.fromData.call(this, data);
         this.shapeDirty = true;
@@ -16598,19 +16551,27 @@ var ShapeComponent = /*#__PURE__*/ function(MeshComponent) {
         if (strokeParam) {
             this.isStroke = true;
             this.strokeAttributes.width = strokeParam.width;
+            this.strokeAttributes.color.copyFrom(strokeParam.color);
+            this.strokeAttributes.cap = strokeParam.cap;
+            this.strokeAttributes.join = strokeParam.join;
+        }
+        var fillParam = data.fill;
+        if (fillParam) {
+            this.isFill = true;
+            this.fillAttribute.color.copyFrom(fillParam.color);
         }
         switch(data.type){
             case ShapePrimitiveType.Custom:
                 {
-                    this.shapeAttribute = {
+                    var customShapeData = data;
+                    var customShapeAttribute = {
                         type: ShapePrimitiveType.Custom,
                         points: [],
                         easingIns: [],
                         easingOuts: [],
-                        shapes: []
+                        shapes: [],
+                        fill: customShapeData.fill
                     };
-                    var customShapeData = data;
-                    var customShapeAttribute = this.shapeAttribute;
                     for(var _iterator = _create_for_of_iterator_helper_loose(customShapeData.points), _step; !(_step = _iterator()).done;){
                         var point = _step.value;
                         customShapeAttribute.points.push(new Vector2(point.x, point.y));
@@ -16624,6 +16585,7 @@ var ShapeComponent = /*#__PURE__*/ function(MeshComponent) {
                         customShapeAttribute.easingOuts.push(new Vector2(easingOut.x, easingOut.y));
                     }
                     customShapeAttribute.shapes = customShapeData.shapes;
+                    this.shapeAttribute = customShapeAttribute;
                     break;
                 }
             case ShapePrimitiveType.Ellipse:
@@ -17514,10 +17476,8 @@ function shouldIgnoreBouncing(arg, mul) {
         };
     };
     _proto.setGeometry = function setGeometry(geometry, worldMatrix) {
-        if (this.geometry !== geometry) {
-            this.triangles = this.geometryToTriangles(geometry);
-            this.geometry = geometry;
-        }
+        this.triangles = this.geometryToTriangles(geometry);
+        this.geometry = geometry;
         var area = [];
         for(var _iterator = _create_for_of_iterator_helper_loose(this.triangles), _step; !(_step = _iterator()).done;){
             var triangle = _step.value;
@@ -17538,10 +17498,11 @@ function shouldIgnoreBouncing(arg, mul) {
     _proto.geometryToTriangles = function geometryToTriangles(geometry) {
         var _geometry_getIndexData;
         var indices = (_geometry_getIndexData = geometry.getIndexData()) != null ? _geometry_getIndexData : [];
+        var drawCount = geometry.getDrawCount();
         var _geometry_getAttributeData;
         var vertices = (_geometry_getAttributeData = geometry.getAttributeData("aPos")) != null ? _geometry_getAttributeData : [];
         var res = [];
-        for(var i = 0; i < indices.length; i += 3){
+        for(var i = 0; i < drawCount; i += 3){
             var index0 = indices[i] * 3;
             var index1 = indices[i + 1] * 3;
             var index2 = indices[i + 2] * 3;
@@ -25524,6 +25485,9 @@ var TextComponent = /*#__PURE__*/ function(BaseRenderComponent) {
         /**
    * 文本行数
    */ _this.lineCount = 0;
+        /**
+   * 每一行文本的最大宽度
+   */ _this.maxLineWidth = 0;
         _this.SCALE_FACTOR = 0.1;
         _this.ALPHA_FIX_VALUE = 1 / 255;
         _this.name = "MText" + seed$2++;
@@ -25607,12 +25571,9 @@ var TextComponentBase = /*#__PURE__*/ function() {
         this.textStyle = new TextStyle(options);
         this.textLayout = new TextLayout(options);
         this.text = options.text.toString();
-        this.lineCount = this.getLineCount(options.text, true);
     };
-    _proto.getLineCount = function getLineCount(text, init) {
-        var context = this.context;
-        var letterSpace = this.textLayout.letterSpace;
-        var fontScale = init ? this.textStyle.fontSize / 10 : 1 / this.textStyle.fontScale;
+    _proto.getLineCount = function getLineCount(text, context) {
+        var _this_textLayout = this.textLayout, letterSpace = _this_textLayout.letterSpace, overflow = _this_textLayout.overflow;
         var width = this.textLayout.width + this.textStyle.fontOffset;
         var lineCount = 1;
         var x = 0;
@@ -25620,15 +25581,27 @@ var TextComponentBase = /*#__PURE__*/ function() {
             var _context_measureText;
             var str = text[i];
             var _context_measureText_width;
-            var textMetrics = ((_context_measureText_width = context == null ? void 0 : (_context_measureText = context.measureText(str)) == null ? void 0 : _context_measureText.width) != null ? _context_measureText_width : 0) * fontScale;
+            var textMetrics = (_context_measureText_width = context == null ? void 0 : (_context_measureText = context.measureText(str)) == null ? void 0 : _context_measureText.width) != null ? _context_measureText_width : 0;
             // 和浏览器行为保持一致
             x += letterSpace;
-            if (x + textMetrics > width && i > 0 || str === "\n") {
-                lineCount++;
-                x = 0;
-            }
-            if (str !== "\n") {
-                x += textMetrics;
+            // 处理文本结束行为
+            if (overflow === TextOverflow.display) {
+                if (str === "\n") {
+                    lineCount++;
+                    x = 0;
+                } else {
+                    x += textMetrics;
+                    this.maxLineWidth = Math.max(this.maxLineWidth, x);
+                }
+            } else {
+                if (x + textMetrics > width && i > 0 || str === "\n") {
+                    lineCount++;
+                    this.maxLineWidth = Math.max(this.maxLineWidth, x);
+                    x = 0;
+                }
+                if (str !== "\n") {
+                    x += textMetrics;
+                }
             }
         }
         return lineCount;
@@ -25678,7 +25651,6 @@ var TextComponentBase = /*#__PURE__*/ function() {
             return;
         }
         this.text = value.toString();
-        this.lineCount = this.getLineCount(value, false);
         this.isDirty = true;
     };
     /**
@@ -25760,6 +25732,18 @@ var TextComponentBase = /*#__PURE__*/ function() {
         this.isDirty = true;
     };
     /**
+   * 设置文本溢出模式
+   *
+   * - clip: 当文本内容超出边界框时，多余的会被截断。
+   * - display: 该模式下会显示所有文本，会自动调整文本字号以保证显示完整。
+   * > 当存在多行时，部分行内文本可能存在文本字号变小的情况，其他行为正常情况
+   *
+   * @param overflow - 文本溢出模式
+   */ _proto.setOverflow = function setOverflow(overflow) {
+        this.textLayout.overflow = overflow;
+        this.isDirty = true;
+    };
+    /**
    * 设置阴影颜色
    * @param value - 阴影颜色
    * @returns
@@ -25827,28 +25811,35 @@ var TextComponentBase = /*#__PURE__*/ function() {
         var layout = this.textLayout;
         var fontScale = style.fontScale;
         var width = (layout.width + style.fontOffset) * fontScale;
-        var finalHeight = layout.lineHeight * this.lineCount;
         var fontSize = style.fontSize * fontScale;
         var lineHeight = layout.lineHeight * fontScale;
+        style.fontDesc = this.getFontDesc(fontSize);
         this.char = (this.text || "").split("");
         this.canvas.width = width;
+        var height = this.canvas.height;
+        context.font = style.fontDesc;
+        this.lineCount = this.getLineCount(this.text, context);
+        var finalHeight = layout.lineHeight * this.lineCount;
         if (layout.autoWidth) {
             this.canvas.height = finalHeight * fontScale;
             this.item.transform.size.set(1, finalHeight / layout.height);
         } else {
             this.canvas.height = layout.height * fontScale;
         }
-        var height = this.canvas.height;
-        context.clearRect(0, 0, width, height);
+        // canvas size 变化后重新刷新 context
+        if (this.maxLineWidth > width && layout.overflow === TextOverflow.display) {
+            context.font = this.getFontDesc(fontSize * width / this.maxLineWidth);
+        } else {
+            context.font = style.fontDesc;
+        }
         // fix bug 1/255
         context.fillStyle = "rgba(255, 255, 255, 0.0039)";
+        context.clearRect(0, 0, width, height);
         if (!flipY) {
             context.translate(0, height);
             context.scale(1, -1);
         }
         context.fillRect(0, 0, width, height);
-        style.fontDesc = this.getFontDesc();
-        context.font = style.fontDesc;
         if (style.hasShadow) {
             this.setupShadow();
         }
@@ -25920,9 +25911,9 @@ var TextComponentBase = /*#__PURE__*/ function() {
         this.material.setTexture("_MainTex", texture);
         this.isDirty = false;
     };
-    _proto.getFontDesc = function getFontDesc() {
-        var _this_textStyle = this.textStyle, fontSize = _this_textStyle.fontSize, fontScale = _this_textStyle.fontScale, fontFamily = _this_textStyle.fontFamily, textWeight = _this_textStyle.textWeight, fontStyle = _this_textStyle.fontStyle;
-        var fontDesc = "" + (fontSize * fontScale).toString() + "px ";
+    _proto.getFontDesc = function getFontDesc(fontSize) {
+        var _this_textStyle = this.textStyle, fontFamily = _this_textStyle.fontFamily, textWeight = _this_textStyle.textWeight, fontStyle = _this_textStyle.fontStyle;
+        var fontDesc = "" + fontSize.toString() + "px ";
         if (!DEFAULT_FONTS.includes(fontFamily)) {
             fontDesc += '"' + fontFamily + '"';
         } else {
@@ -26692,12 +26683,29 @@ function getStandardInteractContent(ui) {
  * 3.1 版本数据适配
  * - 富文本插件名称的适配
  */ function version31Migration(json) {
-    var _json_plugins;
+    var // 修正老版本数据中，富文本插件名称的问题
+    _json_plugins;
     (_json_plugins = json.plugins) == null ? void 0 : _json_plugins.forEach(function(plugin, index) {
         if (plugin === "richtext") {
             json.plugins[index] = "rich-text";
         }
     });
+    // Custom shape fill 属性位置迁移
+    for(var _iterator = _create_for_of_iterator_helper_loose(json.components), _step; !(_step = _iterator()).done;){
+        var component = _step.value;
+        if (component.dataType === DataType.ShapeComponent) {
+            var shapeComponent = component;
+            if (shapeComponent.type === ShapePrimitiveType.Custom) {
+                var _customShapeComponent_shapes;
+                var customShapeComponent = shapeComponent;
+                //@ts-expect-error
+                if (((_customShapeComponent_shapes = customShapeComponent.shapes) == null ? void 0 : _customShapeComponent_shapes.length) > 0 && customShapeComponent.shapes[0].fill) {
+                    // @ts-expect-error
+                    customShapeComponent.fill = customShapeComponent.shapes[0].fill;
+                }
+            }
+        }
+    }
     return json;
 }
 /**
@@ -27527,8 +27535,6 @@ function getStandardJSON(json) {
     }
     // 修正老版本数据中，meshItem 以及 lightItem 结束行为错误问题
     version22Migration(json);
-    // 修正老版本数据中，富文本插件名称的问题
-    version31Migration(json);
     if (v0.test(json.version)) {
         var _exec;
         reverseParticle = ((_exec = /^(\d+)/.exec(json.version)) == null ? void 0 : _exec[0]) === "0";
@@ -27543,7 +27549,13 @@ function getStandardJSON(json) {
             json = version24Migration(json);
         }
         if (mainVersion < 3) {
-            return version30Migration(version21Migration(json));
+            json = version30Migration(version21Migration(json));
+        }
+        // 3.x 版本格式转换
+        if (mainVersion < 4) {
+            if (minorVersion < 2) {
+                json = version31Migration(json);
+            }
         }
         return json;
     }
@@ -27599,13 +27611,11 @@ function getStandardJSONFromV0(json) {
 }
 function getStandardImage(image, index, imageTags) {
     var renderLevel = imageTags[index];
-    var oriY = image.oriY;
     if (typeof image === "string") {
         return {
             id: generateGUID(),
             renderLevel: renderLevel,
-            url: image,
-            oriY: oriY
+            url: image
         };
     } else if (image.template) {
         return {
@@ -27613,14 +27623,12 @@ function getStandardImage(image, index, imageTags) {
             url: image.url,
             template: image.template,
             webp: image.webp,
-            renderLevel: renderLevel,
-            oriY: oriY
+            renderLevel: renderLevel
         };
     } else if (image.compressed) {
         return {
             id: generateGUID(),
             url: image.url,
-            oriY: oriY,
             compressed: {
                 astc: image.compressed.android,
                 pvrtc: image.compressed.iOS
@@ -27633,8 +27641,7 @@ function getStandardImage(image, index, imageTags) {
             id: generateGUID(),
             url: image.url,
             webp: image.webp,
-            renderLevel: renderLevel,
-            oriY: oriY
+            renderLevel: renderLevel
         };
     } else if (image && image.sourceType) {
         return image;
@@ -32076,7 +32083,7 @@ registerPlugin("sprite", SpriteLoader, VFXItem, true);
 registerPlugin("particle", ParticleLoader, VFXItem, true);
 registerPlugin("cal", CalculateLoader, VFXItem, true);
 registerPlugin("interact", InteractLoader, VFXItem, true);
-var version$1 = "2.3.0-alpha.1";
+var version$1 = "2.3.0-alpha.2";
 logger.info("Core version: " + version$1 + ".");
 
 var _obj;
@@ -33709,7 +33716,7 @@ setMaxSpriteMeshItemCount(8);
  */ Mesh.create = function(engine, props) {
     return new ThreeMesh(engine, props);
 };
-var version = "2.3.0-alpha.1";
+var version = "2.3.0-alpha.2";
 logger.info("THREEJS plugin version: " + version + ".");
 
 export { AbstractPlugin, ActivationPlayable, ActivationPlayableAsset, ActivationTrack, AnimationClip, AnimationClipPlayable, Asset, AssetLoader, AssetManager, BYTES_TYPE_MAP, BaseRenderComponent, Behaviour, BezierCurve, BezierCurvePath, BezierCurveQuat, BinaryAsset, COMPRESSED_TEXTURE, CONSTANT_MAP_BLEND, CONSTANT_MAP_DEPTH, CONSTANT_MAP_STENCIL_FUNC, CONSTANT_MAP_STENCIL_OP, COPY_FRAGMENT_SHADER, COPY_MESH_SHADER_ID, COPY_VERTEX_SHADER, CalculateLoader, Camera, CameraController, CameraVFXItemLoader, ColorCurve, ColorPropertyPlayableAsset, ColorPropertyTrack, Component, Composition, CompositionComponent, CompositionSourceManager, DEFAULT_FONTS, DEFAULT_FPS, Database, DestroyOptions, Downloader, EFFECTS_COPY_MESH_NAME, EVENT_TYPE_CLICK, EVENT_TYPE_TOUCH_END, EVENT_TYPE_TOUCH_MOVE, EVENT_TYPE_TOUCH_START, EffectComponent, EffectsObject, EffectsPackage, Engine, EventEmitter, EventSystem, Fake3DAnimationMode, Fake3DComponent, FilterMode, Float16ArrayWrapper, FloatPropertyPlayableAsset, FloatPropertyTrack, Framebuffer, GLSLVersion, GPUCapability, Geometry, GlobalUniforms, GradientValue, HELP_LINK, HitTestType, InteractComponent, InteractLoader, InteractMesh, Item, KTXTexture, LineSegments, LinearValue, Material, MaterialDataBlock, MaterialRenderType, MaterialTrack, Mesh, MeshCollider, ObjectBindingTrack, OrderType, PLAYER_OPTIONS_ENV_EDITOR, POST_PROCESS_SETTINGS, ParticleBehaviourPlayable, ParticleBehaviourPlayableAsset, ParticleLoader, ParticleMesh, ParticleSystem, ParticleSystemRenderer, ParticleTrack, PassTextureCache, PathSegments, PluginSystem, PostProcessVolume, PropertyTrack, RENDER_PASS_NAME_PREFIX, RENDER_PREFER_LOOKUP_TEXTURE, RUNTIME_ENV, RandomSetValue, RandomValue, RandomVectorValue, RenderFrame, RenderPass, RenderPassAttachmentStorageType, RenderPassDestroyAttachmentType, RenderPassPriorityNormal, RenderPassPriorityPostprocess, RenderPassPriorityPrepare, RenderTargetHandle, RenderTextureFormat, Renderbuffer, Renderer, RendererComponent, RuntimeClip, SEMANTIC_MAIN_PRE_COLOR_ATTACHMENT_0, SEMANTIC_MAIN_PRE_COLOR_ATTACHMENT_SIZE_0, SEMANTIC_PRE_COLOR_ATTACHMENT_0, SEMANTIC_PRE_COLOR_ATTACHMENT_SIZE_0, SPRITE_VERTEX_STRIDE, Scene, SemanticMap, SerializationHelper, Shader, ShaderCompileResultStatus, ShaderFactory, ShaderType, ShaderVariant, ShapeComponent, SpriteColorPlayableAsset, SpriteColorTrack, SpriteComponent, SpriteLoader, StaticValue, SubCompositionPlayableAsset, SubCompositionTrack, TEMPLATE_USE_OFFSCREEN_CANVAS, TEXTURE_UNIFORM_MAP, TextComponent, TextComponentBase, TextLayout, TextLoader, TextStyle, Texture, TextureFactory, TextureLoadAction, TextureSourceType, TextureStoreAction, ThreeComposition, ThreeDisplayObject, ThreeEngine, ThreeMaterial, ThreeSpriteComponent, ThreeTextComponent, ThreeTexture, Ticker, TimelineAsset, TimelineClip, TimelinePlayable, TrackAsset, TrackSortWrapper, TrackType, Transform, TransformAnimationPlayable, TransformPlayableAsset, TransformTrack, VFXItem, ValueGetter, Vector2Curve, Vector2PropertyPlayableAsset, Vector2PropertyTrack, Vector4Curve, Vector4PropertyPlayableAsset, Vector4PropertyTrack, addByOrder, addItem, addItemWithOrder, applyMixins, assertExist, asserts, base64ToFile, blend, calculateTranslation, canvasPool, colorGradingFrag, colorStopsFromGradient, colorToArr$1 as colorToArr, combineImageTemplate, createCopyShader, createGLContext, createKeyFrameMeta, createShape, createValueGetter, decimalEqual, defaultPlugins, deserializeMipmapTexture, earcut, effectsClass, effectsClassStore, enlargeBuffer, ensureFixedNumber, ensureVec3, findPreviousRenderPass, gaussianDown_frag as gaussianDownFrag, gaussianDownHFrag, gaussianDownVFrag, gaussianUpFrag, generateEmptyTypedArray, generateGUID, generateHalfFloatTexture, generateTransparentTexture, generateWhiteTexture, getBackgroundImage, getColorFromGradientStops, getConfig, getDefaultTextureFactory, getGeometryByShape, getGeometryTriangles, getImageItemRenderInfo, getKTXTextureOptions, getKeyFrameMetaByRawValue, getMergedStore, getParticleMeshShader, getPixelRatio, getPreMultiAlpha, getStandardComposition, getStandardImage, getStandardItem, getStandardJSON, getTextureSize, glContext, glType2VertexFormatType, gpuTimer, imageDataFromColor, imageDataFromGradient, initErrors, initGLContext, integrate, interpolateColor, isAlipayMiniApp, isAndroid, isArray, isCanvas, isFunction, isIOS, isIOSByUA, isMiniProgram, isObject, isSimulatorCellPhone, isString, isUniformStruct, isUniformStructArray, isValidFontFamily, isWebGL2, isWechatMiniApp, itemFrag, itemFrameFrag, itemVert, loadAVIFOptional, loadBinary, loadBlob, loadImage, loadMedia, loadVideo, loadWebPOptional, logger, index as math, maxSpriteMeshItemCount, modifyMaxKeyframeShader, nearestPowerOfTwo, noop, normalizeColor, numberToFix, parsePercent$1 as parsePercent, particleFrag, particleOriginTranslateMap$1 as particleOriginTranslateMap, particleUniformTypeMap, particleVert, passRenderLevel, pluginLoaderMap, randomInRange, registerPlugin, removeItem, rotateVec2, screenMeshVert, serialize, setBlendMode, setConfig, setDefaultTextureFactory, setMaskMode, setMaxSpriteMeshItemCount, setRayFromCamera, setSideMode, setSpriteMeshMaxItemCountByGPU, setUniformValue, sortByOrder, index$1 as spec, spriteMeshShaderFromFilter, spriteMeshShaderFromRenderInfo, spriteMeshShaderIdFromRenderInfo, thresholdFrag, throwDestroyedError, trailVert, translatePoint, trianglesFromRect, unregisterPlugin, valIfUndefined, value, valueDefine, vecFill, vecMulCombine, version, vertexFormatType2GLType };