there are some relay to render in gesture when the number of shapes is more than 325

[5201314999]

hey,guys, I need some help. there are 325 circles in the image, and user can zoom or pan the canvas, but when my finger leave the screen , it still update rendering. I think "setState" of react which cost too much time to render the canvas(becuase the number of circles are large) in the gesture event is triggered many times, so it impairs user experience. I want to find a good way to solve it

the phone is iphone SE2.
the code is :

const matrix = useMemo(() => {
    return processTransform2d([
      {
        translateX: curImageTransform?.offsetX || 0,
      },
      {
        translateY: curImageTransform?.offsetY || 0,
      },
      {
        scale: curImageTransform?.scale || 1,
      },
    ]);
  }, [curImageTransform]);

 <Canvas ref={canvasRef} style={{ width: '100%', height: '100%' }}>
            {bgImage && originImageSize && (
              <SkiaImage
                image={bgImage}
                rect={{
                  x: 0,
                  y: 0,
                  width: originImageSize.width,
                  height: originImageSize.height,
                }}
                matrix={matrix}
              />
            )}
            <Group matrix={matrix}>
              {objectShapes.map((shapeData, index) =>
                  <>
                      <SkiaCircle
                        cx={shapeData.x}
                        cy={shapeData.y}
                        r={radius}
                        {...paintStyle.borderPaintStyle}
                        strokeWidth={strokeWidth}
                      />
                      <SkiaCircle
                        cx={shapeData.x}
                        cy={shapeData.y}
                        r={radius - strokeWidth / 2}
                        {...paintStyle.fillPaintStyle}
                      />
                  </>
              )}
            </Group>
</Canvas>



const panImage = (changeX: number, changeY: number) => {
  setCurImageTransform((t) => {
    if (t) {
      return {
        ...t,
        offsetX: t.offsetX + changeX,
        offsetY: t.offsetY + changeY,
      };
    }
  });
};

const dragGesture = Gesture.Pan()
    .runOnJS(true)
    .onBegin(panHandleStart)
    .onChange(panHandleChange)
    .onEnd(() => {
      panHandleEnd();
    });

[5201314999]

Now if you have a lot of repeating patterns you want to animated, you might want to looking to having them as a texture: https://shopify.github.io/react-native-skia/docs/animations/textures. , I have test the advice , it is high performance but the circle is very blurry.

Especially on the iPhone SE2, when I zoom in on the canvas（max zoom value is 3), the situation worsens.

 const offscreen = Skia.Surface.MakeOffscreen(
      bgImage.width() * devicePixelRatio,
      bgImage.height() * devicePixelRatio,
    );
    if (!offscreen) {
      throw new Error("Couldn't load the image");
    }
    const canvas = offscreen.getCanvas();
    canvas.scale(devicePixelRatio, devicePixelRatio);

[5201314999]

another bad result : If I try to update the color or radius using the slider, the program will crash due to repeated 'MakeOffscreen' calls." I obersave that Memory cannot be released immediately during the repeated "MakeOffscreen"

[5201314999]

    const resImage = useSharedValue<SkImage | null>(null);
  const createTexture = (
    image: SharedValue<SkImage | null>,
    drawDatas: DrawObject<Circle>[],
    safeDevicePixelRatio: number,
  ) => {
    'worklet';
    const offscreen = Skia.Surface.MakeOffscreen(
      bgImage!.width() * safeDevicePixelRatio,
      bgImage!.height() * safeDevicePixelRatio,
    );
    if (!offscreen) {
      console.log('offscreen error');
      return;
    }
    const canvas = offscreen.getCanvas();
    // canvas.clear(Skia.Color('#ffffff'));
    canvas.scale(safeDevicePixelRatio, safeDevicePixelRatio);
    const { radius: circleSize } = drawDatas[0].shapeData;
    const fillColor = DEFAULT_FILL_COLOR;

    const { color: strokeColor, strokeWidth } =
      drawDatas[0]?.paintStyle?.borderPaintStyle;
    drawDatas.map((obj) => {
      const paint = Skia.Paint();
      paint.setAntiAlias(true);
      const shapeData = obj.shapeData as Circle;
      paint.setColor(Skia.Color(strokeColor));
      paint.setStyle(PaintStyle.Stroke);
      paint.setStrokeWidth(strokeWidth);
      canvas.drawCircle(shapeData.x, shapeData.y, circleSize, paint);
      paint.reset();
      paint.setAntiAlias(true);
      paint.setColor(Skia.Color(fillColor));
      paint.setStyle(PaintStyle.Fill);
      canvas.drawCircle(
        shapeData.x,
        shapeData.y,
        circleSize - strokeWidth / 2,
        paint,
      );
    });
    console.log('11');
    offscreen.flush();
    image.value = offscreen.makeImageSnapshot();
    offscreen.dispose();



// dispose  image

  const loadCircles = async (drawDatas: DrawObject<Circle>[]) => {
    const { devicePixelRatio } = useGlobal();
    const MAX_SAFT_CANVAS_WIDTH = await getMaxTextureSize();
    if (!bgImage || !drawDatas) return;
    const safeDevicePixelRatio = Math.min(
      devicePixelRatio,
      MAX_SAFT_CANVAS_WIDTH / Math.max(bgImage.width(), bgImage.height()),
    );
    resImage.value?.dispose();
    // resImage.value = null;
    runOnUI(createTexture)(resImage, drawDatas, safeDevicePixelRatio);
  };
  };

[5201314999]

I have solved the question , I use useMemo to cache to reduce the times of rendering, and it is smoothy when pinch or pan . and the offscreen exists the memory leak, I can't finish the way of offscreen to avoid the rendering problem.

hey,guys, I need some help. there are 325 circles in the image, and user can zoom or pan the canvas, but when my finger leave the screen , it still update rendering. I think "setState" of react which cost too much time to render the canvas(becuase the number of circles are large) in the gesture event is triggered many times, so it impairs user experience. I want to find a good way to solve it

the phone is iphone SE2. the code is :

const matrix = useMemo(() => {
    return processTransform2d([
      {
        translateX: curImageTransform?.offsetX || 0,
      },
      {
        translateY: curImageTransform?.offsetY || 0,
      },
      {
        scale: curImageTransform?.scale || 1,
      },
    ]);
  }, [curImageTransform]);

 <Canvas ref={canvasRef} style={{ width: '100%', height: '100%' }}>
            {bgImage && originImageSize && (
              <SkiaImage
                image={bgImage}
                rect={{
                  x: 0,
                  y: 0,
                  width: originImageSize.width,
                  height: originImageSize.height,
                }}
                matrix={matrix}
              />
            )}
            <Group matrix={matrix}>
              {objectShapes.map((shapeData, index) =>
                  <>
                      <SkiaCircle
                        cx={shapeData.x}
                        cy={shapeData.y}
                        r={radius}
                        {...paintStyle.borderPaintStyle}
                        strokeWidth={strokeWidth}
                      />
                      <SkiaCircle
                        cx={shapeData.x}
                        cy={shapeData.y}
                        r={radius - strokeWidth / 2}
                        {...paintStyle.fillPaintStyle}
                      />
                  </>
              )}
            </Group>
</Canvas>



const panImage = (changeX: number, changeY: number) => {
  setCurImageTransform((t) => {
    if (t) {
      return {
        ...t,
        offsetX: t.offsetX + changeX,
        offsetY: t.offsetY + changeY,
      };
    }
  });
};

const dragGesture = Gesture.Pan()
    .runOnJS(true)
    .onBegin(panHandleStart)
    .onChange(panHandleChange)
    .onEnd(() => {
      panHandleEnd();
    });