From 9fe2b4db16785e7221b8814c72811a3035fffbfb Mon Sep 17 00:00:00 2001 From: William Candillon Date: Tue, 2 Dec 2025 20:39:14 +0100 Subject: [PATCH 1/2] :wrench: --- apps/example/src/App.tsx | 3 ++ .../src/Examples/Pictures/Pictures.tsx | 44 +++++++++++++++++++ apps/example/src/Examples/Pictures/index.ts | 1 + apps/example/src/Examples/index.ts | 1 + apps/example/src/Home/HomeScreen.tsx | 5 +++ apps/example/src/types.ts | 1 + packages/skia/src/skia/web/JsiSkCanvas.ts | 1 - 7 files changed, 55 insertions(+), 1 deletion(-) create mode 100644 apps/example/src/Examples/Pictures/Pictures.tsx create mode 100644 apps/example/src/Examples/Pictures/index.ts diff --git a/apps/example/src/App.tsx b/apps/example/src/App.tsx index b11b743622..4b0692de60 100644 --- a/apps/example/src/App.tsx +++ b/apps/example/src/App.tsx @@ -33,6 +33,7 @@ import { Video, Chat, LiquidGlass, + Pictures, } from "./Examples"; import { CI, Tests } from "./Tests"; import { HomeScreen } from "./Home"; @@ -71,6 +72,7 @@ const linking: LinkingOptions = { SpeedTest: "speedtest", Video: "video", Chat: "chat", + Pictures: "pictures", }, }, prefixes: ["rnskia://"], @@ -232,6 +234,7 @@ const App = () => { name="Performance" component={PerformanceDrawingTest} /> + diff --git a/apps/example/src/Examples/Pictures/Pictures.tsx b/apps/example/src/Examples/Pictures/Pictures.tsx new file mode 100644 index 0000000000..057493c515 --- /dev/null +++ b/apps/example/src/Examples/Pictures/Pictures.tsx @@ -0,0 +1,44 @@ +import React, { useEffect } from "react"; +import { Canvas, Picture, Skia } from "@shopify/react-native-skia"; +import { + useDerivedValue, + useSharedValue, + withRepeat, + withTiming, +} from "react-native-reanimated"; + +const size = 256; +const n = 20; + +const paint = Skia.Paint(); + +export const Pictures = () => { + const progress = useSharedValue(0); + + useEffect(() => { + progress.value = withRepeat(withTiming(1, { duration: 3000 }), -1, true); + }, [progress]); + + const picture = useDerivedValue(() => { + "worklet"; + const recorder = Skia.PictureRecorder(); + const canvas = recorder.beginRecording(Skia.XYWHRect(0, 0, size, size)); + const angle = progress.value * Math.PI * 2; + for (let i = 0; i < n; i++) { + const alpha = Math.pow((i + 1) / n, 5) * 200; + const r = ((i + 1) / n) * (size / 4); + const offset = ((i + 1) / n) * (size / 4); + const cx = size / 2 + Math.cos(angle + (i * Math.PI * 2) / n) * offset; + const cy = size / 2 + Math.sin(angle + (i * Math.PI * 2) / n) * offset; + paint.setColor(Skia.Color(`rgba(0, 122, 255, ${alpha / 255})`)); + canvas.drawCircle(cx, cy, r, paint); + } + return recorder.finishRecordingAsPicture(); + }); + + return ( + + + + ); +}; diff --git a/apps/example/src/Examples/Pictures/index.ts b/apps/example/src/Examples/Pictures/index.ts new file mode 100644 index 0000000000..5a7343786a --- /dev/null +++ b/apps/example/src/Examples/Pictures/index.ts @@ -0,0 +1 @@ +export * from "./Pictures"; diff --git a/apps/example/src/Examples/index.ts b/apps/example/src/Examples/index.ts index 5fde1e92a0..cfb00127fd 100644 --- a/apps/example/src/Examples/index.ts +++ b/apps/example/src/Examples/index.ts @@ -28,3 +28,4 @@ export * from "./FrostedCard"; export * from "./SpeedTest"; export * from "./Video"; export * from "./Chat"; +export * from "./Pictures"; diff --git a/apps/example/src/Home/HomeScreen.tsx b/apps/example/src/Home/HomeScreen.tsx index 57860396b2..319e80624c 100644 --- a/apps/example/src/Home/HomeScreen.tsx +++ b/apps/example/src/Home/HomeScreen.tsx @@ -122,6 +122,11 @@ export const HomeScreen = () => { /> + ); }; diff --git a/apps/example/src/types.ts b/apps/example/src/types.ts index e40d0ebc4c..f650369e6d 100644 --- a/apps/example/src/types.ts +++ b/apps/example/src/types.ts @@ -30,4 +30,5 @@ export type StackParamList = { SpeedTest: undefined; Video: undefined; Chat: undefined; + Pictures: undefined; }; diff --git a/packages/skia/src/skia/web/JsiSkCanvas.ts b/packages/skia/src/skia/web/JsiSkCanvas.ts index 2e8f7b2043..54e88e922b 100644 --- a/packages/skia/src/skia/web/JsiSkCanvas.ts +++ b/packages/skia/src/skia/web/JsiSkCanvas.ts @@ -314,7 +314,6 @@ export class JsiSkCanvas drawSvg(svg: SkSVG, width?: number, height?: number) { const ctm = this.ref.getLocalToDevice(); - console.log({ ctm, width, height }); const image = this.CanvasKit.MakeImageFromCanvasImageSource( (svg as JsiSkSVG).ref ); From 96e63133294277d217793061e2fe5a75291d0180 Mon Sep 17 00:00:00 2001 From: William Candillon Date: Tue, 2 Dec 2025 20:50:08 +0100 Subject: [PATCH 2/2] :wrenhc: --- apps/docs/docs/pictures.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/docs/docs/pictures.md b/apps/docs/docs/pictures.md index fa0976f0cf..19e27e0649 100644 --- a/apps/docs/docs/pictures.md +++ b/apps/docs/docs/pictures.md @@ -33,6 +33,7 @@ const size = 256; const n = 20; const paint = Skia.Paint(); +const recorder = Skia.PictureRecorder(); export const HelloWorld = () => { const progress = useSharedValue(0); @@ -43,7 +44,6 @@ export const HelloWorld = () => { const picture = useDerivedValue(() => { "worklet"; - const recorder = Skia.PictureRecorder(); const canvas = recorder.beginRecording(Skia.XYWHRect(0, 0, size, size)); const numberOfCircles = Math.floor(progress.value * n); for (let i = 0; i < numberOfCircles; i++) {