[ReactNative]그래픽 라이브러리 Skia

01 개요

Skia는 크롬, 크롬OS, 파이어폭스, 안드로이드, 플러터 등 다양한 제품에서 사용되고 있는 그래픽 라이브러리이다. 2023년 작성시점에 리액트 네이티브에서 사용할 수 있도록 API를 제공하였다. 이에 다양한 그래픽 표현을 애플리케이션에 포함시키기 위해 해당 라이브러리에 관한 내용 전반을 다룬다.

참조링크 : React Native Skia 공식문서(https://shopify.github.io/react-native-skia/)
참조링크 : React Native Skia 깃허브(https://github.com/Shopify/react-native-skia)

최종수정일 : 2023.08.21

---

02 초기환경설정

npm install @shopify/react-native-skia

버전 요구조건

• react-native@>=0.66
• react@>=18
• iOS 13 or above
• Android API level 16 or above

---

03 컴포넌트

03.01 Canvas

`
import {useEffect} from "react";
import {Canvas, Image, useCanvasRef, Circle} from "@shopify/react-native-skia";

export const Demo = () => {
 const ref = useCanvasRef();
 useEffect(() => {
   setTimeout(() => {
     // you can pass an optional rectangle
     // to only save part of the image
     const image = ref.current?.makeImageSnapshot();
     if (image) {
       // you can use image in an <Image> component
       // Or save to file using encodeToBytes -> Uint8Array
       const bytes = image.encodeToBytes();
     }
   }, 1000)
 });
 return (
   <Canvas style={{ flex: 1 }} ref={ref}>
     <Circle r={128} cx={128} cy={128} color="red" />
   </Canvas>
 );
};

`

Skia를 이용한 그래픽 표현의 기본 프레임이며, 리액트 네이티브의 뷰와 동일하게 취급할 수 있다. 아래와 같은 파라미터를 받는다.

Name	Type	Description
style?	ViewStyle	View style
ref?	Ref<SkiaView>	Reference to the SkiaView object
mode?	default or continuous	By default, the canvas is only updated when the drawing tree or animation values change. With mode="continuous", the canvas will redraw on every frame
onTouch?	TouchHandler	Touch handler for the Canvas (see touch handler)
onSize?	SkiaMutableValue<Size> or SharedValue<Size>	Skia or Reanimated value to which the canvas size will be assigned
onLayout?	NativeEvent<LayoutEvent>	Invoked on mount and on layout changes (see onLayout)

03.02 Group

React Native Skia에서 필수적인, 여러번 중첩될 수 있는 드로잉 컨테이너이다. 아래와 같은 파라미터를 받는다.

Name	Type	Description
transform?	Transform2d	Transform2d Same API that's in React Native. The default origin of the transformation is, however, different. It is the center object in React Native and the top-left corner in Skia.
origin?	Point	Sets the origin of the transformation. This property is not inherited by its children.
clip?	RectOrRRectOrPath	Rectangle, rounded rectangle, or Path to use to clip the children.
invertClip?	boolean	Invert the clipping region: parts outside the clipping region will be shown and, inside will be hidden.
layer?	RefObject<Paint>	Draws the children as a bitmap and applies the effects provided by the paint.

특별히, <Group> 컴포넌트는 자신이 포함하고 있는 자식 요소들에게 아래와 같은 기능을 적용할 수 있다.

• Paint
• Transformation
• Clip
• Bitmap Effect

03.03 Painting

React Native Skia에서 그려지는 모든 요소들에 대해, 어떤 색상을 가지는지, 뒷 배경과의 블렌드 모드는 어떠한지, 어떠한 스타일로 그려지는지 등등에 대한 사항을 규정할 수 있다. 이러한 Painting 속성은 <Rect /> 등 개별 요소에 프로퍼티로 전달할 수도 있고, 드로잉 그룹에 <Paint /> 객체를 적용해 일괄적으로 변경할 수도 있다.

아래 링크에서는 블렌드모드 옵션에 대해 다룬다.
https://skia.org/docs/user/api/skblendmode_overview/