From fa5f15968822fb5c9cea624609af31d39df211d6 Mon Sep 17 00:00:00 2001
From: Lee Young Min <miniyoung37@gmail.com>
Date: Tue, 10 Oct 2023 21:47:55 +0900
Subject: [PATCH] step2. painting overview

---
 SkiaPractice/App.tsx                          |  3 ++
 .../src/components/Painting/Painting.tsx      | 35 +++++++++++++++++++
 SkiaPractice/src/components/Painting/index.ts |  3 ++
 3 files changed, 41 insertions(+)
 create mode 100644 SkiaPractice/src/components/Painting/Painting.tsx
 create mode 100644 SkiaPractice/src/components/Painting/index.ts

diff --git a/SkiaPractice/App.tsx b/SkiaPractice/App.tsx
index b735d8e..df03ffb 100644
--- a/SkiaPractice/App.tsx
+++ b/SkiaPractice/App.tsx
@@ -10,6 +10,7 @@ import { SafeAreaView } from 'react-native';
 import { useContextBridge, FiberProvider } from 'its-fine';
 import { Canvas, Circle, Group } from '@shopify/react-native-skia';
 import CanvasPractice from './src/components/Canvas';
+import { Painting, PaintingInheritance } from './src/components/Painting';
 import { ThemeProvider } from './src/components/Canvas/Theme/Theme';
 
 function App(): JSX.Element {
@@ -28,6 +29,8 @@ function App(): JSX.Element {
         </Group>
       </Canvas> */}
         <CanvasPractice />
+        <Painting />
+        <PaintingInheritance />
         {/* </SafeAreaView> */}
       </ThemeProvider>
     </FiberProvider>
diff --git a/SkiaPractice/src/components/Painting/Painting.tsx b/SkiaPractice/src/components/Painting/Painting.tsx
new file mode 100644
index 0000000..3e5da0c
--- /dev/null
+++ b/SkiaPractice/src/components/Painting/Painting.tsx
@@ -0,0 +1,35 @@
+import { Canvas, Circle, Paint, vec, Group } from '@shopify/react-native-skia';
+
+const width = 256;
+const height = 256;
+
+const Painting = () => {
+  const strokeWidth = 10;
+  const c = vec(width / 2, height / 2);
+  const r = (width - strokeWidth) / 2;
+  return (
+    <Canvas style={{ width, height }}>
+      <Circle c={c} r={r} color="red">
+        <Paint color="lightblue" />
+        <Paint color="#adbce6" style="stroke" strokeWidth={10} />
+        <Paint color="#ade6d8" style="stroke" strokeWidth={strokeWidth / 2} />
+      </Circle>
+    </Canvas>
+  );
+};
+
+const PaintingInheritance = () => {
+  const r = width / 6;
+  return (
+    <Canvas style={{ width, height }}>
+      <Group color="lightblue">
+        <Circle cx={r} cy={r} r={r} />
+        <Group style="stroke" strokeWidth={10}>
+          <Circle cx={3 * r} cy={3 * r} r={r} />
+        </Group>
+      </Group>
+    </Canvas>
+  );
+};
+
+export { Painting, PaintingInheritance };
diff --git a/SkiaPractice/src/components/Painting/index.ts b/SkiaPractice/src/components/Painting/index.ts
new file mode 100644
index 0000000..e23e139
--- /dev/null
+++ b/SkiaPractice/src/components/Painting/index.ts
@@ -0,0 +1,3 @@
+import { Painting, PaintingInheritance } from './Painting';
+
+export { Painting, PaintingInheritance };