leafer-draw 2.0.1 → 2.0.2

package/dist/web.cjs

@@ -13,6 +13,39 @@ exports.PathNodeHandleType = void 0;
     PathNodeHandleType[PathNodeHandleType["mirror"] = 4] = "mirror";
 })(exports.PathNodeHandleType || (exports.PathNodeHandleType = {}));
 
+function __awaiter(thisArg, _arguments, P, generator) {
+    function adopt(value) {
+        return value instanceof P ? value : new P(function(resolve) {
+            resolve(value);
+        });
+    }
+    return new (P || (P = Promise))(function(resolve, reject) {
+        function fulfilled(value) {
+            try {
+                step(generator.next(value));
+            } catch (e) {
+                reject(e);
+            }
+        }
+        function rejected(value) {
+            try {
+                step(generator["throw"](value));
+            } catch (e) {
+                reject(e);
+            }
+        }
+        function step(result) {
+            result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected);
+        }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+}
+
+typeof SuppressedError === "function" ? SuppressedError : function(error, suppressed, message) {
+    var e = new Error(message);
+    return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
+};
+
 const debug$2 = core.Debug.get("LeaferCanvas");
 
 class LeaferCanvas extends core.LeaferCanvasBase {
@@ -216,8 +249,6 @@ core.canvasPatch(CanvasRenderingContext2D.prototype);
 
 core.canvasPatch(Path2D.prototype);
 
-const {mineType: mineType, fileType: fileType} = core.FileHelper;
-
 Object.assign(core.Creator, {
     canvas: (options, manager) => new LeaferCanvas(options, manager),
     image: options => new core.LeaferImage(options)
@@ -232,29 +263,27 @@ function useCanvas(_canvasType, _power) {
             return canvas;
         },
         canvasToDataURL: (canvas, type, quality) => {
-            const imageType = mineType(type), url = canvas.toDataURL(imageType, quality);
+            const imageType = core.FileHelper.mimeType(type), url = canvas.toDataURL(imageType, quality);
             return imageType === "image/bmp" ? url.replace("image/png;", "image/bmp;") : url;
         },
-        canvasToBolb: (canvas, type, quality) => new Promise(resolve => canvas.toBlob(resolve, mineType(type), quality)),
+        canvasToBolb: (canvas, type, quality) => new Promise(resolve => canvas.toBlob(resolve, core.FileHelper.mimeType(type), quality)),
         canvasSaveAs: (canvas, filename, quality) => {
-            const url = canvas.toDataURL(mineType(fileType(filename)), quality);
+            const url = canvas.toDataURL(core.FileHelper.mimeType(core.FileHelper.fileType(filename)), quality);
             return core.Platform.origin.download(url, filename);
         },
         download(url, filename) {
-            return new Promise(resolve => {
+            return __awaiter(this, void 0, void 0, function*() {
                 let el = document.createElement("a");
                 el.href = url;
                 el.download = filename;
                 document.body.appendChild(el);
                 el.click();
                 document.body.removeChild(el);
-                resolve();
             });
         },
-        loadImage(src) {
+        loadImage(src, crossOrigin, _leaferImage) {
             return new Promise((resolve, reject) => {
                 const img = new core.Platform.origin.Image;
-                const {crossOrigin: crossOrigin} = core.Platform.image;
                 if (crossOrigin) {
                     img.setAttribute("crossOrigin", crossOrigin);
                     img.crossOrigin = crossOrigin;
@@ -268,6 +297,13 @@ function useCanvas(_canvasType, _power) {
                 img.src = core.Platform.image.getRealURL(src);
             });
         },
+        loadContent(url_1) {
+            return __awaiter(this, arguments, void 0, function*(url, responseType = "text") {
+                const response = yield fetch(url);
+                if (!response.ok) throw new Error(`${response.status}`);
+                return yield response[responseType]();
+            });
+        },
         Image: Image,
         PointerEvent: PointerEvent,
         DragEvent: DragEvent
@@ -779,7 +815,7 @@ class Renderer {
     getCellList() {
         return undefined;
     }
-    addBlock(block) {
+    addBlock(block, _leafList) {
         if (!this.updateBlocks) this.updateBlocks = [];
         this.updateBlocks.push(block);
     }
@@ -827,7 +863,8 @@ class Renderer {
     __onLayoutEnd(event) {
         if (event.data) event.data.map(item => {
             let empty;
-            if (item.updatedList) item.updatedList.list.some(leaf => {
+            const {updatedList: updatedList} = item;
+            if (updatedList) updatedList.list.some(leaf => {
                 empty = !leaf.__world.width || !leaf.__world.height;
                 if (empty) {
                     if (!leaf.isLeafer) debug.tip(leaf.innerName, ": empty");
@@ -835,7 +872,7 @@ class Renderer {
                 }
                 return empty;
             });
-            this.addBlock(empty ? this.canvas.bounds : item.updatedBounds);
+            this.addBlock(empty ? this.canvas.bounds : item.updatedBounds, updatedList);
         });
     }
     emitRender(type, bounds, options) {
@@ -1175,11 +1212,14 @@ function compute(attrName, ui) {
 function getLeafPaint(attrName, paint, ui) {
     if (!core.isObject(paint) || paint.visible === false || paint.opacity === 0) return undefined;
     let leafPaint;
-    const {boxBounds: boxBounds} = ui.__layout;
-    switch (paint.type) {
+    const {boxBounds: boxBounds} = ui.__layout, {type: type} = paint;
+    switch (type) {
       case "image":
+      case "film":
+      case "video":
         if (!paint.url) return undefined;
         leafPaint = draw.PaintImage.image(ui, attrName, paint, boxBounds, !recycleMap || !recycleMap[paint.url]);
+        if (type !== "image") draw.PaintImage[type](leafPaint);
         break;
 
       case "linear":
@@ -1195,7 +1235,7 @@ function getLeafPaint(attrName, paint, ui) {
         break;
 
       case "solid":
-        const {type: type, color: color, opacity: opacity} = paint;
+        const {color: color, opacity: opacity} = paint;
         leafPaint = {
             type: type,
             style: draw.ColorConvert.string(color, opacity)
@@ -1239,7 +1279,7 @@ const {isSame: isSame} = core.BoundsHelper;
 
 function image(ui, attrName, paint, boxBounds, firstUse) {
     let leafPaint, event;
-    const image = core.ImageManager.get(paint);
+    const image = core.ImageManager.get(paint, paint.type);
     if (cache && paint === cache.paint && isSame(boxBounds, cache.boxBounds)) {
         leafPaint = cache.leafPaint;
     } else {
@@ -1300,8 +1340,8 @@ function image(ui, attrName, paint, boxBounds, firstUse) {
 }
 
 function checkSizeAndCreateData(ui, attrName, paint, image, leafPaint, boxBounds) {
-    if (attrName === "fill" && !ui.__.__naturalWidth) {
-        const data = ui.__;
+    const data = ui.__;
+    if (attrName === "fill" && !data.__naturalWidth) {
         data.__naturalWidth = image.width / data.pixelRatio;
         data.__naturalHeight = image.height / data.pixelRatio;
         if (data.__autoSide) {
@@ -1313,7 +1353,12 @@ function checkSizeAndCreateData(ui, attrName, paint, image, leafPaint, boxBounds
             return false;
         }
     }
-    if (!leafPaint.data) draw.PaintImage.createData(leafPaint, image, paint, boxBounds);
+    if (!leafPaint.data) {
+        draw.PaintImage.createData(leafPaint, image, paint, boxBounds);
+        const {transform: transform} = leafPaint.data, {opacity: opacity, blendMode: blendMode} = paint;
+        const clip = transform && !transform.onlyScale || data.path || data.cornerRadius;
+        if (clip || opacity && opacity < 1 || blendMode) leafPaint.complex = clip ? 2 : true;
+    }
     return true;
 }
 
@@ -1356,7 +1401,7 @@ function getPatternData(paint, box, image) {
     if (paint.padding) box = tempBox.set(box).shrink(paint.padding);
     if (paint.mode === "strench") paint.mode = "stretch";
     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, interlace: interlace} = paint;
+    const {mode: mode, align: align, offset: offset, scale: scale, size: size, rotation: rotation, skew: skew, clipSize: clipSize, repeat: repeat, gap: gap, interlace: interlace} = paint;
     const sameBox = box.width === width && box.height === height;
     const data = {
         mode: mode
@@ -1419,8 +1464,6 @@ function getPatternData(paint, box, image) {
         data.scaleX = scaleX;
         data.scaleY = scaleY;
     }
-    if (opacity && opacity < 1) data.opacity = opacity;
-    if (filters) data.filters = filters;
     if (repeat) data.repeat = core.isString(repeat) ? repeat === "x" ? "repeat-x" : "repeat-y" : "repeat";
     if (interlace) data.interlace = core.isNumber(interlace) || interlace.type === "percent" ? {
         type: "x",
@@ -1451,7 +1494,7 @@ const {get: get$2, set: set, rotateOfOuter: rotateOfOuter$1, translate: translat
 
 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;
+    if (x || y) translate(transform, x, y); else if (scaleX > 0 && scaleY > 0) transform.onlyScale = true;
     scaleHelper(transform, scaleX, scaleY);
     data.transform = transform;
 }
@@ -1523,39 +1566,6 @@ function layout(transform, box, x, y, scaleX, scaleY, rotation, skew) {
     translate(transform, box.x + x, box.y + y);
 }
 
-function __awaiter(thisArg, _arguments, P, generator) {
-    function adopt(value) {
-        return value instanceof P ? value : new P(function(resolve) {
-            resolve(value);
-        });
-    }
-    return new (P || (P = Promise))(function(resolve, reject) {
-        function fulfilled(value) {
-            try {
-                step(generator.next(value));
-            } catch (e) {
-                reject(e);
-            }
-        }
-        function rejected(value) {
-            try {
-                step(generator["throw"](value));
-            } catch (e) {
-                reject(e);
-            }
-        }
-        function step(result) {
-            result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected);
-        }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-}
-
-typeof SuppressedError === "function" ? SuppressedError : function(error, suppressed, message) {
-    var e = new Error(message);
-    return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
-};
-
 const {get: get$1, scale: scale, copy: copy$1} = core.MatrixHelper;
 
 const {getFloorScale: getFloorScale} = core.MathHelper, {abs: abs$1} = Math;
@@ -1573,10 +1583,10 @@ function createPatternTask(paint, ui, canvas, renderOptions) {
 }
 
 function createPattern(paint, ui, canvas, renderOptions) {
-    let {scaleX: scaleX, scaleY: scaleY} = draw.PaintImage.getImageRenderScaleData(paint, ui, canvas, renderOptions), id = scaleX + "-" + scaleY;
+    let {scaleX: scaleX, scaleY: scaleY} = draw.PaintImage.getImageRenderScaleData(paint, ui, canvas, renderOptions), id = paint.film ? paint.nowIndex : scaleX + "-" + scaleY;
     if (paint.patternId !== id && !ui.destroyed) {
         if (!(core.Platform.image.isLarge(paint.image, scaleX, scaleY) && !paint.data.repeat)) {
-            const {image: image, data: data} = paint, {transform: transform, gap: gap} = data, fixScale = draw.PaintImage.getPatternFixScale(paint, scaleX, scaleY);
+            const {image: image, data: data} = paint, {opacity: opacity, filters: filters} = paint.originPaint, {transform: transform, gap: gap} = data, fixScale = draw.PaintImage.getPatternFixScale(paint, scaleX, scaleY);
             let imageMatrix, xGap, yGap, {width: width, height: height} = image;
             if (fixScale) scaleX *= fixScale, scaleY *= fixScale;
             width *= scaleX;
@@ -1592,7 +1602,7 @@ function createPattern(paint, ui, canvas, renderOptions) {
                 if (transform) copy$1(imageMatrix, transform);
                 scale(imageMatrix, 1 / scaleX, 1 / scaleY);
             }
-            const imageCanvas = image.getCanvas(width, height, data.opacity, data.filters, xGap, yGap, ui.leafer && ui.leafer.config.smooth, data.interlace);
+            const imageCanvas = image.getCanvas(width, height, opacity, filters, xGap, yGap, ui.leafer && ui.leafer.config.smooth, data.interlace);
             const pattern = image.getPattern(imageCanvas, data.repeat || (core.Platform.origin.noRepeat || "no-repeat"), imageMatrix, paint);
             paint.style = pattern;
             paint.patternId = id;
@@ -1613,15 +1623,15 @@ function getPatternFixScale(paint, imageScaleX, imageScaleY) {
 }
 
 function checkImage(paint, drawImage, ui, canvas, renderOptions) {
-    const {scaleX: scaleX, scaleY: scaleY} = draw.PaintImage.getImageRenderScaleData(paint, ui, canvas, renderOptions);
+    const {scaleX: scaleX, scaleY: scaleY} = draw.PaintImage.getImageRenderScaleData(paint, ui, canvas, renderOptions), id = paint.film ? paint.nowIndex : scaleX + "-" + scaleY;
     const {image: image, data: data, originPaint: originPaint} = paint, {exporting: exporting, snapshot: snapshot} = renderOptions;
-    if (!data || paint.patternId === scaleX + "-" + scaleY && !exporting || snapshot) {
+    if (!data || paint.patternId === id && !exporting || snapshot) {
         return false;
     } else {
         if (drawImage) {
             if (data.repeat) {
                 drawImage = false;
-            } else if (!(originPaint.changeful || core.Platform.name === "miniapp" && core.ResizeEvent.isResizing(ui) || exporting)) {
+            } else if (!(originPaint.changeful || paint.film || core.Platform.name === "miniapp" && core.ResizeEvent.isResizing(ui) || exporting)) {
                 drawImage = core.Platform.image.isLarge(image, scaleX, scaleY) || image.width * scaleX > 8096 || image.height * scaleY > 8096;
             }
         }
@@ -1639,20 +1649,21 @@ function checkImage(paint, drawImage, ui, canvas, renderOptions) {
     }
 }
 
-function drawImage(paint, _imageScaleX, _imageScaleY, ui, canvas, _renderOptions) {
-    const {data: data, image: image} = paint, {blendMode: blendMode} = paint.originPaint, {opacity: opacity, transform: transform} = data, view = image.getFull(data.filters), u = ui.__;
-    let {width: width, height: height} = image, clipUI;
-    if ((clipUI = transform && !transform.onlyScale || u.path || u.cornerRadius) || opacity || blendMode) {
+function drawImage(paint, imageScaleX, imageScaleY, ui, canvas, _renderOptions) {
+    const {data: data, image: image, complex: complex} = paint;
+    let {width: width, height: height} = image;
+    if (complex) {
+        const {blendMode: blendMode, opacity: opacity} = paint.originPaint, {transform: transform} = data;
         canvas.save();
-        clipUI && canvas.clipUI(ui);
+        complex === 2 && canvas.clipUI(ui);
         blendMode && (canvas.blendMode = blendMode);
         opacity && (canvas.opacity *= opacity);
         transform && canvas.transform(transform);
-        canvas.drawImage(view, 0, 0, width, height);
+        image.render(canvas, 0, 0, width, height, ui, paint, imageScaleX, imageScaleY);
         canvas.restore();
     } else {
         if (data.scaleX) width *= data.scaleX, height *= data.scaleY;
-        canvas.drawImage(view, 0, 0, width, height);
+        image.render(canvas, 0, 0, width, height, ui, paint, imageScaleX, imageScaleY);
     }
 }
 
@@ -2591,6 +2602,13 @@ Object.assign(draw.Effect, EffectModule);
 
 useCanvas();
 
+Object.defineProperty(exports, "LeaferFilm", {
+    enumerable: true,
+    get: function() {
+        return core.LeaferFilm;
+    }
+});
+
 Object.defineProperty(exports, "LeaferImage", {
     enumerable: true,
     get: function() {
@@ -2598,6 +2616,13 @@ Object.defineProperty(exports, "LeaferImage", {
     }
 });
 
+Object.defineProperty(exports, "LeaferVideo", {
+    enumerable: true,
+    get: function() {
+        return core.LeaferVideo;
+    }
+});
+
 exports.Layouter = Layouter;
 
 exports.LeaferCanvas = LeaferCanvas;

package/dist/web.esm.js

@@ -1,8 +1,8 @@
-import { Debug, LeaferCanvasBase, Platform, isString, DataHelper, canvasSizeAttrs, isUndefined, ResizeEvent, canvasPatch, FileHelper, Creator, LeaferImage, defineKey, LeafList, RenderEvent, ChildEvent, WatchEvent, PropertyEvent, LeafHelper, BranchHelper, LeafBoundsHelper, Bounds, isArray, LeafLevelList, LayoutEvent, Run, ImageManager, isObject, BoundsHelper, FourNumberHelper, Matrix, ImageEvent, MatrixHelper, MathHelper, AlignHelper, PointHelper, isNumber, getMatrixData, AroundHelper, Direction4 } from "@leafer/core";
+import { Debug, LeaferCanvasBase, Platform, isString, DataHelper, canvasSizeAttrs, isUndefined, ResizeEvent, canvasPatch, Creator, LeaferImage, defineKey, FileHelper, LeafList, RenderEvent, ChildEvent, WatchEvent, PropertyEvent, LeafHelper, BranchHelper, LeafBoundsHelper, Bounds, isArray, LeafLevelList, LayoutEvent, Run, ImageManager, isObject, BoundsHelper, FourNumberHelper, Matrix, ImageEvent, MatrixHelper, MathHelper, AlignHelper, PointHelper, isNumber, getMatrixData, AroundHelper, Direction4 } from "@leafer/core";
 
 export * from "@leafer/core";
 
-export { LeaferImage } from "@leafer/core";
+export { LeaferFilm, LeaferImage, LeaferVideo } from "@leafer/core";
 
 import { Paint, PaintImage, ColorConvert, PaintGradient, Effect, Group, TextConvert } from "@leafer-ui/draw";
 
@@ -17,6 +17,39 @@ var PathNodeHandleType;
     PathNodeHandleType[PathNodeHandleType["mirror"] = 4] = "mirror";
 })(PathNodeHandleType || (PathNodeHandleType = {}));
 
+function __awaiter(thisArg, _arguments, P, generator) {
+    function adopt(value) {
+        return value instanceof P ? value : new P(function(resolve) {
+            resolve(value);
+        });
+    }
+    return new (P || (P = Promise))(function(resolve, reject) {
+        function fulfilled(value) {
+            try {
+                step(generator.next(value));
+            } catch (e) {
+                reject(e);
+            }
+        }
+        function rejected(value) {
+            try {
+                step(generator["throw"](value));
+            } catch (e) {
+                reject(e);
+            }
+        }
+        function step(result) {
+            result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected);
+        }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+}
+
+typeof SuppressedError === "function" ? SuppressedError : function(error, suppressed, message) {
+    var e = new Error(message);
+    return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
+};
+
 const debug$2 = Debug.get("LeaferCanvas");
 
 class LeaferCanvas extends LeaferCanvasBase {
@@ -220,8 +253,6 @@ canvasPatch(CanvasRenderingContext2D.prototype);
 
 canvasPatch(Path2D.prototype);
 
-const {mineType: mineType, fileType: fileType} = FileHelper;
-
 Object.assign(Creator, {
     canvas: (options, manager) => new LeaferCanvas(options, manager),
     image: options => new LeaferImage(options)
@@ -236,29 +267,27 @@ function useCanvas(_canvasType, _power) {
             return canvas;
         },
         canvasToDataURL: (canvas, type, quality) => {
-            const imageType = mineType(type), url = canvas.toDataURL(imageType, quality);
+            const imageType = FileHelper.mimeType(type), url = canvas.toDataURL(imageType, quality);
             return imageType === "image/bmp" ? url.replace("image/png;", "image/bmp;") : url;
         },
-        canvasToBolb: (canvas, type, quality) => new Promise(resolve => canvas.toBlob(resolve, mineType(type), quality)),
+        canvasToBolb: (canvas, type, quality) => new Promise(resolve => canvas.toBlob(resolve, FileHelper.mimeType(type), quality)),
         canvasSaveAs: (canvas, filename, quality) => {
-            const url = canvas.toDataURL(mineType(fileType(filename)), quality);
+            const url = canvas.toDataURL(FileHelper.mimeType(FileHelper.fileType(filename)), quality);
             return Platform.origin.download(url, filename);
         },
         download(url, filename) {
-            return new Promise(resolve => {
+            return __awaiter(this, void 0, void 0, function*() {
                 let el = document.createElement("a");
                 el.href = url;
                 el.download = filename;
                 document.body.appendChild(el);
                 el.click();
                 document.body.removeChild(el);
-                resolve();
             });
         },
-        loadImage(src) {
+        loadImage(src, crossOrigin, _leaferImage) {
             return new Promise((resolve, reject) => {
                 const img = new Platform.origin.Image;
-                const {crossOrigin: crossOrigin} = Platform.image;
                 if (crossOrigin) {
                     img.setAttribute("crossOrigin", crossOrigin);
                     img.crossOrigin = crossOrigin;
@@ -272,6 +301,13 @@ function useCanvas(_canvasType, _power) {
                 img.src = Platform.image.getRealURL(src);
             });
         },
+        loadContent(url_1) {
+            return __awaiter(this, arguments, void 0, function*(url, responseType = "text") {
+                const response = yield fetch(url);
+                if (!response.ok) throw new Error(`${response.status}`);
+                return yield response[responseType]();
+            });
+        },
         Image: Image,
         PointerEvent: PointerEvent,
         DragEvent: DragEvent
@@ -783,7 +819,7 @@ class Renderer {
     getCellList() {
         return undefined;
     }
-    addBlock(block) {
+    addBlock(block, _leafList) {
         if (!this.updateBlocks) this.updateBlocks = [];
         this.updateBlocks.push(block);
     }
@@ -831,7 +867,8 @@ class Renderer {
     __onLayoutEnd(event) {
         if (event.data) event.data.map(item => {
             let empty;
-            if (item.updatedList) item.updatedList.list.some(leaf => {
+            const {updatedList: updatedList} = item;
+            if (updatedList) updatedList.list.some(leaf => {
                 empty = !leaf.__world.width || !leaf.__world.height;
                 if (empty) {
                     if (!leaf.isLeafer) debug.tip(leaf.innerName, ": empty");
@@ -839,7 +876,7 @@ class Renderer {
                 }
                 return empty;
             });
-            this.addBlock(empty ? this.canvas.bounds : item.updatedBounds);
+            this.addBlock(empty ? this.canvas.bounds : item.updatedBounds, updatedList);
         });
     }
     emitRender(type, bounds, options) {
@@ -1179,11 +1216,14 @@ function compute(attrName, ui) {
 function getLeafPaint(attrName, paint, ui) {
     if (!isObject(paint) || paint.visible === false || paint.opacity === 0) return undefined;
     let leafPaint;
-    const {boxBounds: boxBounds} = ui.__layout;
-    switch (paint.type) {
+    const {boxBounds: boxBounds} = ui.__layout, {type: type} = paint;
+    switch (type) {
       case "image":
+      case "film":
+      case "video":
         if (!paint.url) return undefined;
         leafPaint = PaintImage.image(ui, attrName, paint, boxBounds, !recycleMap || !recycleMap[paint.url]);
+        if (type !== "image") PaintImage[type](leafPaint);
         break;
 
       case "linear":
@@ -1199,7 +1239,7 @@ function getLeafPaint(attrName, paint, ui) {
         break;
 
       case "solid":
-        const {type: type, color: color, opacity: opacity} = paint;
+        const {color: color, opacity: opacity} = paint;
         leafPaint = {
             type: type,
             style: ColorConvert.string(color, opacity)
@@ -1243,7 +1283,7 @@ const {isSame: isSame} = BoundsHelper;
 
 function image(ui, attrName, paint, boxBounds, firstUse) {
     let leafPaint, event;
-    const image = ImageManager.get(paint);
+    const image = ImageManager.get(paint, paint.type);
     if (cache && paint === cache.paint && isSame(boxBounds, cache.boxBounds)) {
         leafPaint = cache.leafPaint;
     } else {
@@ -1304,8 +1344,8 @@ function image(ui, attrName, paint, boxBounds, firstUse) {
 }
 
 function checkSizeAndCreateData(ui, attrName, paint, image, leafPaint, boxBounds) {
-    if (attrName === "fill" && !ui.__.__naturalWidth) {
-        const data = ui.__;
+    const data = ui.__;
+    if (attrName === "fill" && !data.__naturalWidth) {
         data.__naturalWidth = image.width / data.pixelRatio;
         data.__naturalHeight = image.height / data.pixelRatio;
         if (data.__autoSide) {
@@ -1317,7 +1357,12 @@ function checkSizeAndCreateData(ui, attrName, paint, image, leafPaint, boxBounds
             return false;
         }
     }
-    if (!leafPaint.data) PaintImage.createData(leafPaint, image, paint, boxBounds);
+    if (!leafPaint.data) {
+        PaintImage.createData(leafPaint, image, paint, boxBounds);
+        const {transform: transform} = leafPaint.data, {opacity: opacity, blendMode: blendMode} = paint;
+        const clip = transform && !transform.onlyScale || data.path || data.cornerRadius;
+        if (clip || opacity && opacity < 1 || blendMode) leafPaint.complex = clip ? 2 : true;
+    }
     return true;
 }
 
@@ -1360,7 +1405,7 @@ function getPatternData(paint, box, image) {
     if (paint.padding) box = tempBox.set(box).shrink(paint.padding);
     if (paint.mode === "strench") paint.mode = "stretch";
     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, interlace: interlace} = paint;
+    const {mode: mode, align: align, offset: offset, scale: scale, size: size, rotation: rotation, skew: skew, clipSize: clipSize, repeat: repeat, gap: gap, interlace: interlace} = paint;
     const sameBox = box.width === width && box.height === height;
     const data = {
         mode: mode
@@ -1423,8 +1468,6 @@ function getPatternData(paint, box, image) {
         data.scaleX = scaleX;
         data.scaleY = scaleY;
     }
-    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";
     if (interlace) data.interlace = isNumber(interlace) || interlace.type === "percent" ? {
         type: "x",
@@ -1455,7 +1498,7 @@ const {get: get$2, set: set, rotateOfOuter: rotateOfOuter$1, translate: translat
 
 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;
+    if (x || y) translate(transform, x, y); else if (scaleX > 0 && scaleY > 0) transform.onlyScale = true;
     scaleHelper(transform, scaleX, scaleY);
     data.transform = transform;
 }
@@ -1527,39 +1570,6 @@ function layout(transform, box, x, y, scaleX, scaleY, rotation, skew) {
     translate(transform, box.x + x, box.y + y);
 }
 
-function __awaiter(thisArg, _arguments, P, generator) {
-    function adopt(value) {
-        return value instanceof P ? value : new P(function(resolve) {
-            resolve(value);
-        });
-    }
-    return new (P || (P = Promise))(function(resolve, reject) {
-        function fulfilled(value) {
-            try {
-                step(generator.next(value));
-            } catch (e) {
-                reject(e);
-            }
-        }
-        function rejected(value) {
-            try {
-                step(generator["throw"](value));
-            } catch (e) {
-                reject(e);
-            }
-        }
-        function step(result) {
-            result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected);
-        }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-}
-
-typeof SuppressedError === "function" ? SuppressedError : function(error, suppressed, message) {
-    var e = new Error(message);
-    return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
-};
-
 const {get: get$1, scale: scale, copy: copy$1} = MatrixHelper;
 
 const {getFloorScale: getFloorScale} = MathHelper, {abs: abs$1} = Math;
@@ -1577,10 +1587,10 @@ function createPatternTask(paint, ui, canvas, renderOptions) {
 }
 
 function createPattern(paint, ui, canvas, renderOptions) {
-    let {scaleX: scaleX, scaleY: scaleY} = PaintImage.getImageRenderScaleData(paint, ui, canvas, renderOptions), id = scaleX + "-" + scaleY;
+    let {scaleX: scaleX, scaleY: scaleY} = PaintImage.getImageRenderScaleData(paint, ui, canvas, renderOptions), id = paint.film ? paint.nowIndex : scaleX + "-" + scaleY;
     if (paint.patternId !== id && !ui.destroyed) {
         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);
+            const {image: image, data: data} = paint, {opacity: opacity, filters: filters} = paint.originPaint, {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;
@@ -1596,7 +1606,7 @@ function createPattern(paint, ui, canvas, renderOptions) {
                 if (transform) copy$1(imageMatrix, transform);
                 scale(imageMatrix, 1 / scaleX, 1 / scaleY);
             }
-            const imageCanvas = image.getCanvas(width, height, data.opacity, data.filters, xGap, yGap, ui.leafer && ui.leafer.config.smooth, data.interlace);
+            const imageCanvas = image.getCanvas(width, height, opacity, filters, xGap, yGap, ui.leafer && ui.leafer.config.smooth, data.interlace);
             const pattern = image.getPattern(imageCanvas, data.repeat || (Platform.origin.noRepeat || "no-repeat"), imageMatrix, paint);
             paint.style = pattern;
             paint.patternId = id;
@@ -1617,15 +1627,15 @@ function getPatternFixScale(paint, imageScaleX, imageScaleY) {
 }
 
 function checkImage(paint, drawImage, ui, canvas, renderOptions) {
-    const {scaleX: scaleX, scaleY: scaleY} = PaintImage.getImageRenderScaleData(paint, ui, canvas, renderOptions);
+    const {scaleX: scaleX, scaleY: scaleY} = PaintImage.getImageRenderScaleData(paint, ui, canvas, renderOptions), id = paint.film ? paint.nowIndex : scaleX + "-" + scaleY;
     const {image: image, data: data, originPaint: originPaint} = paint, {exporting: exporting, snapshot: snapshot} = renderOptions;
-    if (!data || paint.patternId === scaleX + "-" + scaleY && !exporting || snapshot) {
+    if (!data || paint.patternId === id && !exporting || snapshot) {
         return false;
     } else {
         if (drawImage) {
             if (data.repeat) {
                 drawImage = false;
-            } else if (!(originPaint.changeful || Platform.name === "miniapp" && ResizeEvent.isResizing(ui) || exporting)) {
+            } else if (!(originPaint.changeful || paint.film || Platform.name === "miniapp" && ResizeEvent.isResizing(ui) || exporting)) {
                 drawImage = Platform.image.isLarge(image, scaleX, scaleY) || image.width * scaleX > 8096 || image.height * scaleY > 8096;
             }
         }
@@ -1643,20 +1653,21 @@ function checkImage(paint, drawImage, ui, canvas, renderOptions) {
     }
 }
 
-function drawImage(paint, _imageScaleX, _imageScaleY, ui, canvas, _renderOptions) {
-    const {data: data, image: image} = paint, {blendMode: blendMode} = paint.originPaint, {opacity: opacity, transform: transform} = data, view = image.getFull(data.filters), u = ui.__;
-    let {width: width, height: height} = image, clipUI;
-    if ((clipUI = transform && !transform.onlyScale || u.path || u.cornerRadius) || opacity || blendMode) {
+function drawImage(paint, imageScaleX, imageScaleY, ui, canvas, _renderOptions) {
+    const {data: data, image: image, complex: complex} = paint;
+    let {width: width, height: height} = image;
+    if (complex) {
+        const {blendMode: blendMode, opacity: opacity} = paint.originPaint, {transform: transform} = data;
         canvas.save();
-        clipUI && canvas.clipUI(ui);
+        complex === 2 && canvas.clipUI(ui);
         blendMode && (canvas.blendMode = blendMode);
         opacity && (canvas.opacity *= opacity);
         transform && canvas.transform(transform);
-        canvas.drawImage(view, 0, 0, width, height);
+        image.render(canvas, 0, 0, width, height, ui, paint, imageScaleX, imageScaleY);
         canvas.restore();
     } else {
         if (data.scaleX) width *= data.scaleX, height *= data.scaleY;
-        canvas.drawImage(view, 0, 0, width, height);
+        image.render(canvas, 0, 0, width, height, ui, paint, imageScaleX, imageScaleY);
     }
 }