feat: backgroundKeepAspectRatio

VisActor · Jan 9, 2025 · b2e5691 · b2e5691
1 parent 7dbc3c3
commit b2e5691
Show file tree

Hide file tree

Showing 5 changed files with 34 additions and 5 deletions.
diff --git a/packages/vrender-core/src/graphic/config.ts b/packages/vrender-core/src/graphic/config.ts
@@ -140,6 +140,7 @@ export const DefaultStyle: IGraphicStyle = {
   texturePadding: 2,
   backgroundMode: 'no-repeat',
   backgroundFit: true,
+  backgroundKeepAspectRatio: false,
   backgroundClip: true,
   backgroundScale: 1,
   backgroundOffsetX: 0,

diff --git a/packages/vrender-core/src/interface/graphic.ts b/packages/vrender-core/src/interface/graphic.ts
@@ -219,11 +219,13 @@ export type IGraphicStyle = ILayout &
     shadowGraphic?: IGraphic | undefined;
     backgroundMode: 'repeat' | 'repeat-x' | 'repeat-y' | 'no-repeat'; // 填充模式（与具体图元有关）
     backgroundFit: boolean; // 是否正好填充，只在repeat-x或者repeat-y以及no-repeat的时候生效
+    backgroundKeepAspectRatio: boolean; // 是否保持背景图的宽高比
     // 背景图缩放，只在no-repeat的时候生效
     backgroundScale: number;
     // 背景图偏移，只在no-repeat的时候生效
     backgroundOffsetX: number;
     backgroundOffsetY: number;
+    // 是否调用clip避免绘制到图元外部
     backgroundClip: boolean;
     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
@@ -43,6 +43,7 @@ export class DefaultBaseBackgroundRenderContribution implements IBaseRenderContr
       opacity = graphicAttribute.opacity,
       backgroundMode = graphicAttribute.backgroundMode,
       backgroundFit = graphicAttribute.backgroundFit,
+      backgroundKeepAspectRatio = graphicAttribute.backgroundKeepAspectRatio,
       backgroundScale = graphicAttribute.backgroundScale,
       backgroundOffsetX = graphicAttribute.backgroundOffsetX,
       backgroundOffsetY = graphicAttribute.backgroundOffsetY,
@@ -73,6 +74,7 @@ export class DefaultBaseBackgroundRenderContribution implements IBaseRenderContr
       this.doDrawImage(context, res.data, b, {
         backgroundMode,
         backgroundFit,
+        backgroundKeepAspectRatio,
         backgroundScale,
         backgroundOffsetX,
         backgroundOffsetY
@@ -98,19 +100,38 @@ export class DefaultBaseBackgroundRenderContribution implements IBaseRenderContr
     params: {
       backgroundMode: 'repeat' | 'repeat-x' | 'repeat-y' | 'no-repeat';
       backgroundFit: boolean;
+      backgroundKeepAspectRatio: boolean;
       backgroundScale?: number;
       backgroundOffsetX?: number;
       backgroundOffsetY?: number;
     }
   ): void {
-    const { backgroundMode, backgroundFit, backgroundScale = 1, backgroundOffsetX = 0, backgroundOffsetY = 0 } = params;
+    const {
+      backgroundMode,
+      backgroundFit,
+      backgroundKeepAspectRatio,
+      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') {
       if (backgroundFit) {
-        context.drawImage(data, b.x1, b.y1, b.width(), b.height());
+        if (!backgroundKeepAspectRatio) {
+          context.drawImage(data, b.x1, b.y1, b.width(), b.height());
+        } else {
+          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 {
         const resW = data.width * backgroundScale;
         const resH = data.height * backgroundScale;

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
@@ -33,6 +33,7 @@ export class DefaultGroupBackgroundRenderContribution
       background,
       backgroundMode = graphicAttribute.backgroundMode,
       backgroundFit = graphicAttribute.backgroundFit,
+      backgroundKeepAspectRatio = graphicAttribute.backgroundKeepAspectRatio,
       backgroundScale = graphicAttribute.backgroundScale,
       backgroundOffsetX = graphicAttribute.backgroundOffsetX,
       backgroundOffsetY = graphicAttribute.backgroundOffsetY
@@ -54,6 +55,7 @@ export class DefaultGroupBackgroundRenderContribution
       this.doDrawImage(context, res.data, b, {
         backgroundMode,
         backgroundFit,
+        backgroundKeepAspectRatio,
         backgroundScale,
         backgroundOffsetX,
         backgroundOffsetY

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
@@ -34,8 +34,11 @@ export class DefaultTextBackgroundRenderContribution
     fillCb?: (ctx: IContext2d, markAttribute: Partial<IGraphicAttribute>, themeAttribute: IThemeAttribute) => boolean,
     strokeCb?: (ctx: IContext2d, markAttribute: Partial<IGraphicAttribute>, themeAttribute: IThemeAttribute) => boolean
   ) {
-    const { backgroundMode = graphicAttribute.backgroundMode, backgroundFit = graphicAttribute.backgroundFit } =
-      graphic.attribute;
+    const {
+      backgroundMode = graphicAttribute.backgroundMode,
+      backgroundFit = graphicAttribute.backgroundFit,
+      backgroundKeepAspectRatio = graphicAttribute.backgroundKeepAspectRatio
+    } = graphic.attribute;
     let { background } = graphic.attribute;
     if (!background) {
       return;
@@ -103,7 +106,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, backgroundKeepAspectRatio });
       context.highPerformanceRestore();
       context.setTransformForCurrent();
     } else {