Animation App using Skia running on iPad

[heitorrubira]

Hey folks,

Thank you for all the work you've done so far. You are creating an amazing library. Congratulations!

I hope to contribute with something soon, I'm taking some notes and adding some stuff to the docs.

For now I've challenged myself to create Frame by Frame animation App for Ipad.

• For this I've mostly using objects and SkiaView, trying to avoid re-renders on the React side and updating the frames using no component.

This is a first look:

React.Native.Animation.App.mp4

[wcandillon]

that looks awesome :)

[fukuli053]

Hi Heitor @heitorrubira ,
Can you share your project or Can you tell how can you made the eraser in this project? Your eraser is painting white or doing something else? I have a project like this but I have a problem with eraser.

[heitorrubira]

Hey @fukuli053,

Sorry about the delayed.

So I didn't share the public repository yet, but let me give you the idea behind.

First thing it's to the model, I'm using Path and I have a list of points. something like: [(0, 1), (1, 2),...n]

1. I'm in the erase mode and I have a eraser with a radius of 20px.
2. So onTouchMove I will get the current position and I will check if the distance between the touch position and the point is lesser than the radius.
3. If yes remove the point from the list.

let me share part of the code here:

private eraseObject(touch: IUserTouchEvent, obj: IStageObject) {
    // this checks if the touch position is inside a rectangle that reporesents the object limits.
    if (isPointInRect(touch.position, obj.limits)) {
      const pointList: Vector[][] = obj.drawer.getData();
  
      for(let j = 0; j < pointList.length; j++) {
        const pointsToStay: Vector[] = [];
      
        for(let i = 0; i < pointList[j].length; i++) {
          if (
            !isPointInCircle(pointList[j][i], touch.position, this.strokeWidth)
          ) {
            pointsToStay.push(pointList[j][i]);
          }
        }
        
        pointList[j] = pointsToStay.length > 1 ? pointsToStay : [];
      }
      
      obj.drawer.setData(pointList);
    }
    obj.calcLimits();
  }