how to draw text vertical

[hungtooc]

Hi, how to draw text using SkCanvas.drawText(). like this:

Thanks.

[wcandillon]

Does this example help? https://shopify.github.io/react-native-skia/docs/text/glyphs

[hungtooc]

I'm not sure how to use it in my case, the text direction in the image i uploaded above is my case

[wcandillon]

the idea here is that you can build your own logic to do the text layout.

[hungtooc]

I could use canvas.drawGlyphs to do the same:

canvas.drawGlyphs(
          font.getGlyphIDs(strImageHeight),
          strImageHeight.split('').map((item, id) => {
            return {x: 0, y: id * font.getSize()};
          }),
          (VIEW_WIDTH - previewImageSize.width - PADDING_IMAGE * VIEW_WIDTH) /
            2 -
            2,
          VIEW_HEIGHT / 2,
          font,
          Skia.Paint(),
        );

But I dont know how to rotate the direction of each character horizontaly.

[hungtooc]

Or can we use TextPath to do this? my global is to draw the text at center of each two line around my image. thanks

[swami-laxman]

Can't your draw horizontally and rotate later.
I know its obvious solution but I am interested to know why you haven't applied this approach.

[hungtooc]

Can you share the solution?

[swami-laxman]

import {
  Canvas,
  useValue,
  Text,
  useComputedValue,
  useFont,
  Transforms2d,
} from '@shopify/react-native-skia';
import {fonts} from '../../constants/TextStyles';

export default function FF() {
  let str = 'Hello Universe';
  let fontSize = 24;
  let font = useFont(fonts.syne, fontSize);
  let textWid = useValue(0);

  let rotation = useComputedValue<Transforms2d>(() => {
    let angle = 0;
    if (textWid.current) {
      angle = -Math.PI / 2;
    }
    return [{translateY: textWid.current}, {rotate: angle}, {translateX: 0}];
  }, [textWid]);

  if (!font) {
    return null;
  }

  if (!textWid.current) {
    textWid.current = font.getTextWidth(str);
  }

  return (
    <Canvas style={{flex: 1, backgroundColor: 'green'}}>
      <Text
        origin={{x: 0, y: 0}}
        transform={rotation}
        x={0}
        y={fontSize}
        text={str}
        font={font}
      />
    </Canvas>
  );
}

[swami-laxman]

you can rotate using Imperative API also, below code works fine, but need to adjust transformations

<Canvas style={{flex: 1, backgroundColor: 'green'}}>
    <Drawing
      drawing={({canvas, paint}) => {
        paint.setColor(Skia.Color('white'));
        canvas.rotate(30, 0, 0);
        canvas.drawText(str, 0, fontSize, paint, font!);
      }}
    />
</Canvas>

btw its my first Imperative code

[hungtooc]

yes, Your approach would work, and we could do anything with text. But i'm wondering is there a straighter approach to solve this with fewer code...
If I use transform to rotate the text, the text location will harder to handle then we get more code to do it.
I know impressive API mode can do things more complicated. But if there is no function to solve this easier, I have to use transform.
Thank you @laxman-stan @wcandillon