How can I trace letters?

[suryapratap21]

I'm working on an app for young students that need constant repetition of tracing different letters. I was thinking of displaying the letter path in a canvas and have another path on top of that and update the color of the foreground when the user does panning. I'm having trouble controlling the pan to be in the letter.
This is the end goal: https://play.google.com/store/apps/details?id=com.rvappstudios.abc_kids_toddler_tracing_phonics&hl=en_US

I was thinking there must be a better way to implement this using skia

[louix]

If you have your letter as a skia path, you could potentially either:

1. mask the letter path with the drawn path.
2. clip the drawn path with the letter path.

Quick cobbled together example of number 1:

import { Canvas, Fill, Mask, Morphology, Path, Skia } from "@shopify/react-native-skia";
import { Gesture, GestureDetector, GestureHandlerRootView } from "react-native-gesture-handler";
import { useSharedValue } from "react-native-reanimated";

export const App = () => {
  const letterPath = Skia.Path.MakeFromSVGString(
    // simple "A" as an SVG string
    "m15.1 716.4 129-605.04 71.8 0 129 605.04-62.6 0-38.3-197.52-128 0-38.3 197.52-62.6 0zm217.3-257.88-52.4-285.96-52.7 285.96 105.1 0z",
  )!;
  const drawPath = useSharedValue(Skia.Path.Make());

  const gesture = Gesture.Pan()
    .onBegin((event) => {
      drawPath.value.moveTo(event.x, event.y);
      drawPath.modify();
    })
    .onChange((event) => {
      drawPath.value.lineTo(event.x, event.y);
      drawPath.modify();
    });

  return (
    <GestureHandlerRootView style={{ flex: 1 }}>
      <GestureDetector gesture={gesture}>
        <Canvas style={{ flex: 1 }}>
          <Fill color="#49EDFF" />
          {/* Letter black border */}
          <Path path={letterPath} color="black" strokeWidth={10}>
            <Morphology radius={6} />
          </Path>

          {/* Letter white background */}
          <Path path={letterPath} color="white" strokeWidth={10}>
            <Morphology radius={3} />
          </Path>

          {/* Masked letter background by the user drawn path */}
          <Mask mask={<Path path={drawPath} color="black" strokeWidth={100} style="stroke" />}>
            <Path path={letterPath} color="#FA00FF" strokeWidth={10} />
          </Mask>
        </Canvas>
      </GestureDetector>
    </GestureHandlerRootView>
  );
};

export default App;

This approach has another bonus over the other one: you don't have to use a <Path /> for the letter, you could just as easily use <Text /> or something else.

If you want to actually snap to the drawing line (like the app video) instead of having this "color in" approach, you could define a path for each stroke, and animate it based on the gesture with usePathInterpolation.

[AdityaSinghXenelsoft]

Thanks @louix , Your code is running fine . But, want to create traceable alphabet of A to Z ...Can you guide me how to do this by instead of

[LionCreativeDev]

Can you please share working code?
I am getting this error message "Cannot read properties of undefined (reading 'Path')"

[fobos531]

hello @louix , in your 1. implementation, how would you detect when the path was entirely filled?

[Jimsss55]

Hello @LionCreativeDev @suryapratap21 @louix I am a final year student, working on a final year project, an App to trace the letter but it is for our national language. I have no idea how the react native skia works and I am stuck in how to make the letters traceable. Will you please share your insights and guidance to me. Your help and guidance would be highly appreciated.

[vpatnana]

I actually have a similar problem to solve, but to actually snap to drawing line rather than the "color in" approach. @louix @suryapratap21 are you aware of any examples using usePathInterpolation to animate the path for each stroke? I am new to Skia library, any help here would be appreciated!