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

package/build/index.es.js

@@ -11430,7 +11430,9 @@ const DefaultStyle = Object.assign(Object.assign(Object.assign(Object.assign({
   background: null,
   autoAnimateTexture: !1,
   textureRatio: 1,
-  textureOptions: null,
+  textureOptions: {
+    alignToGraphic: !0
+  },
   backgroundOpacity: 1,
   backgroundCornerRadius: 0,
   texture: null,
@@ -11444,6 +11446,7 @@ const DefaultStyle = Object.assign(Object.assign(Object.assign(Object.assign({
   backgroundScale: 1,
   backgroundOffsetX: 0,
   backgroundOffsetY: 0,
+  backgroundPosition: "top-left",
   blur: 0,
   filter: "",
   cursor: null,
@@ -11616,11 +11619,16 @@ const DefaultRichTextAttribute = Object.assign(Object.assign(Object.assign({}, D
 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,
@@ -16672,7 +16680,8 @@ class Graphic extends Node {
     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 = {
@@ -16727,7 +16736,7 @@ class Graphic extends Node {
   }
 }
 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));
@@ -18863,7 +18872,7 @@ function seperateParagraph(paragraph, index) {
   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);
@@ -18968,6 +18977,7 @@ class Image extends Graphic {
 }
 Image.NOWORK_ANIMATE_ATTR = Object.assign({
   image: 1,
+  imageMode: 1,
   repeatX: 1,
   repeatY: 1
 }, NOWORK_ANIMATE_ATTR);
@@ -20161,11 +20171,12 @@ class DefaultBaseBackgroundRenderContribution {
       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,
           {
@@ -20182,59 +20193,160 @@ class DefaultBaseBackgroundRenderContribution {
         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;
@@ -20393,13 +20505,14 @@ class DefaultBaseTextureRenderContribution {
     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":
@@ -20426,7 +20539,7 @@ class DefaultBaseTextureRenderContribution {
         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 {
@@ -20473,10 +20586,24 @@ class DefaultBaseTextureRenderContribution {
       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 || {}), {
@@ -20484,14 +20611,42 @@ class DefaultBaseTextureRenderContribution {
       }), 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;
   }
@@ -20606,27 +20761,32 @@ class DefaultGroupBackgroundRenderContribution extends DefaultBaseBackgroundRend
   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();
@@ -22108,9 +22268,17 @@ class DefaultTextBackgroundRenderContribution extends DefaultBaseBackgroundRende
   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,
       {
@@ -22122,18 +22290,18 @@ class DefaultTextBackgroundRenderContribution extends DefaultBaseBackgroundRende
     };
     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,
@@ -22146,20 +22314,18 @@ class DefaultTextBackgroundRenderContribution extends DefaultBaseBackgroundRende
     })).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();
@@ -22586,6 +22752,92 @@ var __decorate$1h = undefined && undefined.__decorate || function (decorators, t
     };
   };
 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);
@@ -22600,6 +22852,11 @@ let DefaultCanvasImageRender = class extends BaseRender {
         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);
@@ -22616,22 +22873,33 @@ let DefaultCanvasImageRender = class extends BaseRender {
     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 {
@@ -23490,7 +23758,7 @@ let DefaultDrawContribution = class {
     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
@@ -23500,9 +23768,20 @@ let DefaultDrawContribution = class {
     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,
@@ -24000,7 +24279,7 @@ class Stage extends Group$1 {
     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);
@@ -24014,6 +24293,18 @@ class Stage extends Group$1 {
   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 => {
@@ -24052,9 +24343,7 @@ class Stage extends Group$1 {
       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;
@@ -35212,6 +35501,7 @@ function getCustomType(custom) {
   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;
 }