Arc with small sweep degree is not drawn correctly

[nongtm]

Hi all,

Does Skia Path support draw arc with small sweep degree? I tried it and every arc with sweep degree smaller than 1 is being drawn the same. I'm trying to draw a circle just like the record button in Tiktok, so the precision is a must, or else the next arc being drawn will draw on top of the previous one.

Here is the screenshot that shown the arc drawn with sweep angle 0.1, and after an arc is drawn over it

I'm using react-native-skia 0.1.155

If there is other alternative solution to this, please guide me. Thank you in advance!

[william-candillon]

do you have a code snippet to share maybe? I'm wondering if this is not related to the stroke width and stroke options you have.

[nongtm]

Yes I do. Here it is

const CAPTURE_BUTTON_SIZE = 78;
const BORDER_WIDTH = CAPTURE_BUTTON_SIZE * 0.1;

const path = useComputedValue(() => {
    return pathTimes.map((t, i) => {
      const startingTime = t;
      const rotatedDegree = (startingTime / MAX_TIME) * 360;
      // console.log('Index', i, startPosition.current + rotatedDegree);
      let rotation = 0;

      if (i < pathTimes.length - 1) {
        // Old video => draw a fixed arc
        const videoLength = pathTimes[i + 1] - startingTime;
        rotation = (videoLength / MAX_TIME) * 360;
      } else {
        // New video => rotate based on current time
        rotation = ((timer.current - startingTime) / MAX_TIME) * 360;
      }

      // console.log('Index', i, 'Rotation', rotation);

      const p = Skia.Path.Make();
      p.moveTo(0, CAPTURE_BUTTON_SIZE / 2);
      p.addArc(
        {
          x: BORDER_WIDTH / 2,
          y: BORDER_WIDTH / 2,
          width: CAPTURE_BUTTON_SIZE - BORDER_WIDTH,
          height: CAPTURE_BUTTON_SIZE - BORDER_WIDTH,
        },
        startPosition.current + rotatedDegree,
        rotation,
      );
      return p;
    });
  }, [pathTimes, timer]);

And here is my Canvas

<Canvas
    style={{
      position: 'absolute',
      height: CAPTURE_BUTTON_SIZE,
      width: CAPTURE_BUTTON_SIZE,
    }}
  >
    <Circle
      cx={CAPTURE_BUTTON_SIZE / 2}
      cy={CAPTURE_BUTTON_SIZE / 2}
      r={CAPTURE_BUTTON_SIZE / 2 - BORDER_WIDTH / 2}
      color="white"
      style="stroke"
      strokeWidth={BORDER_WIDTH}
    />
    {pathTimes.map((_, i) => (
      <>
        <Path
          key={i}
          path={Selector(path, p => p[i])}
          style="stroke"
          // stroke="precision"
          strokeWidth={BORDER_WIDTH}
          strokeCap="square"
          color={Selector(colorized, c => c[i])}
        />
      </>
    ))}
  </Canvas>

I'm currently using runTiming animation. Everytime the timer is paused, I added the current time to pathTimes and then re render the path

[william-candillon]

do you think it might be the strokeCap or strokeWidth that forces a minium arc value?

[nongtm]

I haven't thought about that. Let me try to change it and let you know

[nongtm]

I removed the strokeCap and it worked! Thank you! I didn't realize just a small config could affect this.