Hand drawing and usePathValue

[nicolascapin1991]

Hello everyone!
Is there a way to draw on the Canvas using usePathValue + GestureDetector + useSharedValue?
I studied this example and did some experiments but I can't get the desired effect.
I'm trying to implement a signature pad.

Thanks in advice!

[wcandillon]

usePathValue is probably not useful for your use-case.
In your case you want to always add to the path. usePathValue is useful when you need to update the same path on every frame.

[nicolascapin1991]

Thanks William for your reply!

You sugges me to use the SkPath.lineTo method to update the current path in my canvas, do you?

What I would like to do is optimize my component in such a way as to avoid continuous rerenders.

I took inspiration from here to look for a solution that uses gestures but I found problems using the SkiaView imperative component: for some reason, that I can't investigate, useDrawCallback crashes my app.

Do you have any more suggestions for me to optimize this component?

const canvasRef = useCanvasRef();
  const currentPath = useRef<SkPath>();
  const [paths, setPaths] = useState<Array<SkPath>>([]);

  const handleTouch = useTouchHandler({
    onStart: ({ x, y }) => {
      const newPath = Skia.Path.Make();
      newPath.moveTo(x, y);
      setPaths((prevPaths) => prevPaths.concat(newPath));
    },
    onActive: ({ x, y }) => {
      setPaths((prevPaths) => {
        const paths = [...prevPaths];
        const currentPath = paths.pop()!;
        currentPath.lineTo(x, y);
        return paths.concat(currentPath);
      });
    },
  });

...

return (
    <>
      ...
      <Canvas ref={canvasRef} onTouch={handleTouch} style={styles.canvas}>
              {Children.toArray(
                paths.map((path) => (
                  <Path path={path} strokeWidth={3} style="stroke" />
                ))
              )}
      </Canvas>
     ...
    </>
  );

[blackazaru]

Hi, you can manipulate the current path, which helps you avoid a component re-render problem.

const ExampleView: React.FC<Props> = ({style}) => {
  const styles = useStyle();
  const [path, setPath] = React.useState(Skia.Path.Make());

  const touchHandler = useTouchHandler({
    onStart: (touchInfo: TouchInfo) => {
      const {x, y} = touchInfo;
      path.moveTo(x, y);
    },
    onActive: (touchInfo: ExtendedTouchInfo) => {
      const {x, y} = touchInfo;
      path.lineTo(x, y);
    },
    onEnd: () => {},
  });

  return (
    <View style={{...styles.container, ...style}}>
      <Canvas style={styles.canvas} onTouch={touchHandler}>
        <Path
          path={path}
          strokeWidth={1}
          style={'stroke'}
          color={'black'}
        />
      </Canvas>
    </View>
  );
};```

[chris24elias]

How would you handle the case when you want to change stroke width or color? with only one Path component, the entire path would change.

[AkhilRamani]

Another thing I am stuck at is to implement eraser. Any thoughts?

[Glazzes]

How would you handle the case when you want to change stroke width or color? with only one Path component, the entire path would change.

With the lastest version of Reanimated you can force a re render for shared values holding a skia path by using SharedValue's modify methond.