fix: measureText未考虑旋转 (#340)

Author: tangying1027

packages/f-engine/src/canvas/index.ts

@@ -53,6 +53,7 @@ function measureText(container: Group, px2hd, theme: ThemeType) {
       textAlign = theme.textAlign,
       textBaseline = theme.textBaseline,
       lineWidth = 1,
+      transform = '',
     } = font || {};
 
     const style = {
@@ -67,6 +68,7 @@ function measureText(container: Group, px2hd, theme: ThemeType) {
       textAlign,
       textBaseline,
       lineWidth,
+      transform,
       visibility: 'hidden',
     };
 

packages/f-engine/test/canvas/theme.test.tsx

@@ -1,14 +1,18 @@
+import { transform } from '@antv/util';
 import { jsx, Canvas, Component } from '../../src';
 import { createContext, delay } from '../util';
 const context = createContext();
 
 class Text extends Component {
   width: number;
+  height: number;
 
   constructor(props, context) {
     super(props, context);
-    const { width } = this.context.measureText('0.123', {});
+    const { textStyle } = props;
+    const { width, height } = this.context.measureText('0.123', textStyle);
     this.width = width;
+    this.height = height;
   }
 }
 
@@ -51,3 +55,24 @@ describe('Theme', () => {
     });
   });
 });
+
+describe('measureText', () => {
+  it('旋转', async () => {
+    const textRef = { current: null };
+    const { props } = (
+      <Canvas context={context} pixelRatio={1}>
+        <Text
+          ref={textRef}
+          textStyle={{
+            transform: 'rotate(90deg)',
+          }}
+        />
+      </Canvas>
+    );
+
+    const canvas = new Canvas(props);
+    canvas.render();
+    await delay(0);
+    expect(textRef.current.height).toBeCloseTo(31.02);
+  });
+});