Erase Path On Drawing App

[fukuli053]

Hi,

I'm developing a drawing app with React Native Skia, I need to erase previously drawn path with an eraser.

I added a new way to do this and made its color transparent, but when I did that, I couldn't draw a new path anymore and the paths I added were not visible.

Ekran.Kaydi.2023-02-15.13.13.47.mov

And here is my code:

import {
  DrawingElement,
  EmojiElement,
  ImageElement,
  Modes,
  TextElement,
} from '../../types';

import {
  Canvas,
  DashPathEffect,
  Fill,
  Group,
  Paint,
  Path,
  Skia,
  Image,
  useImage,
  Circle,
  vec,
  Mask,
  useTouchHandler,
} from '@shopify/react-native-skia';
import {useMemo} from 'react';
import {StyleProp, ViewStyle} from 'react-native';
import useDrawingStore from '../../store/DrawingStore';
import {useSafeAreaFrame} from 'react-native-safe-area-context';
import {createPath} from './utils/path';

interface DrawPadProps {
  style: StyleProp<ViewStyle>;
}

const DrawPad = ({style}: DrawPadProps) => {
  const elements = useDrawingStore(state => state.elements);
  const {width} = useSafeAreaFrame();

  const imgUri = useDrawingStore(state => state.bgImgUri);
  const backgroundColor = useDrawingStore(state => state.backgroundColor);

  const onTouch = useTouchHandler({
    onStart: ({x, y}) => {
      const mode = useDrawingStore.getState().mode;
      if (mode !== Modes.Pen && mode !== Modes.Erase) {
        return;
      }

      const {color, penSize, pathType} = useDrawingStore.getState();
      const skiaColor = Skia.Color(
        mode === Modes.Erase ? 'transparent' : color,
      );

      useDrawingStore
        .getState()
        .addElement(
          createPath(
            x,
            y,
            skiaColor,
            mode === Modes.Erase ? 20 : penSize,
            mode === Modes.Erase ? 'erase' : pathType,
          ),
        );
    },
    onActive: ({x, y}) => {
      const mode = useDrawingStore.getState().mode;
      if (mode !== Modes.Pen && mode !== Modes.Erase) {
        return;
      }

      const elementsTemp = useDrawingStore.getState().elements;
      const element = elementsTemp[elementsTemp.length - 1] as DrawingElement;
      if (!element) {
        return;
      }

      const lastPoint = element.path.getLastPt();
      const xMid = (lastPoint.x + x) / 2;
      const yMid = (lastPoint.y + y) / 2;

      element.path.quadTo(lastPoint.x, lastPoint.y, xMid, yMid);
    },
    onEnd: ({x, y}) => {
      const mode = useDrawingStore.getState().mode;
      if (mode === Modes.Fill) {
        useDrawingStore.getState().actions.setBackgroundColor();
      }
    },
  });

  const elementComponents = useMemo(
    () =>
      elements.map(
        (
          element: DrawingElement | ImageElement | EmojiElement | TextElement,
          index: number,
        ) => {
          if (element.type === 'path') {
            let el = element as DrawingElement;
            if (el.pathType === 'dashed') {
              return (
                <Group key={index}>
                  <Paint style="stroke" strokeWidth={4}>
                    <DashPathEffect intervals={[el.size * 2, el.size * 2]} />
                  </Paint>
                  <Path
                    path={el.path}
                    color={el.color}
                    style="stroke"
                    strokeWidth={el.size}
                    strokeCap="round"
                  />
                </Group>
              );
            } else {
              return (
                <Path
                  key={index}
                  path={el.path}
                  color={el.color}
                  style="stroke"
                  strokeWidth={el.size}
                  strokeCap="round"></Path>
              );
            }
          }
        },
      ),
    [elements],
  );

  const image = useImage(imgUri);

  return (
    <Canvas style={[style]} onTouch={onTouch}>
      <Mask
        mask={
          <Group>
            <Circle c={vec(width / 2)} r={width / 2} opacity={0} />
            <Circle c={vec(width / 2)} r={width / 2} />
          </Group>
        }>
        {image !== null ? (
          <Image
            x={0}
            y={0}
            width={width}
            height={width}
            image={image}
            fit="cover"
          />
        ) : (
          <Fill color={Skia.Color(backgroundColor)} />
        )}
        {elementComponents}
      </Mask>
    </Canvas>
  );
};

export default DrawPad;

[wcandillon]

Really cool demo, what is your semantic for erasing? Maybe you need to change that semantic so you're able to draw on top of it again.

[fukuli053]

@Erinchampwalker Hi Erin, no We didn't use Apple Pencil Kit because it's on Android but we use Apple Pencil kit on IOS side. We clone Apple Pencil UI for Android side and used only React Native Skia.

[Erinchampwalker]

Hi - that's great - does Apple Pencil kit work seamlessly (the same) on both iOS and Android and the same in performance compared to the native one?

[fukuli053]

In IOS side, yes it's working really good and like I said It's native pencil kit in Swift. But Android side we did it with use React Native Skia and we didn't try with Apple Pencil Kit.

[Erinchampwalker]

Thank you - we made everything from scratch. Still don't know if it was the right move. Time will tell 😅

[Erinchampwalker]

Just to confirm is the Apple Pencil kit working in your Android app with little to no lag?

[hungtooc]

maybe you should try BlendMode for each path type, set BlendMode.Clear for the eraser path