@visactor/vchart 2.0.22-alpha.0 → 2.0.22-alpha.2

package/build/index.js

@@ -11436,7 +11436,9 @@
       background: null,
       autoAnimateTexture: !1,
       textureRatio: 1,
-      textureOptions: null,
+      textureOptions: {
+        alignToGraphic: !0
+      },
       backgroundOpacity: 1,
       backgroundCornerRadius: 0,
       texture: null,
@@ -11450,6 +11452,7 @@
       backgroundScale: 1,
       backgroundOffsetX: 0,
       backgroundOffsetY: 0,
+      backgroundPosition: "top-left",
       blur: 0,
       filter: "",
       cursor: null,
@@ -11622,11 +11625,16 @@
     const DefaultImageAttribute = Object.assign(Object.assign({
       repeatX: "no-repeat",
       repeatY: "no-repeat",
+      imageMode: void 0,
       image: "",
       width: 0,
       height: 0,
       maxWidth: 500,
-      maxHeight: 500
+      maxHeight: 500,
+      imagePosition: "top-left",
+      imageScale: 1,
+      imageOffsetX: 0,
+      imageOffsetY: 0
     }, DefaultAttribute), {
       fill: !0,
       cornerRadius: 0,
@@ -16678,7 +16686,8 @@
         return isString$1(path, !0) ? this.pathProxy = new CustomPath2D().fromString(path) : this.pathProxy = new CustomPath2D(), this.pathProxy;
       }
       loadImage(image, background = !1) {
-        if (!image || background && backgroundNotImage(image)) return;
+        if (background && (null == image ? void 0 : image.background) && (image = image.background), background && (!image || backgroundNotImage(image))) return void (this.backgroundImg = !1);
+        if (!image) return;
         const url = image;
         this.resources || (this.resources = new Map());
         const cache = {
@@ -16733,7 +16742,7 @@
       }
     }
     function backgroundNotImage(image) {
-      return !(!image.fill && !image.stroke);
+      return "string" == typeof image ? !(image.startsWith("<svg") || isValidUrl$1(image) || image.includes("/") || isBase64$1(image)) : !(!image.fill && !image.stroke) || !("string" != typeof image.gradient || !Array.isArray(image.stops));
     }
     function isExternalTexture(texture) {
       return !!texture && ("string" == typeof texture ? !builtinTextureTypes.has(texture) && (texture.startsWith("<svg") || isValidUrl$1(texture) || texture.includes("/") || isBase64$1(texture)) : isObject$2(texture));
@@ -18869,7 +18878,7 @@
       return [new Paragraph(text1, paragraph.newLine, paragraph.character, paragraph.ascentDescentMode), new Paragraph(text2, !0, paragraph.character, paragraph.ascentDescentMode)];
     }
 
-    const IMAGE_UPDATE_TAG_KEY = ["width", "height", "image", ...GRAPHIC_UPDATE_TAG_KEY];
+    const IMAGE_UPDATE_TAG_KEY = ["width", "height", "image", "imageMode", "imagePosition", "imageScale", "imageOffsetX", "imageOffsetY", ...GRAPHIC_UPDATE_TAG_KEY];
     class Image extends Graphic {
       constructor(params) {
         super(params), this.type = "image", this.numberType = IMAGE_NUMBER_TYPE, this.loadImage(this.attribute.image);
@@ -18974,6 +18983,7 @@
     }
     Image.NOWORK_ANIMATE_ATTR = Object.assign({
       image: 1,
+      imageMode: 1,
       repeatX: 1,
       repeatY: 1
     }, NOWORK_ANIMATE_ATTR);
@@ -20167,11 +20177,12 @@
           backgroundScale = graphicAttribute.backgroundScale,
           backgroundOffsetX = graphicAttribute.backgroundOffsetX,
           backgroundOffsetY = graphicAttribute.backgroundOffsetY,
-          backgroundClip = graphicAttribute.backgroundClip
+          backgroundClip = graphicAttribute.backgroundClip,
+          backgroundPosition = graphicAttribute.backgroundPosition
         } = graphic.attribute;
         if (background) if (graphic.backgroundImg && graphic.resources) {
-          const res = graphic.resources.get(background);
-          if ("success" !== res.state || !res.data) return;
+          const res = graphic.resources.get(getBackgroundImage(background));
+          if (!res || "success" !== res.state || !res.data) return;
           if (context.save(), graphic.parent && !graphic.transMatrix.onlyTranslate()) {
             const groupAttribute = getTheme$1(graphic.parent).group,
               {
@@ -20188,59 +20199,160 @@
             backgroundKeepAspectRatio: backgroundKeepAspectRatio,
             backgroundScale: backgroundScale,
             backgroundOffsetX: backgroundOffsetX,
-            backgroundOffsetY: backgroundOffsetY
+            backgroundOffsetY: backgroundOffsetY,
+            backgroundPosition: backgroundPosition
           }), context.restore(), graphic.transMatrix.onlyTranslate() || context.setTransformForCurrent();
         } else context.highPerformanceSave(), context.setCommonStyle(graphic, graphic.attribute, x, y, graphicAttribute), context.globalAlpha = backgroundOpacity * opacity, context.fillStyle = background, context.fill(), context.highPerformanceRestore();
       }
       doDrawImage(context, data, b, params) {
-        const {
-            backgroundMode: backgroundMode,
-            backgroundFit: backgroundFit,
-            backgroundKeepAspectRatio: backgroundKeepAspectRatio,
-            backgroundScale = 1,
-            backgroundOffsetX = 0,
-            backgroundOffsetY = 0
-          } = params,
-          targetW = b.width(),
-          targetH = b.height();
-        let w = targetW,
-          h = targetH;
-        if ("no-repeat" === backgroundMode) {
-          if (backgroundFit) {
-            if (backgroundKeepAspectRatio) {
-              const maxScale = Math.max(targetW / data.width, targetH / data.height);
-              context.drawImage(data, b.x1 + backgroundOffsetX, b.y1 + backgroundOffsetY, data.width * maxScale * backgroundScale, data.height * maxScale * backgroundScale);
-            } else context.drawImage(data, b.x1, b.y1, b.width(), b.height());
-          } else {
-            const resW = data.width * backgroundScale,
-              resH = data.height * backgroundScale;
-            context.drawImage(data, b.x1 + backgroundOffsetX, b.y1 + backgroundOffsetY, resW, resH);
-          }
-        } else {
-          if (backgroundFit && "repeat" !== backgroundMode && (data.width || data.height)) {
-            const resW = data.width,
-              resH = data.height;
-            if ("repeat-x" === backgroundMode) {
-              w = resW * (targetH / resH), h = targetH;
-            } else if ("repeat-y" === backgroundMode) {
-              h = resH * (targetW / resW), w = targetW;
-            }
-            const dpr = context.dpr,
-              canvas = canvasAllocate.allocate({
-                width: w,
-                height: h,
-                dpr: dpr
-              }),
-              ctx = canvas.getContext("2d");
-            ctx && (ctx.inuse = !0, ctx.clearMatrix(), ctx.setTransformForCurrent(!0), ctx.clearRect(0, 0, w, h), ctx.drawImage(data, 0, 0, w, h), data = canvas.nativeCanvas), canvasAllocate.free(canvas);
-          }
-          const dpr = context.dpr,
-            pattern = context.createPattern(data, backgroundMode);
-          pattern.setTransform && pattern.setTransform(new DOMMatrix([1 / dpr, 0, 0, 1 / dpr, 0, 0])), context.fillStyle = pattern, context.translate(b.x1, b.y1), context.fillRect(0, 0, targetW, targetH), context.translate(-b.x1, -b.y1);
-        }
+        drawBackgroundImage(context, data, b, params);
       }
     }
     const defaultBaseBackgroundRenderContribution = new DefaultBaseBackgroundRenderContribution();
+    const verticalPositionKeywords = new Set(["top", "center", "bottom"]);
+    function getBackgroundImage(background) {
+      var _a;
+      return null !== (_a = null == background ? void 0 : background.background) && void 0 !== _a ? _a : background;
+    }
+    function resolveBackgroundSizing({
+      backgroundFit: backgroundFit,
+      backgroundKeepAspectRatio: backgroundKeepAspectRatio
+    }) {
+      return backgroundFit ? backgroundKeepAspectRatio ? "cover" : "fill" : "auto";
+    }
+    const NO_REPEAT_SIZING_MAP = {
+      "no-repeat-cover": "cover",
+      "no-repeat-contain": "contain",
+      "no-repeat-fill": "fill",
+      "no-repeat-auto": "auto"
+    };
+    function resolveBackgroundDrawMode({
+      backgroundMode: backgroundMode,
+      backgroundFit: backgroundFit,
+      backgroundKeepAspectRatio: backgroundKeepAspectRatio
+    }) {
+      const sizing = NO_REPEAT_SIZING_MAP[backgroundMode];
+      return sizing ? {
+        backgroundRepeatMode: "no-repeat",
+        backgroundSizing: sizing
+      } : {
+        backgroundRepeatMode: backgroundMode,
+        backgroundSizing: resolveBackgroundSizing({
+          backgroundFit: backgroundFit,
+          backgroundKeepAspectRatio: backgroundKeepAspectRatio
+        })
+      };
+    }
+    function isPercentageValue(value) {
+      return /^-?\d+(\.\d+)?%$/.test(value);
+    }
+    function parsePositionToken(value, remainSpace, startKeyword, centerKeyword, endKeyword) {
+      if ("number" == typeof value && Number.isFinite(value)) return value;
+      const normalizedValue = `${null != value ? value : ""}`.trim().toLowerCase();
+      if (!normalizedValue || normalizedValue === startKeyword) return 0;
+      if (normalizedValue === centerKeyword) return remainSpace / 2;
+      if (normalizedValue === endKeyword) return remainSpace;
+      if (isPercentageValue(normalizedValue)) return remainSpace * parseFloat(normalizedValue) / 100;
+      const parsedValue = Number(normalizedValue);
+      return Number.isFinite(parsedValue) ? parsedValue : 0;
+    }
+    function normalizeBackgroundPosition(position) {
+      var _a, _b;
+      if (Array.isArray(position)) return [null !== (_a = position[0]) && void 0 !== _a ? _a : "left", null !== (_b = position[1]) && void 0 !== _b ? _b : "top"];
+      const tokens = `${null != position ? position : "top-left"}`.trim().toLowerCase().replace(/-/g, " ").split(/\s+/).filter(Boolean);
+      if (0 === tokens.length) return ["left", "top"];
+      if (1 === tokens.length) {
+        const token = tokens[0];
+        return "center" === token ? ["center", "center"] : verticalPositionKeywords.has(token) ? ["center", token] : [token, "center"];
+      }
+      let horizontal, vertical;
+      const genericTokens = [];
+      for (let i = 0; i < 2; i++) {
+        const token = tokens[i];
+        "left" !== token && "right" !== token ? "top" !== token && "bottom" !== token ? genericTokens.push(token) : vertical = token : horizontal = token;
+      }
+      return null == horizontal && genericTokens.length && (horizontal = genericTokens.shift()), null == vertical && genericTokens.length && (vertical = genericTokens.shift()), [null != horizontal ? horizontal : "left", null != vertical ? vertical : "top"];
+    }
+    function resolveBackgroundPosition(position, remainWidth, remainHeight) {
+      const [horizontalPosition, verticalPosition] = normalizeBackgroundPosition(position);
+      return {
+        x: parsePositionToken(horizontalPosition, remainWidth, "left", "center", "right"),
+        y: parsePositionToken(verticalPosition, remainHeight, "top", "center", "bottom")
+      };
+    }
+    function pickRenderableDimension(...values) {
+      for (const value of values) if ("number" == typeof value && Number.isFinite(value) && value > 0) return value;
+      return null;
+    }
+    function resolveRenderableImageSize(data) {
+      if (!data) return null;
+      const width = pickRenderableDimension(data.naturalWidth, data.videoWidth, data.width),
+        height = pickRenderableDimension(data.naturalHeight, data.videoHeight, data.height);
+      return null == width || null == height ? null : {
+        width: width,
+        height: height
+      };
+    }
+    function drawBackgroundImage(context, data, b, params) {
+      var _a, _b;
+      const {
+          backgroundMode: backgroundMode,
+          backgroundFit: backgroundFit,
+          backgroundKeepAspectRatio: backgroundKeepAspectRatio,
+          backgroundScale = 1,
+          backgroundOffsetX = 0,
+          backgroundOffsetY = 0,
+          backgroundPosition = "top-left"
+        } = params,
+        targetW = b.width(),
+        targetH = b.height(),
+        sourceSize = resolveRenderableImageSize(data),
+        {
+          backgroundRepeatMode: backgroundRepeatMode,
+          backgroundSizing: resolvedBackgroundSizing
+        } = resolveBackgroundDrawMode({
+          backgroundMode: backgroundMode,
+          backgroundFit: backgroundFit,
+          backgroundKeepAspectRatio: backgroundKeepAspectRatio
+        });
+      let w = targetW,
+        h = targetH;
+      if (targetW <= 0 || targetH <= 0) return;
+      if ("no-repeat" === backgroundRepeatMode) {
+        let drawWidth = null !== (_a = null == sourceSize ? void 0 : sourceSize.width) && void 0 !== _a ? _a : targetW,
+          drawHeight = null !== (_b = null == sourceSize ? void 0 : sourceSize.height) && void 0 !== _b ? _b : targetH;
+        if ("cover" !== resolvedBackgroundSizing && "contain" !== resolvedBackgroundSizing || !sourceSize) "fill" === resolvedBackgroundSizing && (drawWidth = targetW, drawHeight = targetH);else {
+          const scale = "cover" === resolvedBackgroundSizing ? Math.max(targetW / sourceSize.width, targetH / sourceSize.height) : Math.min(targetW / sourceSize.width, targetH / sourceSize.height);
+          drawWidth = sourceSize.width * scale, drawHeight = sourceSize.height * scale;
+        }
+        drawWidth *= backgroundScale, drawHeight *= backgroundScale;
+        const {
+          x: x,
+          y: y
+        } = resolveBackgroundPosition(backgroundPosition, targetW - drawWidth, targetH - drawHeight);
+        return void context.drawImage(data, b.x1 + x + backgroundOffsetX, b.y1 + y + backgroundOffsetY, drawWidth, drawHeight);
+      }
+      if (backgroundFit && "repeat" !== backgroundRepeatMode && sourceSize) {
+        const resW = sourceSize.width,
+          resH = sourceSize.height;
+        if ("repeat-x" === backgroundRepeatMode) {
+          w = resW * (targetH / resH), h = targetH;
+        } else if ("repeat-y" === backgroundRepeatMode) {
+          h = resH * (targetW / resW), w = targetW;
+        }
+        const dpr = context.dpr,
+          canvas = canvasAllocate.allocate({
+            width: w,
+            height: h,
+            dpr: dpr
+          }),
+          ctx = canvas.getContext("2d");
+        ctx && (ctx.inuse = !0, ctx.clearMatrix(), ctx.setTransformForCurrent(!0), ctx.clearRect(0, 0, w, h), ctx.drawImage(data, 0, 0, w, h), data = canvas.nativeCanvas), canvasAllocate.free(canvas);
+      }
+      const dpr = context.dpr,
+        pattern = context.createPattern(data, backgroundRepeatMode);
+      pattern.setTransform && pattern.setTransform(new DOMMatrix([1 / dpr, 0, 0, 1 / dpr, 0, 0])), context.fillStyle = pattern, context.translate(b.x1, b.y1), context.fillRect(0, 0, targetW, targetH), context.translate(-b.x1, -b.y1);
+    }
     let DefaultBaseInteractiveRenderContribution = class {
       constructor(subRenderContribitions) {
         this.subRenderContribitions = subRenderContribitions, this.time = BaseRenderContributionTime.afterFillStroke, this.useStyle = !0, this.order = 0;
@@ -20399,13 +20511,14 @@
         texture && this.drawTexture(texture, graphic, context, x, y, graphicAttribute, textureColor, textureSize, texturePadding);
       }
       drawTexture(texture, graphic, context, x, y, graphicAttribute, textureColor, textureSize, texturePadding) {
-        var _a;
+        var _a, _b, _c, _d, _e, _f;
         const {
           textureRatio = graphicAttribute.textureRatio,
           textureOptions = null
         } = graphic.attribute;
         let pattern = null;
-        const patternKey = this.getPatternCacheKey(texture, textureSize, texturePadding, textureColor, context.dpr);
+        const textureRadius = null !== (_a = null == textureOptions ? void 0 : textureOptions.radius) && void 0 !== _a ? _a : 0,
+          patternKey = this.getPatternCacheKey(texture, textureSize, texturePadding, textureColor, context.dpr, textureRadius);
         if (null !== patternKey && (pattern = this.textureMap.get(patternKey)), !pattern) {
           if ("string" == typeof texture) switch (texture) {
             case "circle":
@@ -20432,7 +20545,7 @@
             case "grid":
               pattern = this.createGridPattern(textureSize, texturePadding, textureColor, context);
           }
-          pattern || (pattern = this.createResourcePattern(texture, graphic, context)), pattern && null !== patternKey && this.textureMap.set(patternKey, pattern);
+          pattern || (pattern = this.createResourcePattern(texture, graphic, context, texturePadding, textureRadius)), pattern && null !== patternKey && this.textureMap.set(patternKey, pattern);
         }
         if ("string" == typeof texture && textureOptions && textureOptions.dynamicTexture) {
           const {
@@ -20479,10 +20592,24 @@
           for (let i = 0; i < gridRows; i++) for (let j = 0; j < gridColumns; j++) {
             const _x = x + cellSize / 2 + j * cellSize,
               _y = y + cellSize / 2 + i * cellSize;
-            null === (_a = textureOptions.beforeDynamicTexture) || void 0 === _a || _a.call(textureOptions, context, i, j, gridRows, gridColumns, textureRatio, graphic, b.width(), b.height()), context.beginPath(), !1 === parsedPath.draw(context, Math.min(sizeW - gutterColumn, sizeH - gutterRow), _x, _y, 0) && context.closePath(), context.fillStyle = textureColor, textureOptions.dynamicTexture(context, i, j, gridRows, gridColumns, textureRatio, graphic, b.width(), b.height());
+            null === (_b = textureOptions.beforeDynamicTexture) || void 0 === _b || _b.call(textureOptions, context, i, j, gridRows, gridColumns, textureRatio, graphic, b.width(), b.height()), context.beginPath(), !1 === parsedPath.draw(context, Math.min(sizeW - gutterColumn, sizeH - gutterRow), _x, _y, 0) && context.closePath(), context.fillStyle = textureColor, textureOptions.dynamicTexture(context, i, j, gridRows, gridColumns, textureRatio, graphic, b.width(), b.height());
           }
           useNewCanvas && (originalContext.globalAlpha = 1, originalContext.drawImage(newCanvas.nativeCanvas, 0, 0, newCanvas.nativeCanvas.width, newCanvas.nativeCanvas.height, b.x1, b.y1, b.width() * originalContext.dpr, b.height() * originalContext.dpr)), originalContext.restore();
-        } else if (pattern) context.highPerformanceSave(), context.setCommonStyle(graphic, graphic.attribute, x, y, graphicAttribute), context.fillStyle = pattern, context.fill(), context.highPerformanceRestore();else if ("wave" === texture) {
+        } else if (pattern) {
+          if (pattern.setTransform) {
+            const alignToGraphic = !!(null == textureOptions ? void 0 : textureOptions.alignToGraphic),
+              alignOffsetX = null !== (_c = null == textureOptions ? void 0 : textureOptions.alignOffsetX) && void 0 !== _c ? _c : 0,
+              alignOffsetY = null !== (_d = null == textureOptions ? void 0 : textureOptions.alignOffsetY) && void 0 !== _d ? _d : 0;
+            let translateX = 0,
+              translateY = 0;
+            if (alignToGraphic) {
+              const m = context.currentMatrix;
+              translateX = (null !== (_e = null == m ? void 0 : m.e) && void 0 !== _e ? _e : 0) + x + alignOffsetX, translateY = (null !== (_f = null == m ? void 0 : m.f) && void 0 !== _f ? _f : 0) + y + alignOffsetY;
+            } else (alignOffsetX || alignOffsetY) && (translateX = alignOffsetX, translateY = alignOffsetY);
+            pattern.setTransform(new DOMMatrix([1 / context.dpr, 0, 0, 1 / context.dpr, translateX, translateY]));
+          }
+          context.highPerformanceSave(), context.setCommonStyle(graphic, graphic.attribute, x, y, graphicAttribute), context.fillStyle = pattern, context.fill(), context.highPerformanceRestore();
+        } else if ("wave" === texture) {
           context.save(), context.setCommonStyle(graphic, graphic.attribute, x, y, graphicAttribute), context.clip();
           const b = graphic.AABBBounds;
           drawWave(context, textureRatio, b.width(), b.height(), Object.assign(Object.assign({}, textureOptions || {}), {
@@ -20490,14 +20617,42 @@
           }), x + b.x1 - x, y + b.y1 - y), context.restore();
         }
       }
-      getPatternCacheKey(texture, textureSize, texturePadding, textureColor, dpr) {
-        return "string" != typeof texture ? texture : "wave" === texture ? null : `${texture}-${textureSize}-${texturePadding}-${textureColor}-${dpr}`;
+      getPatternCacheKey(texture, textureSize, texturePadding, textureColor, dpr, textureRadius) {
+        return "string" != typeof texture ? texturePadding > 0 || textureRadius > 0 ? null : texture : "wave" === texture ? null : `${texture}-${textureSize}-${texturePadding}-${textureColor}-${dpr}`;
       }
-      createResourcePattern(texture, graphic, context) {
+      createResourcePattern(texture, graphic, context, texturePadding, textureRadius) {
         var _a;
         const resource = null === (_a = graphic.resources) || void 0 === _a ? void 0 : _a.get(texture),
           data = "success" === (null == resource ? void 0 : resource.state) ? resource.data : "object" == typeof texture ? texture : null;
         if (!data) return null;
+        if (texturePadding > 0 || textureRadius > 0) {
+          const w = data.naturalWidth || data.width,
+            h = data.naturalHeight || data.height;
+          if (w > 0 && h > 0) {
+            const tileW = w + 2 * texturePadding,
+              tileH = h + 2 * texturePadding,
+              canvas = canvasAllocate.allocate({
+                width: tileW,
+                height: tileH,
+                dpr: context.dpr
+              }),
+              ctx = canvas.getContext("2d");
+            if (ctx) {
+              if (ctx.inuse = !0, ctx.clearMatrix(), ctx.setTransformForCurrent(!0), ctx.clearRect(0, 0, tileW, tileH), textureRadius > 0) {
+                const r = Math.max(0, Math.min(textureRadius, Math.min(w, h) / 2)),
+                  x0 = texturePadding,
+                  y0 = texturePadding,
+                  x1 = x0 + w,
+                  y1 = y0 + h;
+                ctx.beginPath(), ctx.moveTo(x0 + r, y0), ctx.lineTo(x1 - r, y0), ctx.quadraticCurveTo(x1, y0, x1, y0 + r), ctx.lineTo(x1, y1 - r), ctx.quadraticCurveTo(x1, y1, x1 - r, y1), ctx.lineTo(x0 + r, y1), ctx.quadraticCurveTo(x0, y1, x0, y1 - r), ctx.lineTo(x0, y0 + r), ctx.quadraticCurveTo(x0, y0, x0 + r, y0), ctx.closePath(), ctx.clip();
+              }
+              ctx.drawImage(data, texturePadding, texturePadding, w, h);
+              const pattern = context.createPattern(canvas.nativeCanvas, "repeat");
+              return (null == pattern ? void 0 : pattern.setTransform) && pattern.setTransform(new DOMMatrix([1 / context.dpr, 0, 0, 1 / context.dpr, 0, 0])), canvasAllocate.free(canvas), pattern;
+            }
+            canvasAllocate.free(canvas);
+          }
+        }
         const pattern = context.createPattern(data, "repeat");
         return (null == pattern ? void 0 : pattern.setTransform) && pattern.setTransform(new DOMMatrix([1 / context.dpr, 0, 0, 1 / context.dpr, 0, 0])), pattern;
       }
@@ -20612,27 +20767,32 @@
       drawShape(graphic, context, x, y, doFill, doStroke, fVisible, sVisible, graphicAttribute, drawContext, fillCb, strokeCb) {
         const {
           background: background,
+          backgroundOpacity = graphicAttribute.backgroundOpacity,
+          opacity = graphicAttribute.opacity,
           backgroundMode = graphicAttribute.backgroundMode,
           backgroundFit = graphicAttribute.backgroundFit,
           backgroundKeepAspectRatio = graphicAttribute.backgroundKeepAspectRatio,
           backgroundScale = graphicAttribute.backgroundScale,
           backgroundOffsetX = graphicAttribute.backgroundOffsetX,
-          backgroundOffsetY = graphicAttribute.backgroundOffsetY
+          backgroundOffsetY = graphicAttribute.backgroundOffsetY,
+          backgroundClip = graphicAttribute.backgroundClip,
+          backgroundPosition = graphicAttribute.backgroundPosition
         } = graphic.attribute;
         if (background) if (graphic.backgroundImg && graphic.resources) {
-          const res = graphic.resources.get(background);
-          if ("success" !== res.state || !res.data) return;
+          const res = graphic.resources.get(getBackgroundImage(background));
+          if (!res || "success" !== res.state || !res.data) return;
           context.highPerformanceSave(), context.setTransformFromMatrix(graphic.parent.globalTransMatrix, !0);
           const b = graphic.AABBBounds;
-          this.doDrawImage(context, res.data, b, {
+          context.globalAlpha = backgroundOpacity * opacity, backgroundClip && context.clip(), this.doDrawImage(context, res.data, b, {
             backgroundMode: backgroundMode,
             backgroundFit: backgroundFit,
             backgroundKeepAspectRatio: backgroundKeepAspectRatio,
             backgroundScale: backgroundScale,
             backgroundOffsetX: backgroundOffsetX,
-            backgroundOffsetY: backgroundOffsetY
+            backgroundOffsetY: backgroundOffsetY,
+            backgroundPosition: backgroundPosition
           }), context.highPerformanceRestore(), context.setTransformForCurrent();
-        } else context.highPerformanceSave(), context.fillStyle = background, context.fill(), context.highPerformanceRestore();
+        } else context.highPerformanceSave(), context.globalAlpha = backgroundOpacity * opacity, context.fillStyle = background, context.fill(), context.highPerformanceRestore();
       }
     }
     const defaultGroupBackgroundRenderContribution = new DefaultGroupBackgroundRenderContribution();
@@ -22114,9 +22274,17 @@
       drawShape(graphic, context, x, y, doFill, doStroke, fVisible, sVisible, graphicAttribute, drawContext, fillCb, strokeCb) {
         var _a, _c, _d, _e, _f, _g, _h, _j, _k, _l;
         const {
+          backgroundOpacity = graphicAttribute.backgroundOpacity,
+          opacity = graphicAttribute.opacity,
           backgroundMode = graphicAttribute.backgroundMode,
           backgroundFit = graphicAttribute.backgroundFit,
-          backgroundKeepAspectRatio = graphicAttribute.backgroundKeepAspectRatio
+          backgroundKeepAspectRatio = graphicAttribute.backgroundKeepAspectRatio,
+          backgroundScale = graphicAttribute.backgroundScale,
+          backgroundOffsetX = graphicAttribute.backgroundOffsetX,
+          backgroundOffsetY = graphicAttribute.backgroundOffsetY,
+          backgroundPosition = graphicAttribute.backgroundPosition,
+          backgroundClip = graphicAttribute.backgroundClip,
+          backgroundCornerRadius = graphicAttribute.backgroundCornerRadius
         } = graphic.attribute;
         let matrix,
           {
@@ -22128,18 +22296,18 @@
         };
         let b;
         "richtext" === graphic.type && (matrix = context.currentMatrix.clone(), context.restore(), context.save(), context.setTransformForCurrent());
-        const shouldReCalBounds = isObject$2(background) && background.background,
+        const backgroundConfig = isObject$2(background) && background.background ? background : null,
           onlyTranslate = graphic.transMatrix.onlyTranslate();
-        if (shouldReCalBounds) {
+        if (backgroundConfig) {
           const _b = graphic.AABBBounds,
-            x = (null !== (_a = background.x) && void 0 !== _a ? _a : _b.x1) + (null !== (_c = background.dx) && void 0 !== _c ? _c : 0),
-            y = (null !== (_d = background.y) && void 0 !== _d ? _d : _b.y1) + (null !== (_e = background.dy) && void 0 !== _e ? _e : 0),
-            w = null !== (_f = background.width) && void 0 !== _f ? _f : _b.width(),
-            h = null !== (_g = background.height) && void 0 !== _g ? _g : _b.height();
-          if (b = boundsAllocate.allocate(x, y, x + w, y + h), background = background.background, !onlyTranslate) {
+            x = (null !== (_a = backgroundConfig.x) && void 0 !== _a ? _a : _b.x1) + (null !== (_c = backgroundConfig.dx) && void 0 !== _c ? _c : 0),
+            y = (null !== (_d = backgroundConfig.y) && void 0 !== _d ? _d : _b.y1) + (null !== (_e = backgroundConfig.dy) && void 0 !== _e ? _e : 0),
+            w = null !== (_f = backgroundConfig.width) && void 0 !== _f ? _f : _b.width(),
+            h = null !== (_g = backgroundConfig.height) && void 0 !== _g ? _g : _b.height();
+          if (b = boundsAllocate.allocate(x, y, x + w, y + h), background = backgroundConfig.background, !onlyTranslate) {
             const w = b.width(),
               h = b.height();
-            b.set((null !== (_h = background.x) && void 0 !== _h ? _h : 0) + (null !== (_j = background.dx) && void 0 !== _j ? _j : 0), (null !== (_k = background.y) && void 0 !== _k ? _k : 0) + (null !== (_l = background.dy) && void 0 !== _l ? _l : 0), w, h);
+            b.set((null !== (_h = backgroundConfig.x) && void 0 !== _h ? _h : 0) + (null !== (_j = backgroundConfig.dx) && void 0 !== _j ? _j : 0), (null !== (_k = backgroundConfig.y) && void 0 !== _k ? _k : 0) + (null !== (_l = backgroundConfig.dy) && void 0 !== _l ? _l : 0), w, h);
           }
         } else b = graphic.AABBBounds, onlyTranslate || (b = getTextBounds(Object.assign(Object.assign({}, graphic.attribute), {
           angle: 0,
@@ -22152,20 +22320,18 @@
         })).clone());
         if (graphic.backgroundImg && graphic.resources) {
           const res = graphic.resources.get(background);
-          if ("success" !== res.state || !res.data) return void restore();
-          context.highPerformanceSave(), onlyTranslate && context.setTransformFromMatrix(graphic.parent.globalTransMatrix, !0), context.setCommonStyle(graphic, graphic.attribute, x, y, graphicAttribute), this.doDrawImage(context, res.data, b, {
+          if (!res || "success" !== res.state || !res.data) return void restore();
+          context.highPerformanceSave(), onlyTranslate && context.setTransformFromMatrix(graphic.parent.globalTransMatrix, !0), context.globalAlpha = backgroundOpacity * opacity, backgroundClip && (context.beginPath(), backgroundCornerRadius ? createRectPath(context, b.x1, b.y1, b.width(), b.height(), backgroundCornerRadius, !0) : context.rect(b.x1, b.y1, b.width(), b.height()), context.clip()), this.doDrawImage(context, res.data, b, {
             backgroundMode: backgroundMode,
             backgroundFit: backgroundFit,
-            backgroundKeepAspectRatio: backgroundKeepAspectRatio
+            backgroundKeepAspectRatio: backgroundKeepAspectRatio,
+            backgroundScale: backgroundScale,
+            backgroundOffsetX: backgroundOffsetX,
+            backgroundOffsetY: backgroundOffsetY,
+            backgroundPosition: backgroundPosition
           }), context.highPerformanceRestore(), context.setTransformForCurrent();
-        } else {
-          const {
-            backgroundCornerRadius: backgroundCornerRadius,
-            backgroundOpacity = 1
-          } = graphic.attribute;
-          context.highPerformanceSave(), context.setCommonStyle(graphic, graphic.attribute, x, y, graphicAttribute), context.globalAlpha = backgroundOpacity, context.fillStyle = background, backgroundCornerRadius ? (createRectPath(context, b.x1, b.y1, b.width(), b.height(), backgroundCornerRadius, !0), context.fill()) : context.fillRect(b.x1, b.y1, b.width(), b.height()), context.highPerformanceRestore();
-        }
-        shouldReCalBounds && boundsAllocate.free(b), restore();
+        } else context.highPerformanceSave(), context.setCommonStyle(graphic, graphic.attribute, x, y, graphicAttribute), context.globalAlpha = backgroundOpacity * opacity, context.fillStyle = background, backgroundCornerRadius ? (createRectPath(context, b.x1, b.y1, b.width(), b.height(), backgroundCornerRadius, !0), context.fill()) : context.fillRect(b.x1, b.y1, b.width(), b.height()), context.highPerformanceRestore();
+        backgroundConfig && boundsAllocate.free(b), restore();
       }
     }
     const defaultTextBackgroundRenderContribution = new DefaultTextBackgroundRenderContribution();
@@ -22592,6 +22758,92 @@
         };
       };
     const repeatStr = ["", "repeat-x", "repeat-y", "repeat"];
+    function resolveImageMode({
+      repeatX = "no-repeat",
+      repeatY = "no-repeat",
+      imageMode: imageMode
+    }) {
+      const repeatMode = resolveImageRepeatMode(repeatX, repeatY);
+      return {
+        repeatMode: repeatMode,
+        sizingMode: "no-repeat" === repeatMode && null != imageMode ? imageMode : "fill"
+      };
+    }
+    const IMAGE_MODE_TO_BACKGROUND_MODE = {
+      cover: "no-repeat-cover",
+      contain: "no-repeat-contain",
+      fill: "no-repeat-fill",
+      auto: "no-repeat-auto"
+    };
+    function resolveBackgroundParamsByImageSizing(sizingMode) {
+      return {
+        backgroundMode: IMAGE_MODE_TO_BACKGROUND_MODE[sizingMode],
+        backgroundFit: !1,
+        backgroundKeepAspectRatio: !1
+      };
+    }
+    function resolveImageRepeatMode(repeatX, repeatY) {
+      let repeat = 0;
+      return "repeat" === repeatX && (repeat |= 1), "repeat" === repeatY && (repeat |= 2), repeat ? repeatStr[repeat] : "no-repeat";
+    }
+    function shouldClipImageByLayout({
+      repeatX = "no-repeat",
+      repeatY = "no-repeat",
+      imageMode: imageMode,
+      imageScale = 1,
+      imageOffsetX = 0,
+      imageOffsetY = 0,
+      imagePosition = "top-left"
+    }) {
+      const {
+        repeatMode: repeatMode,
+        sizingMode: sizingMode
+      } = resolveImageMode({
+        repeatX: repeatX,
+        repeatY: repeatY,
+        imageMode: imageMode
+      });
+      return "no-repeat" === repeatMode && ("cover" === sizingMode || "auto" === sizingMode || 1 !== imageScale || 0 !== imageOffsetX || 0 !== imageOffsetY);
+    }
+    function drawImageWithLayout(context, data, x, y, width, height, {
+      repeatX = "no-repeat",
+      repeatY = "no-repeat",
+      imageMode: imageMode,
+      imageScale = 1,
+      imageOffsetX = 0,
+      imageOffsetY = 0,
+      imagePosition = "top-left"
+    }) {
+      const {
+          repeatMode: repeatMode,
+          sizingMode: sizingMode
+        } = resolveImageMode({
+          repeatX: repeatX,
+          repeatY: repeatY,
+          imageMode: imageMode
+        }),
+        imageBackgroundParams = "no-repeat" === repeatMode ? resolveBackgroundParamsByImageSizing(sizingMode) : {
+          backgroundMode: repeatMode,
+          backgroundFit: !1,
+          backgroundKeepAspectRatio: !1
+        };
+      drawBackgroundImage(context, data, {
+        x1: x,
+        y1: y,
+        x2: x + width,
+        y2: y + height,
+        width: () => width,
+        height: () => height
+      }, {
+        backgroundMode: imageBackgroundParams.backgroundMode,
+        backgroundFit: imageBackgroundParams.backgroundFit,
+        backgroundKeepAspectRatio: imageBackgroundParams.backgroundKeepAspectRatio,
+        backgroundScale: imageScale,
+        backgroundOffsetX: imageOffsetX,
+        backgroundOffsetY: imageOffsetY,
+        backgroundPosition: imagePosition
+      });
+    }
     let DefaultCanvasImageRender = class extends BaseRender {
       constructor(graphicRenderContributions) {
         super(), this.graphicRenderContributions = graphicRenderContributions, this.numberType = IMAGE_NUMBER_TYPE, this.builtinContributions = [defaultImageRenderContribution, defaultImageBackgroundRenderContribution], this.init(graphicRenderContributions);
@@ -22606,6 +22858,11 @@
             cornerRadius = imageAttribute.cornerRadius,
             fillStrokeOrder = imageAttribute.fillStrokeOrder,
             cornerType = imageAttribute.cornerType,
+            imageMode = imageAttribute.imageMode,
+            imageScale = imageAttribute.imageScale,
+            imageOffsetX = imageAttribute.imageOffsetX,
+            imageOffsetY = imageAttribute.imageOffsetY,
+            imagePosition = imageAttribute.imagePosition,
             image: url
           } = image.attribute,
           data = this.valid(image, imageAttribute, fillCb);
@@ -22622,22 +22879,33 @@
         const width = image.width,
           height = image.height;
         context.beginPath();
-        let needRestore = !1;
-        0 === cornerRadius || isArray$1(cornerRadius) && cornerRadius.every(num => 0 === num) ? context.rect(x, y, width, height) : (createRectPath(context, x, y, width, height, cornerRadius, "bevel" !== cornerType), needRestore = !0), context.setShadowBlendStyle && context.setShadowBlendStyle(image, image.attribute, imageAttribute);
+        let needCornerClip = !1;
+        0 === cornerRadius || isArray$1(cornerRadius) && cornerRadius.every(num => 0 === num) ? context.rect(x, y, width, height) : (createRectPath(context, x, y, width, height, cornerRadius, "bevel" !== cornerType), needCornerClip = !0), context.setShadowBlendStyle && context.setShadowBlendStyle(image, image.attribute, imageAttribute);
         const _runFill = () => {
-            if (doFill) if (fillCb) fillCb(context, image.attribute, imageAttribute);else if (fVisible) {
-              context.setCommonStyle(image, image.attribute, x, y, imageAttribute);
-              let repeat = 0;
-              if ("repeat" === repeatX && (repeat |= 1), "repeat" === repeatY && (repeat |= 2), repeat) {
-                const pattern = context.createPattern(res.data, repeatStr[repeat]);
-                context.fillStyle = pattern, context.translate(x, y, !0), context.fillRect(0, 0, width, height), context.translate(-x, -y, !0);
-              } else context.drawImage(res.data, x, y, width, height);
-            }
+            doFill && (fillCb ? fillCb(context, image.attribute, imageAttribute) : fVisible && (context.setCommonStyle(image, image.attribute, x, y, imageAttribute), drawImageWithLayout(context, res.data, x, y, width, height, {
+              repeatX: repeatX,
+              repeatY: repeatY,
+              imageMode: imageMode,
+              imageScale: imageScale,
+              imageOffsetX: imageOffsetX,
+              imageOffsetY: imageOffsetY,
+              imagePosition: imagePosition
+            })));
           },
           _runStroke = () => {
             doStroke && (strokeCb ? strokeCb(context, image.attribute, imageAttribute) : sVisible && (context.setStrokeStyle(image, image.attribute, originX - x, originY - y, imageAttribute), context.stroke()));
-          };
-        fillStrokeOrder ? (_runStroke(), needRestore && (context.save(), context.clip()), this.beforeRenderStep(image, context, x, y, doFill, !1, fVisible, !1, imageAttribute, drawContext, fillCb), _runFill(), needRestore && context.restore()) : (needRestore && (context.save(), context.clip()), this.beforeRenderStep(image, context, x, y, doFill, !1, fVisible, !1, imageAttribute, drawContext, fillCb), _runFill(), needRestore && context.restore(), _runStroke()), this.afterRenderStep(image, context, x, y, doFill, !1, fVisible, !1, imageAttribute, drawContext, fillCb);
+          },
+          needLayoutClip = shouldClipImageByLayout({
+            repeatX: repeatX,
+            repeatY: repeatY,
+            imageMode: imageMode,
+            imageScale: imageScale,
+            imageOffsetX: imageOffsetX,
+            imageOffsetY: imageOffsetY,
+            imagePosition: imagePosition
+          }),
+          needClip = needCornerClip || needLayoutClip;
+        fillStrokeOrder ? (_runStroke(), needClip && (context.save(), context.clip()), this.beforeRenderStep(image, context, x, y, doFill, !1, fVisible, !1, imageAttribute, drawContext, fillCb), _runFill(), needClip && context.restore()) : (needClip && (context.save(), context.clip()), this.beforeRenderStep(image, context, x, y, doFill, !1, fVisible, !1, imageAttribute, drawContext, fillCb), _runFill(), needClip && context.restore(), _runStroke()), this.afterRenderStep(image, context, x, y, doFill, !1, fVisible, !1, imageAttribute, drawContext, fillCb);
       }
       draw(image, renderService, drawContext) {
         const {
@@ -23496,7 +23764,7 @@
         return data || this.currentRenderMap.get(type) || this.defaultRenderMap.get(type);
       }
       clearScreen(renderService, context, drawContext) {
-        var _a, _b, _c;
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
         const {
             clear: clear,
             viewBox: viewBox
@@ -23506,9 +23774,20 @@
         if (clear) {
           context.clearRect(0, 0, width, height), (null === (_a = renderService.drawParams) || void 0 === _a ? void 0 : _a.stage) && renderService.drawParams.stage.hooks.afterClearRect.call(renderService.drawParams);
           const stage = null === (_b = renderService.drawParams) || void 0 === _b ? void 0 : _b.stage;
-          if (stage && (context.globalAlpha = null !== (_c = stage.attribute.opacity) && void 0 !== _c ? _c : 1), stage && stage.backgroundImg && stage.resources) {
-            const res = stage.resources.get(clear);
-            res && "success" === res.state && res.data && context.drawImage(res.data, 0, 0, width, height);
+          if (stage && (context.globalAlpha = (null !== (_c = stage.attribute.opacity) && void 0 !== _c ? _c : 1) * (null !== (_d = stage.attribute.backgroundOpacity) && void 0 !== _d ? _d : 1)), stage && stage.backgroundImg && stage.resources) {
+            const res = stage.resources.get(getBackgroundImage(clear));
+            if (res && "success" === res.state && res.data) {
+              const backgroundBounds = boundsAllocate.allocate(0, 0, 0 + width, 0 + height);
+              drawBackgroundImage(context, res.data, backgroundBounds, {
+                backgroundMode: null !== (_e = stage.attribute.backgroundMode) && void 0 !== _e ? _e : DefaultAttribute.backgroundMode,
+                backgroundFit: null !== (_f = stage.attribute.backgroundFit) && void 0 !== _f ? _f : DefaultAttribute.backgroundFit,
+                backgroundKeepAspectRatio: null !== (_g = stage.attribute.backgroundKeepAspectRatio) && void 0 !== _g ? _g : DefaultAttribute.backgroundKeepAspectRatio,
+                backgroundScale: null !== (_h = stage.attribute.backgroundScale) && void 0 !== _h ? _h : DefaultAttribute.backgroundScale,
+                backgroundOffsetX: null !== (_j = stage.attribute.backgroundOffsetX) && void 0 !== _j ? _j : DefaultAttribute.backgroundOffsetX,
+                backgroundOffsetY: null !== (_k = stage.attribute.backgroundOffsetY) && void 0 !== _k ? _k : DefaultAttribute.backgroundOffsetY,
+                backgroundPosition: null !== (_l = stage.attribute.backgroundPosition) && void 0 !== _l ? _l : DefaultAttribute.backgroundPosition
+              }), boundsAllocate.free(backgroundBounds);
+            }
           } else context.fillStyle = createColor(context, clear, {
             AABBBounds: {
               x1: 0,
@@ -24006,7 +24285,7 @@
         return null !== (_a = this._background) && void 0 !== _a ? _a : DefaultConfig.BACKGROUND;
       }
       set background(b) {
-        this._background = b;
+        this._background = b, this.syncBackgroundImage(b);
       }
       get defaultLayer() {
         return this.at(0);
@@ -24020,6 +24299,18 @@
       set ticker(ticker) {
         ticker.bindStage(this), this._ticker && this._ticker.removeListener("tick", this.afterTickCb), ticker.addTimeline(this.timeline), this._ticker = ticker, this._ticker.on("tick", this.afterTickCb);
       }
+      syncBackgroundImage(background) {
+        var _a;
+        const source = null !== (_a = null == background ? void 0 : background.background) && void 0 !== _a ? _a : background;
+        this.backgroundImg = !1, this.isImageBackgroundSource(source) && this.loadImage(source, !0);
+      }
+      isImageBackgroundSource(source) {
+        if (!source) return !1;
+        if ("string" == typeof source) return source.startsWith("<svg") || isValidUrl$1(source) || source.includes("/") || isBase64$1(source);
+        if (!isObject$2(source)) return !1;
+        const gradientSource = source;
+        return "string" != typeof gradientSource.gradient || !Array.isArray(gradientSource.stops);
+      }
       constructor(params = {}) {
         var _a, _b;
         super({}), this.tickedBeforeRender = !0, this._onVisibleChange = visible => {
@@ -24058,9 +24349,7 @@
           main: !0
         })), this.nextFrameRenderLayerSet = new Set(), this.willNextFrameRender = !1, this.stage = this, this.renderStyle = params.renderStyle, params.autoRender && this.enableAutoRender(), params.autoRefresh && this.enableAutoRefresh(), !1 === params.disableDirtyBounds && this.enableDirtyBounds(), params.enableHtmlAttribute && this.enableHtmlAttribute(params.enableHtmlAttribute), params.ReactDOM && this.enableReactAttribute(params.ReactDOM), params.enableLayout && this.enableLayout(), this.hooks.beforeRender.tap("constructor", this.beforeRender), this.hooks.afterRender.tap("constructor", this.afterRender), params.beforeRender && this._beforeRenderList.push(params.beforeRender), params.afterRender && this._afterRenderList.push(params.afterRender), this.hooks.afterClearScreen.tap("constructor", this.afterClearScreen), this.hooks.afterClearRect.tap("constructor", this.afterClearRect), this._afterClearScreen = params.afterClearScreen, this._afterClearRect = params.afterClearRect, this.supportInteractiveLayer = !1 !== params.interactiveLayer, params.optimize || (params.optimize = {
           tickRenderMode: "effect"
-        }), this.optmize(params.optimize), params.background && isString$1(this._background) && this._background.includes("/") && this.setAttributes({
-          background: this._background
-        }), this.initAnimate(params), this.rafId = null !== (_b = params.rafId) && void 0 !== _b ? _b : Math.floor(6 * Math.random());
+        }), this.optmize(params.optimize), params.background && this.syncBackgroundImage(this._background), this.initAnimate(params), this.rafId = null !== (_b = params.rafId) && void 0 !== _b ? _b : Math.floor(6 * Math.random());
       }
       initAnimate(params) {
         var _a;
@@ -35218,6 +35507,7 @@
       if (custom.prototype.constructor === custom) {
         const descriptor = Object.getOwnPropertyDescriptor(custom, "prototype");
         if (descriptor && !descriptor.writable) return 1;
+        if (Object.getOwnPropertyNames(custom.prototype).length > 1) return 1;
       }
       return 2;
     }