feat: support backgroundScale, offsetXY

VisActor · Jan 2, 2025 · a281be2 · a281be2
1 parent cedc409
commit a281be2
Show file tree

Hide file tree

Showing 6 changed files with 60 additions and 12 deletions.
diff --git a/common/changes/@visactor/vrender-core/develop_2024-12-31-12-14.json b/common/changes/@visactor/vrender-core/develop_2024-12-31-12-14.json
@@ -0,0 +1,10 @@
+{
+  "changes": [
+    {
+      "packageName": "@visactor/vrender-core",
+      "comment": "feat: support backgroundScale, offsetXY",
+      "type": "none"
+    }
+  ],
+  "packageName": "@visactor/vrender-core"
+}
diff --git a/packages/vrender-core/src/graphic/config.ts b/packages/vrender-core/src/graphic/config.ts
@@ -140,6 +140,9 @@ export const DefaultStyle: IGraphicStyle = {
   texturePadding: 2,
   backgroundMode: 'no-repeat',
   backgroundFit: true,
+  backgroundScale: 1,
+  backgroundOffsetX: 0,
+  backgroundOffsetY: 0,
   blur: 0,
   cursor: null,
   html: null,

diff --git a/packages/vrender-core/src/interface/graphic.ts b/packages/vrender-core/src/interface/graphic.ts
@@ -219,6 +219,11 @@ export type IGraphicStyle = ILayout &
     shadowGraphic?: IGraphic | undefined;
     backgroundMode: 'repeat' | 'repeat-x' | 'repeat-y' | 'no-repeat'; // 填充模式（与具体图元有关）
     backgroundFit: boolean; // 是否正好填充，只在repeat-x或者repeat-y以及no-repeat的时候生效
+    // 背景图缩放，只在no-repeat的时候生效
+    backgroundScale: number;
+    // 背景图偏移，只在no-repeat的时候生效
+    backgroundOffsetX: number;
+    backgroundOffsetY: number;
     backgroundCornerRadius: number | number[];
     backgroundOpacity: number;
     // 纹理是否自动做动画

diff --git a/...es/vrender-core/src/render/contributions/render/contributions/base-contribution-render.ts b/...es/vrender-core/src/render/contributions/render/contributions/base-contribution-render.ts
@@ -42,7 +42,10 @@ export class DefaultBaseBackgroundRenderContribution implements IBaseRenderContr
       backgroundOpacity = graphic.attribute.fillOpacity ?? graphicAttribute.backgroundOpacity,
       opacity = graphicAttribute.opacity,
       backgroundMode = graphicAttribute.backgroundMode,
-      backgroundFit = graphicAttribute.backgroundFit
+      backgroundFit = graphicAttribute.backgroundFit,
+      backgroundScale = graphicAttribute.backgroundScale,
+      backgroundOffsetX = graphicAttribute.backgroundOffsetX,
+      backgroundOffsetY = graphicAttribute.backgroundOffsetY
     } = graphic.attribute;
     if (!background) {
       return;
@@ -66,7 +69,13 @@ export class DefaultBaseBackgroundRenderContribution implements IBaseRenderContr
       const b = graphic.AABBBounds;
       context.setCommonStyle(graphic, graphic.attribute, x, y, graphicAttribute);
       context.globalAlpha = backgroundOpacity * opacity;
-      this.doDrawImage(context, res.data, b, backgroundMode, backgroundFit);
+      this.doDrawImage(context, res.data, b, {
+        backgroundMode,
+        backgroundFit,
+        backgroundScale,
+        backgroundOffsetX,
+        backgroundOffsetY
+      });
       context.restore();
       if (!graphic.transMatrix.onlyTranslate()) {
         context.setTransformForCurrent();
@@ -85,16 +94,28 @@ export class DefaultBaseBackgroundRenderContribution implements IBaseRenderContr
     context: IContext2d,
     data: any,
     b: IBounds,
-    backgroundMode: 'repeat' | 'repeat-x' | 'repeat-y' | 'no-repeat',
-    backgroundFit: boolean
+    params: {
+      backgroundMode: 'repeat' | 'repeat-x' | 'repeat-y' | 'no-repeat';
+      backgroundFit: boolean;
+      backgroundScale?: number;
+      backgroundOffsetX?: number;
+      backgroundOffsetY?: number;
+    }
   ): void {
+    const { backgroundMode, backgroundFit, backgroundScale = 1, backgroundOffsetX = 0, backgroundOffsetY = 0 } = params;
+    const targetW = b.width();
+    const targetH = b.height();
+    let w = targetW;
+    let h = targetH;
     if (backgroundMode === 'no-repeat') {
-      context.drawImage(data, b.x1, b.y1, b.width(), b.height());
+      if (backgroundFit) {
+        context.drawImage(data, b.x1, b.y1, b.width(), b.height());
+      } else {
+        const resW = data.width * backgroundScale;
+        const resH = data.height * backgroundScale;
+        context.drawImage(data, b.x1 + backgroundOffsetX, b.y1 + backgroundOffsetY, resW, resH);
+      }
     } else {
-      const targetW = b.width();
-      const targetH = b.height();
-      let w = targetW;
-      let h = targetH;
       // debugger;
       // TODO 考虑缓存
       if (backgroundFit && backgroundMode !== 'repeat' && (data.width || data.height)) {

diff --git a/...s/vrender-core/src/render/contributions/render/contributions/group-contribution-render.ts b/...s/vrender-core/src/render/contributions/render/contributions/group-contribution-render.ts
@@ -32,7 +32,10 @@ export class DefaultGroupBackgroundRenderContribution
     const {
       background,
       backgroundMode = graphicAttribute.backgroundMode,
-      backgroundFit = graphicAttribute.backgroundFit
+      backgroundFit = graphicAttribute.backgroundFit,
+      backgroundScale = graphicAttribute.backgroundScale,
+      backgroundOffsetX = graphicAttribute.backgroundOffsetX,
+      backgroundOffsetY = graphicAttribute.backgroundOffsetY
     } = graphic.attribute;
     if (!background) {
       return;
@@ -48,7 +51,13 @@ export class DefaultGroupBackgroundRenderContribution
 
       context.setTransformFromMatrix(graphic.parent.globalTransMatrix, true);
       const b = graphic.AABBBounds;
-      this.doDrawImage(context, res.data, b, backgroundMode, backgroundFit);
+      this.doDrawImage(context, res.data, b, {
+        backgroundMode,
+        backgroundFit,
+        backgroundScale,
+        backgroundOffsetX,
+        backgroundOffsetY
+      });
       context.highPerformanceRestore();
       context.setTransformForCurrent();
     } else {

diff --git a/...es/vrender-core/src/render/contributions/render/contributions/text-contribution-render.ts b/...es/vrender-core/src/render/contributions/render/contributions/text-contribution-render.ts
@@ -103,7 +103,7 @@ export class DefaultTextBackgroundRenderContribution
       }
 
       context.setCommonStyle(graphic, graphic.attribute, x, y, graphicAttribute);
-      this.doDrawImage(context, res.data, b, backgroundMode, backgroundFit);
+      this.doDrawImage(context, res.data, b, { backgroundMode, backgroundFit });
       context.highPerformanceRestore();
       context.setTransformForCurrent();
     } else {