leafer-draw 1.9.11 → 1.10.0

package/dist/web.module.js

@@ -1,43 +1,3 @@
-const Platform = {
-    toURL(text, fileType) {
-        let url = encodeURIComponent(text);
-        if (fileType === "text") url = "data:text/plain;charset=utf-8," + url; else if (fileType === "svg") url = "data:image/svg+xml," + url;
-        return url;
-    },
-    image: {
-        hitCanvasSize: 100,
-        maxCacheSize: 2560 * 1600,
-        maxPatternSize: 4096 * 2160,
-        crossOrigin: "anonymous",
-        getRealURL(url) {
-            const {prefix: prefix, suffix: suffix} = Platform.image;
-            if (suffix && !url.startsWith("data:") && !url.startsWith("blob:")) url += (url.includes("?") ? "&" : "?") + suffix;
-            if (prefix && url[0] === "/") url = prefix + url;
-            return url;
-        }
-    }
-};
-
-const IncrementId = {
-    RUNTIME: "runtime",
-    LEAF: "leaf",
-    TASK: "task",
-    CNAVAS: "canvas",
-    IMAGE: "image",
-    types: {},
-    create(typeName) {
-        const {types: types} = I$1;
-        if (types[typeName]) {
-            return types[typeName]++;
-        } else {
-            types[typeName] = 1;
-            return 0;
-        }
-    }
-};
-
-const I$1 = IncrementId;
-
 var Answer;
 
 (function(Answer) {
@@ -247,9 +207,80 @@ class LeafData {
     }
 }
 
+const {floor: floor$2, max: max$4} = Math;
+
+const Platform = {
+    toURL(text, fileType) {
+        let url = encodeURIComponent(text);
+        if (fileType === "text") url = "data:text/plain;charset=utf-8," + url; else if (fileType === "svg") url = "data:image/svg+xml," + url;
+        return url;
+    },
+    image: {
+        hitCanvasSize: 100,
+        maxCacheSize: 2560 * 1600,
+        maxPatternSize: 4096 * 2160,
+        crossOrigin: "anonymous",
+        isLarge(size, scaleX, scaleY, largeSize) {
+            return size.width * size.height * (scaleX ? scaleX * scaleY : 1) > (largeSize || image$1.maxCacheSize);
+        },
+        isSuperLarge(size, scaleX, scaleY) {
+            return image$1.isLarge(size, scaleX, scaleY, image$1.maxPatternSize);
+        },
+        getRealURL(url) {
+            const {prefix: prefix, suffix: suffix} = Platform.image;
+            if (suffix && !url.startsWith("data:") && !url.startsWith("blob:")) url += (url.includes("?") ? "&" : "?") + suffix;
+            if (prefix && url[0] === "/") url = prefix + url;
+            return url;
+        },
+        resize(image, width, height, xGap, yGap, clip, smooth, opacity, _filters) {
+            const canvas = Platform.origin.createCanvas(max$4(floor$2(width + (xGap || 0)), 1), max$4(floor$2(height + (yGap || 0)), 1));
+            const ctx = canvas.getContext("2d");
+            if (opacity) ctx.globalAlpha = opacity;
+            ctx.imageSmoothingEnabled = smooth === false ? false : true;
+            if (clip) {
+                const scaleX = width / clip.width, scaleY = height / clip.height;
+                ctx.setTransform(scaleX, 0, 0, scaleY, -clip.x * scaleX, -clip.y * scaleY);
+                ctx.drawImage(image, 0, 0, image.width, image.height);
+            } else ctx.drawImage(image, 0, 0, width, height);
+            return canvas;
+        },
+        setPatternTransform(pattern, transform, paint) {
+            try {
+                if (transform && pattern.setTransform) {
+                    pattern.setTransform(transform);
+                    transform = undefined;
+                }
+            } catch (_a) {}
+            if (paint) DataHelper.stintSet(paint, "transform", transform);
+        }
+    }
+};
+
+const {image: image$1} = Platform;
+
+const IncrementId = {
+    RUNTIME: "runtime",
+    LEAF: "leaf",
+    TASK: "task",
+    CNAVAS: "canvas",
+    IMAGE: "image",
+    types: {},
+    create(typeName) {
+        const {types: types} = I$1;
+        if (types[typeName]) {
+            return types[typeName]++;
+        } else {
+            types[typeName] = 1;
+            return 0;
+        }
+    }
+};
+
+const I$1 = IncrementId;
+
 let tempA, tempB, tempTo;
 
-const {max: max$4} = Math, tempFour = [ 0, 0, 0, 0 ];
+const {max: max$3} = Math, tempFour = [ 0, 0, 0, 0 ];
 
 const FourNumberHelper = {
     zero: [ ...tempFour ],
@@ -301,9 +332,9 @@ const FourNumberHelper = {
         return data;
     },
     max(t, other, change) {
-        if (isNumber(t) && isNumber(other)) return max$4(t, other);
+        if (isNumber(t) && isNumber(other)) return max$3(t, other);
         toTempAB(t, other, change);
-        return set$2(tempTo, max$4(tempA[0], tempB[0]), max$4(tempA[1], tempB[1]), max$4(tempA[2], tempB[2]), max$4(tempA[3], tempB[3]));
+        return set$2(tempTo, max$3(tempA[0], tempB[0]), max$3(tempA[1], tempB[1]), max$3(tempA[2], tempB[2]), max$3(tempA[3], tempB[3]));
     },
     add(t, other, change) {
         if (isNumber(t) && isNumber(other)) return t + other;
@@ -320,7 +351,7 @@ const FourNumberHelper = {
 
 const {set: set$2, get: get$5, setTemp: setTemp, toTempAB: toTempAB} = FourNumberHelper;
 
-const {round: round$3, pow: pow$1, PI: PI$3} = Math;
+const {round: round$3, pow: pow$1, max: max$2, floor: floor$1, PI: PI$3} = Math;
 
 const MathHelper = {
     within(value, min, max) {
@@ -373,6 +404,9 @@ const MathHelper = {
             scaleData.scaleY = scale.y;
         }
     },
+    getFloorScale(num, min = 1) {
+        return max$2(floor$1(num), min) / num;
+    },
     randInt: randInt,
     randColor(opacity) {
         return `rgba(${randInt(255)},${randInt(255)},${randInt(255)},${opacity || 1})`;
@@ -1202,7 +1236,7 @@ const {toOuterPoint: toOuterPoint$2} = MatrixHelper;
 
 const {float: float, fourNumber: fourNumber} = MathHelper;
 
-const {floor: floor$2, ceil: ceil$2} = Math;
+const {floor: floor, ceil: ceil$1} = Math;
 
 let right$1, bottom$1, boundsRight, boundsBottom;
 
@@ -1294,20 +1328,20 @@ const BoundsHelper = {
     toOuterOf(t, matrix, to) {
         to || (to = t);
         if (matrix.b === 0 && matrix.c === 0) {
-            const {a: a, d: d} = matrix;
+            const {a: a, d: d, e: e, f: f} = matrix;
             if (a > 0) {
                 to.width = t.width * a;
-                to.x = matrix.e + t.x * a;
+                to.x = e + t.x * a;
             } else {
                 to.width = t.width * -a;
-                to.x = matrix.e + t.x * a - to.width;
+                to.x = e + t.x * a - to.width;
             }
             if (d > 0) {
                 to.height = t.height * d;
-                to.y = matrix.f + t.y * d;
+                to.y = f + t.y * d;
             } else {
                 to.height = t.height * -d;
-                to.y = matrix.f + t.y * d - to.height;
+                to.y = f + t.y * d - to.height;
             }
         } else {
             point.x = t.x;
@@ -1359,10 +1393,10 @@ const BoundsHelper = {
     },
     ceil(t) {
         const {x: x, y: y} = t;
-        t.x = floor$2(t.x);
-        t.y = floor$2(t.y);
-        t.width = x > t.x ? ceil$2(t.width + x - t.x) : ceil$2(t.width);
-        t.height = y > t.y ? ceil$2(t.height + y - t.y) : ceil$2(t.height);
+        t.x = floor(t.x);
+        t.y = floor(t.y);
+        t.width = x > t.x ? ceil$1(t.width + x - t.x) : ceil$1(t.width);
+        t.height = y > t.y ? ceil$1(t.height + y - t.y) : ceil$1(t.height);
     },
     unsign(t) {
         if (t.width < 0) {
@@ -2592,7 +2626,7 @@ const RectHelper = {
     }
 };
 
-const {sin: sin$3, cos: cos$3, hypot: hypot, atan2: atan2$1, ceil: ceil$1, abs: abs$3, PI: PI$2, sqrt: sqrt$1, pow: pow} = Math;
+const {sin: sin$3, cos: cos$3, hypot: hypot, atan2: atan2$1, ceil: ceil, abs: abs$3, PI: PI$2, sqrt: sqrt$1, pow: pow} = Math;
 
 const {setPoint: setPoint$1, addPoint: addPoint$1} = TwoPointBoundsHelper;
 
@@ -2700,7 +2734,7 @@ const BezierHelper = {
         let totalRadian = endRadian - startRadian;
         if (totalRadian < 0) totalRadian += PI2; else if (totalRadian > PI2) totalRadian -= PI2;
         if (anticlockwise) totalRadian -= PI2;
-        const parts = ceil$1(abs$3(totalRadian / PI_2));
+        const parts = ceil(abs$3(totalRadian / PI_2));
         const partRadian = totalRadian / parts;
         const partRadian4Sin = sin$3(partRadian / 4);
         const control = 8 / 3 * partRadian4Sin * partRadian4Sin / sin$3(partRadian / 2);
@@ -3708,7 +3742,9 @@ class TaskItem {
     run() {
         return __awaiter(this, void 0, void 0, function*() {
             try {
-                if (this.task && !this.isComplete && this.parent.running) yield this.task();
+                if (this.isComplete) return;
+                if (this.canUse && !this.canUse()) return this.cancel();
+                if (this.task && this.parent.running) yield this.task();
             } catch (error) {
                 debug$9.error(error);
             }
@@ -3716,8 +3752,7 @@ class TaskItem {
     }
     complete() {
         this.isComplete = true;
-        this.parent = null;
-        this.task = null;
+        this.parent = this.task = this.canUse = null;
     }
     cancel() {
         this.isCancel = true;
@@ -3760,7 +3795,7 @@ class TaskProcessor {
         if (config) DataHelper.assign(this.config, config);
         this.empty();
     }
-    add(taskCallback, options) {
+    add(taskCallback, options, canUse) {
         let start, parallel, time, delay;
         const task = new TaskItem(taskCallback);
         task.parent = this;
@@ -3771,9 +3806,11 @@ class TaskProcessor {
             start = options.start;
             time = options.time;
             delay = options.delay;
+            if (!canUse) canUse = options.canUse;
         }
         if (time) task.time = time;
         if (parallel === false) task.parallel = false;
+        if (canUse) task.canUse = canUse;
         if (isUndefined(delay)) {
             this.push(task, start);
         } else {
@@ -3843,15 +3880,10 @@ class TaskProcessor {
             this.timer = setTimeout(() => this.nextTask());
             return;
         }
-        if (task.isCancel) {
-            this.index++;
-            this.runTask();
-            return;
-        }
         task.run().then(() => {
             this.onTask(task);
             this.index++;
-            this.nextTask();
+            task.isCancel ? this.runTask() : this.nextTask();
         }).catch(error => {
             this.onError(error);
         });
@@ -4027,8 +4059,6 @@ const I = ImageManager;
 
 const {IMAGE: IMAGE, create: create$1} = IncrementId;
 
-const {floor: floor$1, max: max$3} = Math;
-
 class LeaferImage {
     get url() {
         return this.config.url;
@@ -4053,10 +4083,9 @@ class LeaferImage {
     load(onSuccess, onError) {
         if (!this.loading) {
             this.loading = true;
-            let {loadImage: loadImage, loadImageWithProgress: loadImageWithProgress} = Platform.origin, onProgress = this.config.showProgress && loadImageWithProgress && this.onProgress.bind(this);
-            if (onProgress) loadImage = loadImageWithProgress;
+            const {crossOrigin: crossOrigin} = this.config;
             Resource.tasker.add(() => __awaiter(this, void 0, void 0, function*() {
-                return yield loadImage(this.url, onProgress).then(img => this.setView(img)).catch(e => {
+                return yield Platform.origin.loadImage(this.url, isUndefined(crossOrigin) ? Platform.image.crossOrigin : crossOrigin, this).then(img => this.setView(img)).catch(e => {
                     this.error = e;
                     this.onComplete(false);
                 });
@@ -4082,9 +4111,6 @@ class LeaferImage {
         this.view = img;
         this.onComplete(true);
     }
-    onProgress(progress) {
-        this.progress = progress;
-    }
     onComplete(isSuccess) {
         let odd;
         this.waitComplete.forEach((item, index) => {
@@ -4103,7 +4129,7 @@ class LeaferImage {
     getFull(_filters) {
         return this.view;
     }
-    getCanvas(width, height, opacity, _filters, xGap, yGap, smooth) {
+    getCanvas(width, height, opacity, filters, xGap, yGap, smooth) {
         width || (width = this.width);
         height || (height = this.height);
         if (this.cache) {
@@ -4116,11 +4142,7 @@ class LeaferImage {
             }
             if (data) return data;
         }
-        const canvas = Platform.origin.createCanvas(max$3(floor$1(width + (xGap || 0)), 1), max$3(floor$1(height + (yGap || 0)), 1));
-        const ctx = canvas.getContext("2d");
-        if (opacity) ctx.globalAlpha = opacity;
-        ctx.imageSmoothingEnabled = smooth === false ? false : true;
-        ctx.drawImage(this.view, 0, 0, width, height);
+        const canvas = Platform.image.resize(this.view, width, height, xGap, yGap, undefined, smooth, opacity, filters);
         this.cache = this.use > 1 ? {
             data: canvas,
             params: arguments
@@ -4129,13 +4151,7 @@ class LeaferImage {
     }
     getPattern(canvas, repeat, transform, paint) {
         const pattern = Platform.canvas.createPattern(canvas, repeat);
-        try {
-            if (transform && pattern.setTransform) {
-                pattern.setTransform(transform);
-                transform = undefined;
-            }
-        } catch (_a) {}
-        if (paint) DataHelper.stintSet(paint, "transform", transform);
+        Platform.image.setPatternTransform(pattern, transform, paint);
         return pattern;
     }
     destroy() {
@@ -5809,12 +5825,12 @@ const {toBounds: toBounds} = PathBounds;
 
 const LeafBounds = {
     __updateWorldBounds() {
-        const layout = this.__layout;
-        toOuterOf$2(layout.renderBounds, this.__world, this.__world);
-        if (layout.resized) {
-            if (layout.resized === "inner") this.__onUpdateSize();
+        const {__layout: __layout, __world: __world} = this;
+        toOuterOf$2(__layout.renderBounds, __world, __world);
+        if (__layout.resized) {
+            if (__layout.resized === "inner") this.__onUpdateSize();
             if (this.__hasLocalEvent) BoundsEvent.emitLocal(this);
-            layout.resized = undefined;
+            __layout.resized = undefined;
         }
         if (this.__hasWorldEvent) BoundsEvent.emitWorld(this);
     },
@@ -6012,7 +6028,7 @@ const tempScaleData$1 = {};
 
 const {LEAF: LEAF, create: create} = IncrementId;
 
-const {stintSet: stintSet$3} = DataHelper;
+const {stintSet: stintSet$4} = DataHelper;
 
 const {toInnerPoint: toInnerPoint, toOuterPoint: toOuterPoint, multiplyParent: multiplyParent$1} = MatrixHelper;
 
@@ -6295,8 +6311,8 @@ let Leaf = class Leaf {
             const cameraWorld = this.__cameraWorld, world = this.__world;
             multiplyParent$1(world, options.matrix, cameraWorld, undefined, world);
             toOuterOf$1(this.__layout.renderBounds, cameraWorld, cameraWorld);
-            stintSet$3(cameraWorld, "half", world.half);
-            stintSet$3(cameraWorld, "ignorePixelSnap", world.ignorePixelSnap);
+            stintSet$4(cameraWorld, "half", world.half);
+            stintSet$4(cameraWorld, "ignorePixelSnap", world.ignorePixelSnap);
             return cameraWorld;
         } else {
             return this.__world;
@@ -6819,7 +6835,7 @@ class LeafLevelList {
     }
 }
 
-const version = "1.9.11";
+const version = "1.10.0";
 
 const debug$4 = Debug.get("LeaferCanvas");
 
@@ -7797,7 +7813,7 @@ const Transition = {
 
 const {parse: parse, objectToCanvasData: objectToCanvasData} = PathConvert;
 
-const {stintSet: stintSet$2} = DataHelper, {hasTransparent: hasTransparent$2} = ColorConvert;
+const {stintSet: stintSet$3} = DataHelper, {hasTransparent: hasTransparent$2} = ColorConvert;
 
 const emptyPaint = {};
 
@@ -7864,7 +7880,7 @@ class UIData extends LeafData {
     setFill(value) {
         if (this.__naturalWidth) this.__removeNaturalSize();
         if (isString(value) || !value) {
-            stintSet$2(this, "__isTransparentFill", hasTransparent$2(value));
+            stintSet$3(this, "__isTransparentFill", hasTransparent$2(value));
             this.__isFills && this.__removePaint("fill", true);
             this._fill = value;
         } else if (isObject(value)) {
@@ -7873,7 +7889,7 @@ class UIData extends LeafData {
     }
     setStroke(value) {
         if (isString(value) || !value) {
-            stintSet$2(this, "__isTransparentStroke", hasTransparent$2(value));
+            stintSet$3(this, "__isTransparentStroke", hasTransparent$2(value));
             this.__isStrokes && this.__removePaint("stroke", true);
             this._stroke = value;
         } else if (isObject(value)) {
@@ -7931,11 +7947,11 @@ class UIData extends LeafData {
         if (removeInput) this.__removeInput(attrName);
         PaintImage.recycleImage(attrName, this);
         if (attrName === "fill") {
-            stintSet$2(this, "__isAlphaPixelFill", undefined);
+            stintSet$3(this, "__isAlphaPixelFill", undefined);
             this._fill = this.__isFills = undefined;
         } else {
-            stintSet$2(this, "__isAlphaPixelStroke", undefined);
-            stintSet$2(this, "__hasMultiStrokeStyle", undefined);
+            stintSet$3(this, "__isAlphaPixelStroke", undefined);
+            stintSet$3(this, "__hasMultiStrokeStyle", undefined);
             this._stroke = this.__isStrokes = undefined;
         }
     }
@@ -8084,7 +8100,7 @@ class CanvasData extends RectData {
     }
 }
 
-const {max: max$2, add: add$1} = FourNumberHelper;
+const {max: max$1, add: add$1} = FourNumberHelper;
 
 const UIBounds = {
     __updateStrokeSpread() {
@@ -8100,7 +8116,7 @@ const UIBounds = {
         }
         if (data.__useArrow) spread += strokeWidth * 5;
         if (box) {
-            spread = max$2(spread, box.__layout.strokeSpread = box.__updateStrokeSpread());
+            spread = max$1(spread, box.__layout.strokeSpread = box.__updateStrokeSpread());
             boxSpread = Math.max(boxSpread, box.__layout.strokeBoxSpread);
         }
         this.__layout.strokeBoxSpread = boxSpread;
@@ -8110,35 +8126,35 @@ const UIBounds = {
         let spread = 0;
         const {shadow: shadow, innerShadow: innerShadow, blur: blur, backgroundBlur: backgroundBlur, filter: filter, renderSpread: renderSpread} = this.__, {strokeSpread: strokeSpread} = this.__layout, box = this.__box;
         if (shadow) spread = Effect.getShadowRenderSpread(this, shadow);
-        if (blur) spread = max$2(spread, blur);
+        if (blur) spread = max$1(spread, blur);
         if (filter) spread = add$1(spread, Filter.getSpread(filter));
         if (renderSpread) spread = add$1(spread, renderSpread);
         if (strokeSpread) spread = add$1(spread, strokeSpread);
         let shapeSpread = spread;
-        if (innerShadow) shapeSpread = max$2(shapeSpread, Effect.getInnerShadowSpread(this, innerShadow));
-        if (backgroundBlur) shapeSpread = max$2(shapeSpread, backgroundBlur);
+        if (innerShadow) shapeSpread = max$1(shapeSpread, Effect.getInnerShadowSpread(this, innerShadow));
+        if (backgroundBlur) shapeSpread = max$1(shapeSpread, backgroundBlur);
         this.__layout.renderShapeSpread = shapeSpread;
-        return box ? max$2(box.__updateRenderSpread(), spread) : spread;
+        return box ? max$1(box.__updateRenderSpread(), spread) : spread;
     }
 };
 
-const {stintSet: stintSet$1} = DataHelper;
+const {stintSet: stintSet$2} = DataHelper;
 
 const UIRender = {
     __updateChange() {
         const data = this.__;
         if (data.__useStroke) {
             const useStroke = data.__useStroke = !!(data.stroke && data.strokeWidth);
-            stintSet$1(this.__world, "half", useStroke && data.strokeAlign === "center" && data.strokeWidth % 2);
-            stintSet$1(data, "__fillAfterStroke", useStroke && data.strokeAlign === "outside" && data.fill && !data.__isTransparentFill);
+            stintSet$2(this.__world, "half", useStroke && data.strokeAlign === "center" && data.strokeWidth % 2);
+            stintSet$2(data, "__fillAfterStroke", useStroke && data.strokeAlign === "outside" && data.fill && !data.__isTransparentFill);
         }
         if (data.__useEffect) {
             const {shadow: shadow, fill: fill, stroke: stroke} = data, otherEffect = data.innerShadow || data.blur || data.backgroundBlur || data.filter;
-            stintSet$1(data, "__isFastShadow", shadow && !otherEffect && shadow.length < 2 && !shadow[0].spread && !Effect.isTransformShadow(shadow[0]) && fill && !data.__isTransparentFill && !(isArray(fill) && fill.length > 1) && (this.useFastShadow || !stroke || stroke && data.strokeAlign === "inside"));
+            stintSet$2(data, "__isFastShadow", shadow && !otherEffect && shadow.length < 2 && !shadow[0].spread && !Effect.isTransformShadow(shadow[0]) && fill && !data.__isTransparentFill && !(isArray(fill) && fill.length > 1) && (this.useFastShadow || !stroke || stroke && data.strokeAlign === "inside"));
             data.__useEffect = !!(shadow || otherEffect);
         }
         data.__checkSingle();
-        stintSet$1(data, "__complex", data.__isFills || data.__isStrokes || data.cornerRadius || data.__useEffect);
+        stintSet$2(data, "__complex", data.__isFills || data.__isStrokes || data.cornerRadius || data.__useEffect);
     },
     __drawFast(canvas, options) {
         drawFast(this, canvas, options);
@@ -8154,24 +8170,24 @@ const UIRender = {
                 this.__nowWorld = this.__getNowWorld(options);
                 const {shadow: shadow, innerShadow: innerShadow, filter: filter} = data;
                 if (shadow) Effect.shadow(this, canvas, shape);
-                if (__fillAfterStroke) data.__isStrokes ? Paint.strokes(stroke, this, canvas) : Paint.stroke(stroke, this, canvas);
-                if (fill) data.__isFills ? Paint.fills(fill, this, canvas) : Paint.fill(fill, this, canvas);
+                if (__fillAfterStroke) data.__isStrokes ? Paint.strokes(stroke, this, canvas, options) : Paint.stroke(stroke, this, canvas, options);
+                if (fill) data.__isFills ? Paint.fills(fill, this, canvas, options) : Paint.fill(fill, this, canvas, options);
                 if (__drawAfterFill) this.__drawAfterFill(canvas, options);
                 if (innerShadow) Effect.innerShadow(this, canvas, shape);
-                if (stroke && !__fillAfterStroke) data.__isStrokes ? Paint.strokes(stroke, this, canvas) : Paint.stroke(stroke, this, canvas);
+                if (stroke && !__fillAfterStroke) data.__isStrokes ? Paint.strokes(stroke, this, canvas, options) : Paint.stroke(stroke, this, canvas, options);
                 if (filter) Filter.apply(filter, this, this.__nowWorld, canvas, originCanvas, shape);
                 if (shape.worldCanvas) shape.worldCanvas.recycle();
                 shape.canvas.recycle();
             } else {
-                if (__fillAfterStroke) data.__isStrokes ? Paint.strokes(stroke, this, canvas) : Paint.stroke(stroke, this, canvas);
+                if (__fillAfterStroke) data.__isStrokes ? Paint.strokes(stroke, this, canvas, options) : Paint.stroke(stroke, this, canvas, options);
                 if (__isFastShadow) {
                     const shadow = data.shadow[0], {scaleX: scaleX, scaleY: scaleY} = this.getRenderScaleData(true, shadow.scaleFixed);
                     canvas.save(), canvas.setWorldShadow(shadow.x * scaleX, shadow.y * scaleY, shadow.blur * scaleX, ColorConvert.string(shadow.color));
                 }
-                if (fill) data.__isFills ? Paint.fills(fill, this, canvas) : Paint.fill(fill, this, canvas);
+                if (fill) data.__isFills ? Paint.fills(fill, this, canvas, options) : Paint.fill(fill, this, canvas, options);
                 if (__isFastShadow) canvas.restore();
                 if (__drawAfterFill) this.__drawAfterFill(canvas, options);
-                if (stroke && !__fillAfterStroke) data.__isStrokes ? Paint.strokes(stroke, this, canvas) : Paint.stroke(stroke, this, canvas);
+                if (stroke && !__fillAfterStroke) data.__isStrokes ? Paint.strokes(stroke, this, canvas, options) : Paint.stroke(stroke, this, canvas, options);
             }
         } else {
             if (data.__pathInputed) drawFast(this, canvas, options); else this.__drawFast(canvas, options);
@@ -8180,9 +8196,9 @@ const UIRender = {
     __drawShape(canvas, options) {
         this.__drawRenderPath(canvas);
         const data = this.__, {fill: fill, stroke: stroke} = data;
-        if (fill && !options.ignoreFill) data.__isAlphaPixelFill ? Paint.fills(fill, this, canvas) : Paint.fill("#000000", this, canvas);
+        if (fill && !options.ignoreFill) data.__isAlphaPixelFill ? Paint.fills(fill, this, canvas, options) : Paint.fill("#000000", this, canvas, options);
         if (data.__isCanvas) this.__drawAfterFill(canvas, options);
-        if (stroke && !options.ignoreStroke) data.__isAlphaPixelStroke ? Paint.strokes(stroke, this, canvas) : Paint.stroke("#000000", this, canvas);
+        if (stroke && !options.ignoreStroke) data.__isAlphaPixelStroke ? Paint.strokes(stroke, this, canvas, options) : Paint.stroke("#000000", this, canvas, options);
     },
     __drawAfterFill(canvas, options) {
         if (this.__.__clipAfterFill) {
@@ -8197,10 +8213,10 @@ const UIRender = {
 function drawFast(ui, canvas, options) {
     const {fill: fill, stroke: stroke, __drawAfterFill: __drawAfterFill, __fillAfterStroke: __fillAfterStroke} = ui.__;
     ui.__drawRenderPath(canvas);
-    if (__fillAfterStroke) Paint.stroke(stroke, ui, canvas);
-    if (fill) Paint.fill(fill, ui, canvas);
+    if (__fillAfterStroke) Paint.stroke(stroke, ui, canvas, options);
+    if (fill) Paint.fill(fill, ui, canvas, options);
     if (__drawAfterFill) ui.__drawAfterFill(canvas, options);
-    if (stroke && !__fillAfterStroke) Paint.stroke(stroke, ui, canvas);
+    if (stroke && !__fillAfterStroke) Paint.stroke(stroke, ui, canvas, options);
 }
 
 const RectRender = {
@@ -8338,8 +8354,8 @@ let UI = UI_1 = class UI extends Leaf {
             drawer.roundRect(x, y, width, height, isNumber(cornerRadius) ? [ cornerRadius ] : cornerRadius);
         } else drawer.rect(x, y, width, height);
     }
-    drawImagePlaceholder(canvas, _image) {
-        Paint.fill(this.__.placeholderColor, this, canvas);
+    drawImagePlaceholder(_image, canvas, renderOptions) {
+        Paint.fill(this.__.placeholderColor, this, canvas, renderOptions);
     }
     animate(keyframe, _options, _type, _isTemp) {
         this.set(keyframe);
@@ -9361,7 +9377,7 @@ __decorate([ resizeType() ], Canvas.prototype, "contextSettings", void 0);
 
 Canvas = __decorate([ registerUI() ], Canvas);
 
-const {copyAndSpread: copyAndSpread$1, includes: includes, spread: spread, setList: setList} = BoundsHelper;
+const {copyAndSpread: copyAndSpread$1, includes: includes, spread: spread, setList: setList} = BoundsHelper, {stintSet: stintSet$1} = DataHelper;
 
 let Text = class Text extends UI {
     get __tag() {
@@ -9373,13 +9389,14 @@ let Text = class Text extends UI {
     }
     __updateTextDrawData() {
         const data = this.__;
-        const {lineHeight: lineHeight, letterSpacing: letterSpacing, fontFamily: fontFamily, fontSize: fontSize, fontWeight: fontWeight, italic: italic, textCase: textCase, textOverflow: textOverflow, padding: padding} = data;
+        const {lineHeight: lineHeight, letterSpacing: letterSpacing, fontFamily: fontFamily, fontSize: fontSize, fontWeight: fontWeight, italic: italic, textCase: textCase, textOverflow: textOverflow, padding: padding, width: width, height: height} = data;
         data.__lineHeight = UnitConvert.number(lineHeight, fontSize);
         data.__letterSpacing = UnitConvert.number(letterSpacing, fontSize);
-        data.__padding = padding ? MathHelper.fourNumber(padding) : undefined;
         data.__baseLine = data.__lineHeight - (data.__lineHeight - fontSize * .7) / 2;
         data.__font = `${italic ? "italic " : ""}${textCase === "small-caps" ? "small-caps " : ""}${fontWeight !== "normal" ? fontWeight + " " : ""}${fontSize || 12}px ${fontFamily || "caption"}`;
-        data.__clipText = textOverflow !== "show" && !data.__autoSize;
+        stintSet$1(data, "__padding", padding && MathHelper.fourNumber(padding));
+        stintSet$1(data, "__clipText", textOverflow !== "show" && !data.__autoSize);
+        stintSet$1(data, "__isCharMode", width || height || data.__letterSpacing || textCase !== "none");
         data.__textDrawData = TextConvert.getDrawData((data.__isPlacehold = data.placeholder && data.text === "") ? data.placeholder : data.text, this.__);
     }
     __updateBoxBounds() {
@@ -9589,36 +9606,19 @@ function penPathType() {
     };
 }
 
-function fillText(ui, canvas) {
-    const data = ui.__, {rows: rows, decorationY: decorationY} = data.__textDrawData;
-    if (data.__isPlacehold && data.placeholderColor) canvas.fillStyle = data.placeholderColor;
-    let row;
-    for (let i = 0, len = rows.length; i < len; i++) {
-        row = rows[i];
-        if (row.text) canvas.fillText(row.text, row.x, row.y); else if (row.data) row.data.forEach(charData => {
-            canvas.fillText(charData.char, charData.x, row.y);
-        });
-    }
-    if (decorationY) {
-        const {decorationColor: decorationColor, decorationHeight: decorationHeight} = data.__textDrawData;
-        if (decorationColor) canvas.fillStyle = decorationColor;
-        rows.forEach(row => decorationY.forEach(value => canvas.fillRect(row.x, row.y + value, row.width, decorationHeight)));
-    }
-}
-
-function fill(fill, ui, canvas) {
+function fill(fill, ui, canvas, renderOptions) {
     canvas.fillStyle = fill;
-    fillPathOrText(ui, canvas);
+    fillPathOrText(ui, canvas, renderOptions);
 }
 
-function fills(fills, ui, canvas) {
+function fills(fills, ui, canvas, renderOptions) {
     let item;
     for (let i = 0, len = fills.length; i < len; i++) {
         item = fills[i];
         if (item.image) {
-            if (PaintImage.checkImage(ui, canvas, item, !ui.__.__font)) continue;
+            if (PaintImage.checkImage(item, !ui.__.__font, ui, canvas, renderOptions)) continue;
             if (!item.style) {
-                if (!i && item.image.isPlacehold) ui.drawImagePlaceholder(canvas, item.image);
+                if (!i && item.image.isPlacehold) ui.drawImagePlaceholder(item.image, canvas, renderOptions);
                 continue;
             }
         }
@@ -9631,60 +9631,137 @@ function fills(fills, ui, canvas) {
                 if (item.scaleFixed === true || item.scaleFixed === "zoom-in" && scaleX > 1 && scaleY > 1) canvas.scale(1 / scaleX, 1 / scaleY);
             }
             if (item.blendMode) canvas.blendMode = item.blendMode;
-            fillPathOrText(ui, canvas);
+            fillPathOrText(ui, canvas, renderOptions);
             canvas.restore();
         } else {
             if (item.blendMode) {
                 canvas.saveBlendMode(item.blendMode);
-                fillPathOrText(ui, canvas);
+                fillPathOrText(ui, canvas, renderOptions);
                 canvas.restoreBlendMode();
-            } else fillPathOrText(ui, canvas);
+            } else fillPathOrText(ui, canvas, renderOptions);
+        }
+    }
+}
+
+function fillPathOrText(ui, canvas, renderOptions) {
+    ui.__.__font ? Paint.fillText(ui, canvas, renderOptions) : ui.__.windingRule ? canvas.fill(ui.__.windingRule) : canvas.fill();
+}
+
+function fillText(ui, canvas, _renderOptions) {
+    const data = ui.__, {rows: rows, decorationY: decorationY} = data.__textDrawData;
+    if (data.__isPlacehold && data.placeholderColor) canvas.fillStyle = data.placeholderColor;
+    let row;
+    for (let i = 0, len = rows.length; i < len; i++) {
+        row = rows[i];
+        if (row.text) canvas.fillText(row.text, row.x, row.y); else if (row.data) row.data.forEach(charData => {
+            canvas.fillText(charData.char, charData.x, row.y);
+        });
+    }
+    if (decorationY) {
+        const {decorationColor: decorationColor, decorationHeight: decorationHeight} = data.__textDrawData;
+        if (decorationColor) canvas.fillStyle = decorationColor;
+        rows.forEach(row => decorationY.forEach(value => canvas.fillRect(row.x, row.y + value, row.width, decorationHeight)));
+    }
+}
+
+function stroke(stroke, ui, canvas, renderOptions) {
+    const data = ui.__;
+    if (!data.__strokeWidth) return;
+    if (data.__font) {
+        Paint.strokeText(stroke, ui, canvas, renderOptions);
+    } else {
+        switch (data.strokeAlign) {
+          case "center":
+            drawCenter$1(stroke, 1, ui, canvas, renderOptions);
+            break;
+
+          case "inside":
+            drawInside(stroke, ui, canvas, renderOptions);
+            break;
+
+          case "outside":
+            drawOutside(stroke, ui, canvas, renderOptions);
+            break;
         }
     }
 }
 
-function fillPathOrText(ui, canvas) {
-    ui.__.__font ? fillText(ui, canvas) : ui.__.windingRule ? canvas.fill(ui.__.windingRule) : canvas.fill();
+function strokes(strokes, ui, canvas, renderOptions) {
+    Paint.stroke(strokes, ui, canvas, renderOptions);
+}
+
+function drawCenter$1(stroke, strokeWidthScale, ui, canvas, renderOptions) {
+    const data = ui.__;
+    if (isObject(stroke)) {
+        Paint.drawStrokesStyle(stroke, strokeWidthScale, false, ui, canvas, renderOptions);
+    } else {
+        canvas.setStroke(stroke, data.__strokeWidth * strokeWidthScale, data);
+        canvas.stroke();
+    }
+    if (data.__useArrow) Paint.strokeArrow(stroke, ui, canvas, renderOptions);
+}
+
+function drawInside(stroke, ui, canvas, renderOptions) {
+    canvas.save();
+    canvas.clipUI(ui);
+    drawCenter$1(stroke, 2, ui, canvas, renderOptions);
+    canvas.restore();
+}
+
+function drawOutside(stroke, ui, canvas, renderOptions) {
+    const data = ui.__;
+    if (data.__fillAfterStroke) {
+        drawCenter$1(stroke, 2, ui, canvas, renderOptions);
+    } else {
+        const {renderBounds: renderBounds} = ui.__layout;
+        const out = canvas.getSameCanvas(true, true);
+        ui.__drawRenderPath(out);
+        drawCenter$1(stroke, 2, ui, out, renderOptions);
+        out.clipUI(data);
+        out.clearWorld(renderBounds);
+        LeafHelper.copyCanvasByWorld(ui, canvas, out);
+        out.recycle(ui.__nowWorld);
+    }
 }
 
-function strokeText(stroke, ui, canvas) {
+function strokeText(stroke, ui, canvas, renderOptions) {
     switch (ui.__.strokeAlign) {
       case "center":
-        drawCenter$1(stroke, 1, ui, canvas);
+        drawCenter(stroke, 1, ui, canvas, renderOptions);
         break;
 
       case "inside":
-        drawAlign(stroke, "inside", ui, canvas);
+        drawAlign(stroke, "inside", ui, canvas, renderOptions);
         break;
 
       case "outside":
-        ui.__.__fillAfterStroke ? drawCenter$1(stroke, 2, ui, canvas) : drawAlign(stroke, "outside", ui, canvas);
+        ui.__.__fillAfterStroke ? drawCenter(stroke, 2, ui, canvas, renderOptions) : drawAlign(stroke, "outside", ui, canvas, renderOptions);
         break;
     }
 }
 
-function drawCenter$1(stroke, strokeWidthScale, ui, canvas) {
+function drawCenter(stroke, strokeWidthScale, ui, canvas, renderOptions) {
     const data = ui.__;
     if (isObject(stroke)) {
-        drawStrokesStyle(stroke, strokeWidthScale, true, ui, canvas);
+        Paint.drawStrokesStyle(stroke, strokeWidthScale, true, ui, canvas, renderOptions);
     } else {
         canvas.setStroke(stroke, data.__strokeWidth * strokeWidthScale, data);
-        drawTextStroke(ui, canvas);
+        Paint.drawTextStroke(ui, canvas, renderOptions);
     }
 }
 
-function drawAlign(stroke, align, ui, canvas) {
+function drawAlign(stroke, align, ui, canvas, renderOptions) {
     const out = canvas.getSameCanvas(true, true);
     out.font = ui.__.__font;
-    drawCenter$1(stroke, 2, ui, out);
+    drawCenter(stroke, 2, ui, out, renderOptions);
     out.blendMode = align === "outside" ? "destination-out" : "destination-in";
-    fillText(ui, out);
+    Paint.fillText(ui, out, renderOptions);
     out.blendMode = "normal";
     LeafHelper.copyCanvasByWorld(ui, canvas, out);
     out.recycle(ui.__nowWorld);
 }
 
-function drawTextStroke(ui, canvas) {
+function drawTextStroke(ui, canvas, _renderOptions) {
     let row, data = ui.__.__textDrawData;
     const {rows: rows, decorationY: decorationY} = data;
     for (let i = 0, len = rows.length; i < len; i++) {
@@ -9699,13 +9776,13 @@ function drawTextStroke(ui, canvas) {
     }
 }
 
-function drawStrokesStyle(strokes, strokeWidthScale, isText, ui, canvas) {
+function drawStrokesStyle(strokes, strokeWidthScale, isText, ui, canvas, renderOptions) {
     let item;
     const data = ui.__, {__hasMultiStrokeStyle: __hasMultiStrokeStyle} = data;
     __hasMultiStrokeStyle || canvas.setStroke(undefined, data.__strokeWidth * strokeWidthScale, data);
     for (let i = 0, len = strokes.length; i < len; i++) {
         item = strokes[i];
-        if (item.image && PaintImage.checkImage(ui, canvas, item, false)) continue;
+        if (item.image && PaintImage.checkImage(item, false, ui, canvas, renderOptions)) continue;
         if (item.style) {
             if (__hasMultiStrokeStyle) {
                 const {strokeStyle: strokeStyle} = item;
@@ -9713,75 +9790,15 @@ function drawStrokesStyle(strokes, strokeWidthScale, isText, ui, canvas) {
             } else canvas.strokeStyle = item.style;
             if (item.blendMode) {
                 canvas.saveBlendMode(item.blendMode);
-                isText ? drawTextStroke(ui, canvas) : canvas.stroke();
+                isText ? Paint.drawTextStroke(ui, canvas, renderOptions) : canvas.stroke();
                 canvas.restoreBlendMode();
             } else {
-                isText ? drawTextStroke(ui, canvas) : canvas.stroke();
+                isText ? Paint.drawTextStroke(ui, canvas, renderOptions) : canvas.stroke();
             }
         }
     }
 }
 
-function stroke(stroke, ui, canvas) {
-    const data = ui.__;
-    if (!data.__strokeWidth) return;
-    if (data.__font) {
-        strokeText(stroke, ui, canvas);
-    } else {
-        switch (data.strokeAlign) {
-          case "center":
-            drawCenter(stroke, 1, ui, canvas);
-            break;
-
-          case "inside":
-            drawInside(stroke, ui, canvas);
-            break;
-
-          case "outside":
-            drawOutside(stroke, ui, canvas);
-            break;
-        }
-    }
-}
-
-function strokes(strokes, ui, canvas) {
-    stroke(strokes, ui, canvas);
-}
-
-function drawCenter(stroke, strokeWidthScale, ui, canvas) {
-    const data = ui.__;
-    if (isObject(stroke)) {
-        drawStrokesStyle(stroke, strokeWidthScale, false, ui, canvas);
-    } else {
-        canvas.setStroke(stroke, data.__strokeWidth * strokeWidthScale, data);
-        canvas.stroke();
-    }
-    if (data.__useArrow) Paint.strokeArrow(stroke, ui, canvas);
-}
-
-function drawInside(stroke, ui, canvas) {
-    canvas.save();
-    canvas.clipUI(ui);
-    drawCenter(stroke, 2, ui, canvas);
-    canvas.restore();
-}
-
-function drawOutside(stroke, ui, canvas) {
-    const data = ui.__;
-    if (data.__fillAfterStroke) {
-        drawCenter(stroke, 2, ui, canvas);
-    } else {
-        const {renderBounds: renderBounds} = ui.__layout;
-        const out = canvas.getSameCanvas(true, true);
-        ui.__drawRenderPath(out);
-        drawCenter(stroke, 2, ui, out);
-        out.clipUI(data);
-        out.clearWorld(renderBounds);
-        LeafHelper.copyCanvasByWorld(ui, canvas, out);
-        out.recycle(ui.__nowWorld);
-    }
-}
-
 const {getSpread: getSpread, copyAndSpread: copyAndSpread, toOuterOf: toOuterOf, getOuterOf: getOuterOf, getByMove: getByMove, move: move$1, getIntersectData: getIntersectData} = BoundsHelper;
 
 const tempBounds$1 = {};
@@ -9937,88 +9954,118 @@ const PaintModule = {
     strokes: strokes,
     strokeText: strokeText,
     drawTextStroke: drawTextStroke,
+    drawStrokesStyle: drawStrokesStyle,
     shape: shape
 };
 
-let origin = {}, tempMatrix$1 = getMatrixData();
-
-const {get: get$3, set: set, rotateOfOuter: rotateOfOuter$1, translate: translate$1, scaleOfOuter: scaleOfOuter$1, multiplyParent: multiplyParent, scale: scaleHelper, rotate: rotate, skew: skewHelper} = MatrixHelper;
-
-function stretchMode(data, box, scaleX, scaleY) {
-    const transform = get$3();
-    translate$1(transform, box.x, box.y);
-    if (scaleX) scaleHelper(transform, scaleX, scaleY);
-    data.transform = transform;
-}
-
-function fillOrFitMode(data, box, x, y, scaleX, scaleY, rotation) {
-    const transform = get$3();
-    translate$1(transform, box.x + x, box.y + y);
-    scaleHelper(transform, scaleX, scaleY);
-    if (rotation) rotateOfOuter$1(transform, {
-        x: box.x + box.width / 2,
-        y: box.y + box.height / 2
-    }, rotation);
-    data.transform = transform;
-}
+let cache, box = new Bounds;
 
-function clipMode(data, box, x, y, scaleX, scaleY, rotation, skew, clipScaleX, clipScaleY) {
-    const transform = get$3();
-    layout(transform, box, x, y, scaleX, scaleY, rotation, skew);
-    if (clipScaleX) {
-        if (rotation || skew) {
-            set(tempMatrix$1);
-            scaleOfOuter$1(tempMatrix$1, box, clipScaleX, clipScaleY);
-            multiplyParent(transform, tempMatrix$1);
-        } else scaleOfOuter$1(transform, box, clipScaleX, clipScaleY);
-    }
-    data.transform = transform;
-}
+const {isSame: isSame} = BoundsHelper;
 
-function repeatMode(data, box, width, height, x, y, scaleX, scaleY, rotation, skew, align, freeTransform) {
-    const transform = get$3();
-    if (freeTransform) {
-        layout(transform, box, x, y, scaleX, scaleY, rotation, skew);
-    } else {
-        if (rotation) {
-            if (align === "center") {
-                rotateOfOuter$1(transform, {
-                    x: width / 2,
-                    y: height / 2
-                }, rotation);
-            } else {
-                rotate(transform, rotation);
-                switch (rotation) {
-                  case 90:
-                    translate$1(transform, height, 0);
-                    break;
-
-                  case 180:
-                    translate$1(transform, width, height);
-                    break;
-
-                  case 270:
-                    translate$1(transform, 0, width);
-                    break;
+function image(ui, attrName, paint, boxBounds, firstUse) {
+    let leafPaint, event;
+    const image = ImageManager.get(paint);
+    if (cache && paint === cache.paint && isSame(boxBounds, cache.boxBounds)) {
+        leafPaint = cache.leafPaint;
+    } else {
+        leafPaint = {
+            type: paint.type,
+            image: image
+        };
+        if (image.hasAlphaPixel) leafPaint.isTransparent = true;
+        cache = image.use > 1 ? {
+            leafPaint: leafPaint,
+            paint: paint,
+            boxBounds: box.set(boxBounds)
+        } : null;
+    }
+    if (firstUse || image.loading) event = {
+        image: image,
+        attrName: attrName,
+        attrValue: paint
+    };
+    if (image.ready) {
+        checkSizeAndCreateData(ui, attrName, paint, image, leafPaint, boxBounds);
+        if (firstUse) {
+            onLoad(ui, event);
+            onLoadSuccess(ui, event);
+        }
+    } else if (image.error) {
+        if (firstUse) onLoadError(ui, event, image.error);
+    } else {
+        if (firstUse) {
+            ignoreRender(ui, true);
+            onLoad(ui, event);
+        }
+        leafPaint.loadId = image.load(() => {
+            ignoreRender(ui, false);
+            if (!ui.destroyed) {
+                if (checkSizeAndCreateData(ui, attrName, paint, image, leafPaint, boxBounds)) {
+                    if (image.hasAlphaPixel) ui.__layout.hitCanvasChanged = true;
+                    ui.forceUpdate("surface");
                 }
+                onLoadSuccess(ui, event);
             }
+            leafPaint.loadId = undefined;
+        }, error => {
+            ignoreRender(ui, false);
+            onLoadError(ui, event, error);
+            leafPaint.loadId = undefined;
+        });
+        if (ui.placeholderColor) {
+            if (!ui.placeholderDelay) image.isPlacehold = true; else setTimeout(() => {
+                if (!image.ready) {
+                    image.isPlacehold = true;
+                    ui.forceUpdate("surface");
+                }
+            }, ui.placeholderDelay);
         }
-        origin.x = box.x + x;
-        origin.y = box.y + y;
-        translate$1(transform, origin.x, origin.y);
-        if (scaleX) scaleOfOuter$1(transform, origin, scaleX, scaleY);
     }
-    data.transform = transform;
+    return leafPaint;
 }
 
-function layout(transform, box, x, y, scaleX, scaleY, rotation, skew) {
-    if (rotation) rotate(transform, rotation);
-    if (skew) skewHelper(transform, skew.x, skew.y);
-    if (scaleX) scaleHelper(transform, scaleX, scaleY);
-    translate$1(transform, box.x + x, box.y + y);
+function checkSizeAndCreateData(ui, attrName, paint, image, leafPaint, boxBounds) {
+    if (attrName === "fill" && !ui.__.__naturalWidth) {
+        const data = ui.__;
+        data.__naturalWidth = image.width / data.pixelRatio;
+        data.__naturalHeight = image.height / data.pixelRatio;
+        if (data.__autoSide) {
+            ui.forceUpdate("width");
+            if (ui.__proxyData) {
+                ui.setProxyAttr("width", data.width);
+                ui.setProxyAttr("height", data.height);
+            }
+            return false;
+        }
+    }
+    if (!leafPaint.data) PaintImage.createData(leafPaint, image, paint, boxBounds);
+    return true;
+}
+
+function onLoad(ui, event) {
+    emit(ui, ImageEvent.LOAD, event);
+}
+
+function onLoadSuccess(ui, event) {
+    emit(ui, ImageEvent.LOADED, event);
+}
+
+function onLoadError(ui, event, error) {
+    event.error = error;
+    ui.forceUpdate("surface");
+    emit(ui, ImageEvent.ERROR, event);
+}
+
+function emit(ui, type, data) {
+    if (ui.hasEvent(type)) ui.emitEvent(new ImageEvent(type, data));
 }
 
-const {get: get$2, translate: translate} = MatrixHelper;
+function ignoreRender(ui, value) {
+    const {leafer: leafer} = ui;
+    if (leafer && leafer.viewReady) leafer.renderer.ignore = value;
+}
+
+const {get: get$3, translate: translate$1} = MatrixHelper;
 
 const tempBox = new Bounds;
 
@@ -10031,13 +10078,13 @@ function createData(leafPaint, image, paint, box) {
     if (changeful) leafPaint.changeful = changeful;
     if (sync) leafPaint.sync = sync;
     if (scaleFixed) leafPaint.scaleFixed = scaleFixed;
-    leafPaint.data = getPatternData(paint, box, image);
+    leafPaint.data = PaintImage.getPatternData(paint, box, image);
 }
 
 function getPatternData(paint, box, image) {
     if (paint.padding) box = tempBox.set(box).shrink(paint.padding);
     if (paint.mode === "strench") paint.mode = "stretch";
-    let {width: width, height: height} = image;
+    const {width: width, height: height} = image;
     const {opacity: opacity, mode: mode, align: align, offset: offset, scale: scale, size: size, rotation: rotation, skew: skew, clipSize: clipSize, repeat: repeat, gap: gap, filters: filters} = paint;
     const sameBox = box.width === width && box.height === height;
     const data = {
@@ -10068,8 +10115,8 @@ function getPatternData(paint, box, image) {
       case "stretch":
         if (!sameBox) {
             scaleX = box.width / width, scaleY = box.height / height;
-            stretchMode(data, box, scaleX, scaleY);
-        }
+            PaintImage.stretchMode(data, box, scaleX, scaleY);
+        } else if (scaleX) scaleX = scaleY = undefined;
         break;
 
       case "normal":
@@ -10077,13 +10124,13 @@ function getPatternData(paint, box, image) {
         if (tempImage.x || tempImage.y || scaleX || clipSize || rotation || skew) {
             let clipScaleX, clipScaleY;
             if (clipSize) clipScaleX = box.width / clipSize.width, clipScaleY = box.height / clipSize.height;
-            clipMode(data, box, tempImage.x, tempImage.y, scaleX, scaleY, rotation, skew, clipScaleX, clipScaleY);
+            PaintImage.clipMode(data, box, tempImage.x, tempImage.y, scaleX, scaleY, rotation, skew, clipScaleX, clipScaleY);
             if (clipScaleX) scaleX = scaleX ? scaleX * clipScaleX : clipScaleX, scaleY = scaleY ? scaleY * clipScaleY : clipScaleY;
         }
         break;
 
       case "repeat":
-        if (!sameBox || scaleX || rotation || skew) repeatMode(data, box, width, height, tempImage.x, tempImage.y, scaleX, scaleY, rotation, skew, align, paint.freeTransform);
+        if (!sameBox || scaleX || rotation || skew) PaintImage.repeatMode(data, box, width, height, tempImage.x, tempImage.y, scaleX, scaleY, rotation, skew, align, paint.freeTransform);
         if (!repeat) data.repeat = "repeat";
         const count = isObject(repeat);
         if (gap || count) data.gap = getGapData(gap, count && repeat, tempImage.width, tempImage.height, box);
@@ -10092,18 +10139,16 @@ function getPatternData(paint, box, image) {
       case "fit":
       case "cover":
       default:
-        if (scaleX) fillOrFitMode(data, box, tempImage.x, tempImage.y, scaleX, scaleY, rotation);
+        if (scaleX) PaintImage.fillOrFitMode(data, box, tempImage.x, tempImage.y, scaleX, scaleY, rotation);
     }
     if (!data.transform) {
-        if (box.x || box.y) translate(data.transform = get$2(), box.x, box.y);
+        if (box.x || box.y) translate$1(data.transform = get$3(), box.x, box.y);
     }
-    data.width = width;
-    data.height = height;
     if (scaleX) {
         data.scaleX = scaleX;
         data.scaleY = scaleY;
     }
-    if (opacity) data.opacity = opacity;
+    if (opacity && opacity < 1) data.opacity = opacity;
     if (filters) data.filters = filters;
     if (repeat) data.repeat = isString(repeat) ? repeat === "x" ? "repeat-x" : "repeat-y" : "repeat";
     return data;
@@ -10125,234 +10170,194 @@ function getGapValue(gap, size, totalSize, rows) {
     return gap === "auto" ? value < 0 ? 0 : value : value;
 }
 
-let cache, box = new Bounds;
+let origin = {}, tempMatrix$1 = getMatrixData();
 
-const {isSame: isSame} = BoundsHelper;
+const {get: get$2, set: set, rotateOfOuter: rotateOfOuter$1, translate: translate, scaleOfOuter: scaleOfOuter$1, multiplyParent: multiplyParent, scale: scaleHelper, rotate: rotate, skew: skewHelper} = MatrixHelper;
 
-function image(ui, attrName, paint, boxBounds, firstUse) {
-    let leafPaint, event;
-    const image = ImageManager.get(paint);
-    if (cache && paint === cache.paint && isSame(boxBounds, cache.boxBounds)) {
-        leafPaint = cache.leafPaint;
-    } else {
-        leafPaint = {
-            type: paint.type,
-            image: image
-        };
-        if (image.hasAlphaPixel) leafPaint.isTransparent = true;
-        cache = image.use > 1 ? {
-            leafPaint: leafPaint,
-            paint: paint,
-            boxBounds: box.set(boxBounds)
-        } : null;
-    }
-    if (firstUse || image.loading) event = {
-        image: image,
-        attrName: attrName,
-        attrValue: paint
-    };
-    if (image.ready) {
-        checkSizeAndCreateData(ui, attrName, paint, image, leafPaint, boxBounds);
-        if (firstUse) {
-            onLoad(ui, event);
-            onLoadSuccess(ui, event);
-        }
-    } else if (image.error) {
-        if (firstUse) onLoadError(ui, event, image.error);
-    } else {
-        if (firstUse) {
-            ignoreRender(ui, true);
-            onLoad(ui, event);
-        }
-        leafPaint.loadId = image.load(() => {
-            ignoreRender(ui, false);
-            if (!ui.destroyed) {
-                if (checkSizeAndCreateData(ui, attrName, paint, image, leafPaint, boxBounds)) {
-                    if (image.hasAlphaPixel) ui.__layout.hitCanvasChanged = true;
-                    ui.forceUpdate("surface");
-                }
-                onLoadSuccess(ui, event);
-            }
-            leafPaint.loadId = undefined;
-        }, error => {
-            ignoreRender(ui, false);
-            onLoadError(ui, event, error);
-            leafPaint.loadId = undefined;
-        });
-        if (ui.placeholderColor) {
-            if (!ui.placeholderDelay) image.isPlacehold = true; else setTimeout(() => {
-                if (!image.ready) {
-                    image.isPlacehold = true;
-                    ui.forceUpdate("surface");
-                }
-            }, ui.placeholderDelay);
-        }
-    }
-    return leafPaint;
+function stretchMode(data, box, scaleX, scaleY) {
+    const transform = get$2(), {x: x, y: y} = box;
+    if (x || y) translate(transform, x, y); else transform.onlyScale = true;
+    scaleHelper(transform, scaleX, scaleY);
+    data.transform = transform;
 }
 
-function checkSizeAndCreateData(ui, attrName, paint, image, leafPaint, boxBounds) {
-    if (attrName === "fill" && !ui.__.__naturalWidth) {
-        const data = ui.__;
-        data.__naturalWidth = image.width / data.pixelRatio;
-        data.__naturalHeight = image.height / data.pixelRatio;
-        if (data.__autoSide) {
-            ui.forceUpdate("width");
-            if (ui.__proxyData) {
-                ui.setProxyAttr("width", data.width);
-                ui.setProxyAttr("height", data.height);
-            }
-            return false;
-        }
-    }
-    if (!leafPaint.data) createData(leafPaint, image, paint, boxBounds);
-    return true;
+function fillOrFitMode(data, box, x, y, scaleX, scaleY, rotation) {
+    const transform = get$2();
+    translate(transform, box.x + x, box.y + y);
+    scaleHelper(transform, scaleX, scaleY);
+    if (rotation) rotateOfOuter$1(transform, {
+        x: box.x + box.width / 2,
+        y: box.y + box.height / 2
+    }, rotation);
+    data.transform = transform;
 }
 
-function onLoad(ui, event) {
-    emit(ui, ImageEvent.LOAD, event);
+function clipMode(data, box, x, y, scaleX, scaleY, rotation, skew, clipScaleX, clipScaleY) {
+    const transform = get$2();
+    layout(transform, box, x, y, scaleX, scaleY, rotation, skew);
+    if (clipScaleX) {
+        if (rotation || skew) {
+            set(tempMatrix$1);
+            scaleOfOuter$1(tempMatrix$1, box, clipScaleX, clipScaleY);
+            multiplyParent(transform, tempMatrix$1);
+        } else scaleOfOuter$1(transform, box, clipScaleX, clipScaleY);
+    }
+    data.transform = transform;
 }
 
-function onLoadSuccess(ui, event) {
-    emit(ui, ImageEvent.LOADED, event);
-}
+function repeatMode(data, box, width, height, x, y, scaleX, scaleY, rotation, skew, align, freeTransform) {
+    const transform = get$2();
+    if (freeTransform) {
+        layout(transform, box, x, y, scaleX, scaleY, rotation, skew);
+    } else {
+        if (rotation) {
+            if (align === "center") {
+                rotateOfOuter$1(transform, {
+                    x: width / 2,
+                    y: height / 2
+                }, rotation);
+            } else {
+                rotate(transform, rotation);
+                switch (rotation) {
+                  case 90:
+                    translate(transform, height, 0);
+                    break;
 
-function onLoadError(ui, event, error) {
-    event.error = error;
-    ui.forceUpdate("surface");
-    emit(ui, ImageEvent.ERROR, event);
-}
+                  case 180:
+                    translate(transform, width, height);
+                    break;
 
-function emit(ui, type, data) {
-    if (ui.hasEvent(type)) ui.emitEvent(new ImageEvent(type, data));
+                  case 270:
+                    translate(transform, 0, width);
+                    break;
+                }
+            }
+        }
+        origin.x = box.x + x;
+        origin.y = box.y + y;
+        translate(transform, origin.x, origin.y);
+        if (scaleX) scaleOfOuter$1(transform, origin, scaleX, scaleY);
+    }
+    data.transform = transform;
 }
 
-function ignoreRender(ui, value) {
-    const {leafer: leafer} = ui;
-    if (leafer && leafer.viewReady) leafer.renderer.ignore = value;
+function layout(transform, box, x, y, scaleX, scaleY, rotation, skew) {
+    if (rotation) rotate(transform, rotation);
+    if (skew) skewHelper(transform, skew.x, skew.y);
+    if (scaleX) scaleHelper(transform, scaleX, scaleY);
+    translate(transform, box.x + x, box.y + y);
 }
 
 const {get: get$1, scale: scale, copy: copy$1} = MatrixHelper;
 
-const {floor: floor, ceil: ceil, max: max$1, abs: abs$1} = Math;
+const {getFloorScale: getFloorScale} = MathHelper, {abs: abs$1} = Math;
+
+function createPatternTask(paint, ui, canvas, renderOptions) {
+    if (!paint.patternTask) {
+        paint.patternTask = ImageManager.patternTasker.add(() => __awaiter(this, void 0, void 0, function*() {
+            paint.patternTask = null;
+            if (canvas.bounds.hit(ui.__nowWorld)) PaintImage.createPattern(paint, ui, canvas, renderOptions);
+            ui.forceUpdate("surface");
+        }), 300);
+    }
+}
 
-function createPattern(ui, paint, pixelRatio) {
-    let {scaleX: scaleX, scaleY: scaleY} = ui.getRenderScaleData(true, paint.scaleFixed);
-    const id = scaleX + "-" + scaleY + "-" + pixelRatio;
+function createPattern(paint, ui, canvas, renderOptions) {
+    let {scaleX: scaleX, scaleY: scaleY} = PaintImage.getImageRenderScaleData(paint, ui, canvas, renderOptions), id = scaleX + "-" + scaleY;
     if (paint.patternId !== id && !ui.destroyed) {
-        const {image: image, data: data} = paint;
-        let imageScale, imageMatrix, {width: width, height: height, scaleX: sx, scaleY: sy, transform: transform, repeat: repeat, gap: gap} = data;
-        scaleX *= pixelRatio;
-        scaleY *= pixelRatio;
-        if (sx) {
-            sx = abs$1(sx);
-            sy = abs$1(sy);
-            imageMatrix = get$1();
-            copy$1(imageMatrix, transform);
-            scale(imageMatrix, 1 / sx, 1 / sy);
-            scaleX *= sx;
-            scaleY *= sy;
-        }
-        width *= scaleX;
-        height *= scaleY;
-        const size = width * height;
-        if (!repeat) {
-            if (size > Platform.image.maxCacheSize) return false;
-        }
-        let maxSize = Platform.image.maxPatternSize;
-        if (image.isSVG) {
-            const ws = width / image.width;
-            if (ws > 1) imageScale = ws / ceil(ws);
-        } else {
-            const imageSize = image.width * image.height;
-            if (maxSize > imageSize) maxSize = imageSize;
-        }
-        if (size > maxSize) imageScale = Math.sqrt(size / maxSize);
-        if (imageScale) {
-            scaleX /= imageScale;
-            scaleY /= imageScale;
-            width /= imageScale;
-            height /= imageScale;
-        }
-        if (sx) {
-            scaleX /= sx;
-            scaleY /= sy;
-        }
-        const xGap = gap && gap.x * scaleX;
-        const yGap = gap && gap.y * scaleY;
-        if (transform || scaleX !== 1 || scaleY !== 1) {
-            const canvasWidth = width + (xGap || 0);
-            const canvasHeight = height + (yGap || 0);
-            scaleX /= canvasWidth / max$1(floor(canvasWidth), 1);
-            scaleY /= canvasHeight / max$1(floor(canvasHeight), 1);
-            if (!imageMatrix) {
+        if (!(Platform.image.isLarge(paint.image, scaleX, scaleY) && !paint.data.repeat)) {
+            const {image: image, data: data} = paint, {transform: transform, gap: gap} = data, fixScale = PaintImage.getPatternFixScale(paint, scaleX, scaleY);
+            let imageMatrix, xGap, yGap, {width: width, height: height} = image;
+            if (fixScale) scaleX *= fixScale, scaleY *= fixScale;
+            width *= scaleX;
+            height *= scaleY;
+            if (gap) {
+                xGap = gap.x * scaleX / abs$1(data.scaleX || 1);
+                yGap = gap.y * scaleY / abs$1(data.scaleY || 1);
+            }
+            if (transform || scaleX !== 1 || scaleY !== 1) {
+                scaleX *= getFloorScale(width + (xGap || 0));
+                scaleY *= getFloorScale(height + (yGap || 0));
                 imageMatrix = get$1();
                 if (transform) copy$1(imageMatrix, transform);
+                scale(imageMatrix, 1 / scaleX, 1 / scaleY);
             }
-            scale(imageMatrix, 1 / scaleX, 1 / scaleY);
+            const imageCanvas = image.getCanvas(width, height, data.opacity, data.filters, xGap, yGap, ui.leafer && ui.leafer.config.smooth);
+            const pattern = image.getPattern(imageCanvas, data.repeat || (Platform.origin.noRepeat || "no-repeat"), imageMatrix, paint);
+            paint.style = pattern;
+            paint.patternId = id;
         }
-        const canvas = image.getCanvas(width, height, data.opacity, data.filters, xGap, yGap, ui.leafer && ui.leafer.config.smooth);
-        const pattern = image.getPattern(canvas, repeat || (Platform.origin.noRepeat || "no-repeat"), imageMatrix, paint);
-        paint.style = pattern;
-        paint.patternId = id;
-        return true;
+    }
+}
+
+function getPatternFixScale(paint, imageScaleX, imageScaleY) {
+    const {image: image} = paint;
+    let fixScale, maxSize = Platform.image.maxPatternSize, imageSize = image.width * image.height;
+    if (image.isSVG) {
+        if (imageScaleX > 1) fixScale = Math.ceil(imageScaleX) / imageScaleX;
     } else {
-        return false;
+        if (maxSize > imageSize) maxSize = imageSize;
     }
+    if ((imageSize *= imageScaleX * imageScaleY) > maxSize) fixScale = Math.sqrt(maxSize / imageSize);
+    return fixScale;
 }
 
-function checkImage(ui, canvas, paint, allowDraw) {
-    const {scaleX: scaleX, scaleY: scaleY} = ui.getRenderScaleData(true, paint.scaleFixed);
-    const {pixelRatio: pixelRatio} = canvas, {data: data} = paint;
-    if (!data || paint.patternId === scaleX + "-" + scaleY + "-" + pixelRatio && !Export.running) {
+function checkImage(paint, drawImage, ui, canvas, renderOptions) {
+    const {scaleX: scaleX, scaleY: scaleY} = PaintImage.getImageRenderScaleData(paint, ui, canvas, renderOptions);
+    const {image: image, data: data} = paint, {exporting: exporting} = renderOptions;
+    if (!data || paint.patternId === scaleX + "-" + scaleY && !exporting) {
         return false;
     } else {
-        if (allowDraw) {
+        if (drawImage) {
             if (data.repeat) {
-                allowDraw = false;
-            } else if (!(paint.changeful || Platform.name === "miniapp" && ResizeEvent.isResizing(ui) || Export.running)) {
-                let {width: width, height: height} = data;
-                width *= scaleX * pixelRatio;
-                height *= scaleY * pixelRatio;
-                if (data.scaleX) {
-                    width *= data.scaleX;
-                    height *= data.scaleY;
-                }
-                allowDraw = width * height > Platform.image.maxCacheSize;
+                drawImage = false;
+            } else if (!(paint.changeful || Platform.name === "miniapp" && ResizeEvent.isResizing(ui) || exporting)) {
+                drawImage = Platform.image.isLarge(image, scaleX, scaleY);
             }
         }
-        if (allowDraw) {
+        if (drawImage) {
             if (ui.__.__isFastShadow) {
                 canvas.fillStyle = paint.style || "#000";
                 canvas.fill();
             }
-            drawImage(ui, canvas, paint, data);
+            PaintImage.drawImage(paint, scaleX, scaleY, ui, canvas, renderOptions);
             return true;
         } else {
-            if (!paint.style || paint.sync || Export.running) {
-                createPattern(ui, paint, pixelRatio);
-            } else {
-                if (!paint.patternTask) {
-                    paint.patternTask = ImageManager.patternTasker.add(() => __awaiter(this, void 0, void 0, function*() {
-                        paint.patternTask = null;
-                        if (canvas.bounds.hit(ui.__nowWorld)) createPattern(ui, paint, pixelRatio);
-                        ui.forceUpdate("surface");
-                    }), 300);
-                }
-            }
+            if (!paint.style || paint.sync || exporting) PaintImage.createPattern(paint, ui, canvas, renderOptions); else PaintImage.createPatternTask(paint, ui, canvas, renderOptions);
             return false;
         }
     }
 }
 
-function drawImage(ui, canvas, paint, data) {
-    canvas.save();
-    canvas.clipUI(ui);
-    if (paint.blendMode) canvas.blendMode = paint.blendMode;
-    if (data.opacity) canvas.opacity *= data.opacity;
-    if (data.transform) canvas.transform(data.transform);
-    canvas.drawImage(paint.image.getFull(data.filters), 0, 0, data.width, data.height);
-    canvas.restore();
+function drawImage(paint, _imageScaleX, _imageScaleY, ui, canvas, _renderOptions) {
+    const {data: data, image: image, blendMode: blendMode} = paint, {opacity: opacity, transform: transform} = data, view = image.getFull(data.filters), u = ui.__;
+    let {width: width, height: height} = image, clipUI;
+    if (transform && !transform.onlyScale || (clipUI = u.path || u.cornerRadius) || opacity || blendMode) {
+        canvas.save();
+        clipUI && canvas.clipUI(ui);
+        blendMode && (canvas.blendMode = blendMode);
+        opacity && (canvas.opacity *= opacity);
+        transform && canvas.transform(transform);
+        canvas.drawImage(view, 0, 0, width, height);
+        canvas.restore();
+    } else {
+        if (data.scaleX) width *= data.scaleX, height *= data.scaleY;
+        canvas.drawImage(view, 0, 0, width, height);
+    }
+}
+
+function getImageRenderScaleData(paint, ui, canvas, _renderOptions) {
+    const scaleData = ui.getRenderScaleData(true, paint.scaleFixed), {data: data} = paint;
+    if (canvas) {
+        const {pixelRatio: pixelRatio} = canvas;
+        scaleData.scaleX *= pixelRatio;
+        scaleData.scaleY *= pixelRatio;
+    }
+    if (data && data.scaleX) {
+        scaleData.scaleX *= Math.abs(data.scaleX);
+        scaleData.scaleY *= Math.abs(data.scaleY);
+    }
+    return scaleData;
 }
 
 function recycleImage(attrName, data) {
@@ -10384,8 +10389,12 @@ function recycleImage(attrName, data) {
 const PaintImageModule = {
     image: image,
     checkImage: checkImage,
-    createPattern: createPattern,
+    drawImage: drawImage,
+    getImageRenderScaleData: getImageRenderScaleData,
     recycleImage: recycleImage,
+    createPatternTask: createPatternTask,
+    createPattern: createPattern,
+    getPatternFixScale: getPatternFixScale,
     createData: createData,
     getPatternData: getPatternData,
     stretchMode: stretchMode,
@@ -10841,10 +10850,8 @@ function createRows(drawData, content, style) {
     bounds = drawData.bounds;
     findMaxWidth = !bounds.width && !style.autoSizeAlign;
     const {__letterSpacing: __letterSpacing, paraIndent: paraIndent, textCase: textCase} = style;
-    const {canvas: canvas} = Platform;
-    const {width: width, height: height} = bounds;
-    const charMode = width || height || __letterSpacing || textCase !== "none";
-    if (charMode) {
+    const {canvas: canvas} = Platform, {width: width} = bounds;
+    if (style.__isCharMode) {
         const wrap = style.textWrap !== "none";
         const breakAll = style.textWrap === "break";
         paraStart = true;
@@ -10973,12 +10980,19 @@ const TextMode = 2;
 function layoutChar(drawData, style, width, _height) {
     const {rows: rows} = drawData;
     const {textAlign: textAlign, paraIndent: paraIndent, letterSpacing: letterSpacing} = style;
-    let charX, addWordWidth, indentWidth, mode, wordChar, wordsLength;
+    const justifyLast = width && textAlign.includes("both");
+    const justify = justifyLast || width && textAlign.includes("justify");
+    const justifyLetter = justify && textAlign.includes("letter");
+    let charX, remainingWidth, addWordWidth, addLetterWidth, indentWidth, mode, wordChar, wordsLength, isLastWord, canJustify;
     rows.forEach(row => {
         if (row.words) {
             indentWidth = paraIndent && row.paraStart ? paraIndent : 0, wordsLength = row.words.length;
-            addWordWidth = width && (textAlign === "justify" || textAlign === "both") && wordsLength > 1 ? (width - row.width - indentWidth) / (wordsLength - 1) : 0;
-            mode = letterSpacing || row.isOverflow ? CharMode : addWordWidth > .01 ? WordMode : TextMode;
+            if (justify) {
+                canJustify = !row.paraEnd || justifyLast;
+                remainingWidth = width - row.width - indentWidth;
+                if (justifyLetter) addLetterWidth = remainingWidth / (row.words.reduce((total, item) => total + item.data.length, 0) - 1); else addWordWidth = wordsLength > 1 ? remainingWidth / (wordsLength - 1) : 0;
+            }
+            mode = letterSpacing || row.isOverflow || justifyLetter ? CharMode : addWordWidth ? WordMode : TextMode;
             if (row.isOverflow && !letterSpacing) row.textMode = true;
             if (mode === TextMode) {
                 row.x += indentWidth;
@@ -10996,11 +11010,15 @@ function layoutChar(drawData, style, width, _height) {
                         charX = toWordChar(word.data, charX, wordChar);
                         if (row.isOverflow || wordChar.char !== " ") row.data.push(wordChar);
                     } else {
-                        charX = toChar(word.data, charX, row.data, row.isOverflow);
+                        charX = toChar(word.data, charX, row.data, row.isOverflow, canJustify && addLetterWidth);
                     }
-                    if (addWordWidth && (!row.paraEnd || textAlign === "both") && index !== wordsLength - 1) {
-                        charX += addWordWidth;
-                        row.width += addWordWidth;
+                    if (canJustify) {
+                        isLastWord = index === wordsLength - 1;
+                        if (addWordWidth) {
+                            if (!isLastWord) charX += addWordWidth, row.width += addWordWidth;
+                        } else if (addLetterWidth) {
+                            row.width += addLetterWidth * (word.data.length - (isLastWord ? 1 : 0));
+                        }
                     }
                 });
             }
@@ -11026,13 +11044,14 @@ function toWordChar(data, charX, wordChar) {
     return charX;
 }
 
-function toChar(data, charX, rowData, isOverflow) {
+function toChar(data, charX, rowData, isOverflow, addLetterWidth) {
     data.forEach(char => {
         if (isOverflow || char.char !== " ") {
             char.x = charX;
             rowData.push(char);
         }
         charX += char.width;
+        addLetterWidth && (charX += addLetterWidth);
     });
     return charX;
 }
@@ -11174,10 +11193,10 @@ function getDrawData(content, style) {
     let x = 0, y = 0;
     let width = style.__getInput("width") || 0;
     let height = style.__getInput("height") || 0;
-    const {textDecoration: textDecoration, __font: __font, __padding: padding} = style;
+    const {__padding: padding} = style;
     if (padding) {
-        if (width) x = padding[left], width -= padding[right] + padding[left]; else if (!style.autoSizeAlign) x = padding[left];
-        if (height) y = padding[top], height -= padding[top] + padding[bottom]; else if (!style.autoSizeAlign) y = padding[top];
+        if (width) x = padding[left], width -= padding[right] + padding[left], !width && (width = .01); else if (!style.autoSizeAlign) x = padding[left];
+        if (height) y = padding[top], height -= padding[top] + padding[bottom], !height && (height = .01); else if (!style.autoSizeAlign) y = padding[top];
     }
     const drawData = {
         bounds: {
@@ -11188,14 +11207,14 @@ function getDrawData(content, style) {
         },
         rows: [],
         paraNumber: 0,
-        font: Platform.canvas.font = __font
+        font: Platform.canvas.font = style.__font
     };
     createRows(drawData, content, style);
     if (padding) padAutoText(padding, drawData, style, width, height);
     layoutText(drawData, style);
-    layoutChar(drawData, style, width);
+    if (style.__isCharMode) layoutChar(drawData, style, width);
     if (drawData.overflow) clipText(drawData, style, x, width);
-    if (textDecoration !== "none") decorationText(drawData, style);
+    if (style.textDecoration !== "none") decorationText(drawData, style);
     return drawData;
 }