feat: add style func && fix lottie xy (#1693)

antvis · Jan 3, 2023 · 5e22591 · 5e22591
1 parent 7fae5e5
commit 5e22591
Show file tree

Hide file tree

Showing 3 changed files with 7 additions and 5 deletions.
diff --git a/packages/f2/src/components/guide/views/Image.tsx b/packages/f2/src/components/guide/views/Image.tsx
@@ -36,11 +36,12 @@ export default (props: ImageGuideProps, context) => {
   const posY = y + (offsetYNum || 0) - heightNum / 2;
 
   return (
-    <group style={style}>
+    <group>
       <image
-        attrs={{
+        style={{
           ...baseAttrs,
           ...attrs,
+          ...style,
           height: heightNum,
           width: widthNum,
           x: posX,

diff --git a/packages/f2/src/components/guide/views/Lottie.tsx b/packages/f2/src/components/guide/views/Lottie.tsx
@@ -31,8 +31,8 @@ export default (props: LottieGuideProps, context) => {
 
   const offsetXNum = context.px2hd(offsetX);
   const offsetYNum = context.px2hd(offsetY);
-  const posX = x + (offsetXNum || 0) - height / 2;
-  const posY = y + (offsetYNum || 0) - width / 2;
+  const posX = x + (offsetXNum || 0) - width / 2;
+  const posY = y + (offsetYNum || 0) - height / 2;
 
   return (
     <Lottie

diff --git a/packages/f2/src/components/guide/withGuide.tsx b/packages/f2/src/components/guide/withGuide.tsx
@@ -120,7 +120,7 @@ export default (View: ComponentType) => {
 
     render() {
       const { props, context, guideBBox } = this;
-      const { coord, records = [], animation, chart } = props;
+      const { coord, records = [], animation, chart, style } = props;
       const { width, height } = context;
       const points = this.convertPoints(records);
       const theme = this.getGuideTheme();
@@ -135,6 +135,7 @@ export default (View: ComponentType) => {
           canvasWidth={width}
           canvasHeight={height}
           guideBBox={guideBBox}
+          style={isFunction(style) ? style(points, chart) : style}
           animation={isFunction(animation) ? animation(points, chart) : animation}
         />
       );