Property 'addPath' does not exist on type 'SkPath'

[made-from-organic-orange-juice]

Hello Developers,

I'm writing an app where I'm rendering lines on the screen to visualize a medical scenario. Before react-native-skia, we used the android graphic library that looks like Skia. In that library, you can add segments to another Path object by doing mainPath.addPath(subPath); So I googled Skia's documentation, and it seems it has an addPath() method for the SkPath object, but it seems that it's not available in react-native-skia.

Are there any plans to export the missing properties from the SkPath class? :)

[wcandillon]

This is definitely a method we could expose.
Could you send us some use-cases/examples?

In the meantime you can use the union path operator via path.op() to append path?
You can also implement the feature yourself that using toCmds() to the path you want to append and add each command to the origin path. You can see the reference implementation at https://github.com/google/skia/blob/1f193df9b393d50da39570dab77a0bb5d28ec8ef/src/core/SkPath.cpp#L1395

[made-from-organic-orange-juice]

Sure!
I will explain our use case, and I hope this is enough.

Use Case: Tracing in real-time:
To trace a path using an already-made dataset (xs and ys) and show it to the screen, you must create lines between them. The procedure would be (If you wanted to show the entire dataset): “move to the first point and create a line between every point and render” Now, if, on the other hand, I wanted to draw the dataset in real time over some time I will have to draw a new partial segment every frame that will be added to all the previous parts. To do this efficiently without the phone or tablet exploding, you will have to add the partial segment to the current path being drawn; otherwise, you will have to generate the entire path for every frame and every partial segment added.
That’s where the addPath() comes in handy since it will stitch the partial segment to the path object, and therefore you don't have to generate an entirely new path every frame.

Example of an update and render method:

update(): void {
    this._lastTime = this._currentTime;
    this._currentTime += time.frame_per_ms_target / 1000;
    // update the partial path  
    this._partial = this.getPartial(
      this._lastTime,
      this._currentTime
    );
   //  stitch the partial segment to the path object
    this._path.addPath(this._partial);
  }

  drawFrame(): void {
    this._canvas.clear(Skia.Color('#f357'));

     // render it here
    this._canvas.drawPath(
      this._path,
      this.paint,
    );
  }

I guess, for now, I will try to create my version of addPath() through the methods you mention; but it would be great if it would be exposed :)

[wcandillon]

For a similar use-case I've been using path.op(path. PathOps.Union); successfully, I'd be curious to know if that works for you.

  const onTouch = useTouchHandler({
    onActive: (e) => {
      path.current = Skia.Path.MakeFromOp(
        path.current,
        drawCircle(e),
        PathOp.Union
      )!;
    },
  });

[made-from-organic-orange-juice]

Unfortunately, this didn't work as well for me since it was too slow for my use case.
I came up with something different, which was faster than doing path.op(path, PathOps.Union); for every little segments.

I have a cashed path and the cmds for the path I want to render, which is created on startup depending on the data, and then I use getPartialFrom() method (see below) to calculate and create the partial path I want, using Skia.Path.MakeFromCmds(). If I want to add a bigger path with another one which I will have to do, I will use the path.op() method.

I think the addPath() is way faster compared to path.op() in my use case.

  getPartialFrom(t0: number, t1: number): SkPath | null {
    let cmds = this._cashedCmds;
    // return early
    if (t1 >= 1 && t0 <= 0) {
      return this._cashedPath ?? null;
    }

    // return early
    if (t0 === t1 || (t0 < 0 && t1 < 0) || (t0 > 1 && t1 > 1)) {
      return null;
    }

    const from = Math.floor(t0 * (cmds.length - 1));
    const to = Math.floor(t1 * (cmds.length - 1));
    let fromCmds = cmds.slice(from, to);

    if (fromCmds.length === 0) {
      return null;
    }

    const point = this._cashedPath?.getPoint(
      t0 * this._cashedPath.countPoints(),
    );

    fromCmds[0][0] = PathVerb.Move;
    fromCmds[0][1] = point?.x ?? 0;
    fromCmds[0][2] = point?.y ?? 0;

    return Skia.Path.MakeFromCmds(fromCmds) ?? null;
  }

But thank you for the suggestion :)
Cheers!

[wcandillon]

thanks for bringing our attention to addPath, we have it as an open PR now: https://github.com/Shopify/react-native-skia/pull/1226/files