feat: support backgroundClip

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

Hide file tree

Showing 6 changed files with 26 additions and 2 deletions.
diff --git a/common/changes/@visactor/vrender-core/feat-vstory_2024-12-31-13-54.json b/common/changes/@visactor/vrender-core/feat-vstory_2024-12-31-13-54.json
@@ -0,0 +1,10 @@
+{
+  "changes": [
+    {
+      "packageName": "@visactor/vrender-core",
+      "comment": "feat: support backgroundClip",
+      "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,10 +140,12 @@ export const DefaultStyle: IGraphicStyle = {
   texturePadding: 2,
   backgroundMode: 'no-repeat',
   backgroundFit: true,
+  backgroundClip: true,
   backgroundScale: 1,
   backgroundOffsetX: 0,
   backgroundOffsetY: 0,
   blur: 0,
+  filter: '',
   cursor: null,
   html: null,
   react: null,

diff --git a/packages/vrender-core/src/interface/context.ts b/packages/vrender-core/src/interface/context.ts
@@ -22,6 +22,7 @@ export interface ICommonStyleParams {
   globalCompositeOperation?: CanvasRenderingContext2D['globalCompositeOperation'] | '';
   opacity?: number;
   blur?: number;
+  filter?: string;
 }
 
 export interface IStrokeStyleParams {

diff --git a/packages/vrender-core/src/interface/graphic.ts b/packages/vrender-core/src/interface/graphic.ts
@@ -224,6 +224,7 @@ export type IGraphicStyle = ILayout &
     // 背景图偏移，只在no-repeat的时候生效
     backgroundOffsetX: number;
     backgroundOffsetY: number;
+    backgroundClip: boolean;
     backgroundCornerRadius: number | number[];
     backgroundOpacity: number;
     // 纹理是否自动做动画
@@ -248,6 +249,7 @@ export type IGraphicStyle = ILayout &
     textureSize: number; // 纹理大小
     texturePadding: number; // 纹理间隙
     blur: number;
+    filter: string;
     cursor: Cursor | null; // 鼠标样式
     renderStyle?: 'default' | 'rough' | any;
     // HTML的dom或者string

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
@@ -45,7 +45,8 @@ export class DefaultBaseBackgroundRenderContribution implements IBaseRenderContr
       backgroundFit = graphicAttribute.backgroundFit,
       backgroundScale = graphicAttribute.backgroundScale,
       backgroundOffsetX = graphicAttribute.backgroundOffsetX,
-      backgroundOffsetY = graphicAttribute.backgroundOffsetY
+      backgroundOffsetY = graphicAttribute.backgroundOffsetY,
+      backgroundClip = graphicAttribute.backgroundClip
     } = graphic.attribute;
     if (!background) {
       return;
@@ -65,7 +66,7 @@ export class DefaultBaseBackgroundRenderContribution implements IBaseRenderContr
         context.setTransformFromMatrix(graphic.parent.globalTransMatrix, true);
         context.translate(scrollX, scrollY);
       }
-      context.clip();
+      backgroundClip && context.clip();
       const b = graphic.AABBBounds;
       context.setCommonStyle(graphic, graphic.attribute, x, y, graphicAttribute);
       context.globalAlpha = backgroundOpacity * opacity;

diff --git a/packages/vrender-kits/src/canvas/contributions/browser/context.ts b/packages/vrender-kits/src/canvas/contributions/browser/context.ts
@@ -1052,6 +1052,7 @@ export class BrowserContext2d implements IContext2d {
       shadowOffsetX = defaultParams.shadowOffsetX,
       shadowOffsetY = defaultParams.shadowOffsetY,
       blur = defaultParams.blur,
+      filter = defaultParams.filter,
       globalCompositeOperation = defaultParams.globalCompositeOperation
     } = attribute;
     if (opacity <= 1e-12) {
@@ -1078,6 +1079,13 @@ export class BrowserContext2d implements IContext2d {
       _context.filter = 'blur(0px)';
       this._clearFilterStyle = false;
     }
+    if (filter) {
+      _context.filter = filter;
+      this._clearFilterStyle = true;
+    } else if (this._clearFilterStyle) {
+      _context.filter = '';
+      this._clearFilterStyle = false;
+    }
 
     if (globalCompositeOperation) {
       _context.globalCompositeOperation = globalCompositeOperation;