Unexpected translation after origin shift

[flowtyone]

Hey everyone, I'm familiar with react-native but pretty new to react-native-skia.

• I'm trying to create a simple full-screen interaction for a square that can be panned and scaled.
• The scaling works fine for the first time, but then the square starts to move and the origin is off.
• I tried to apply the scale in many places to fix it but I can't understand what I'm doing wrong, and I would super appreciate your help.

Screen.Recording.2025-01-12.at.18.52.14.mov

Code is below:

import {Platform, View} from "react-native";
import {Canvas, Circle, Fill, Group, matchFont, Rect, SkPoint, Text} from "@shopify/react-native-skia";
import {useDerivedValue, useSharedValue} from "react-native-reanimated";
import {Gesture, GestureDetector} from "react-native-gesture-handler";
import React from "react";

const debugFont = matchFont({
    fontFamily: Platform.select({ios: "Helvetica", default: "serif"}),
    fontSize: 14
});

const options = {
    minScale: 1,
    maxScale: 4
}

const TestCanvas = () => {

    const posX = useSharedValue<number>(0);
    const posY = useSharedValue<number>(0);
    const scale = useSharedValue<number>(options.minScale);
    const origin = useSharedValue<SkPoint>({x: 0, y: 0});

    const oX = useDerivedValue(() => {
        return origin.value.x
    }, [origin])

    const oY = useDerivedValue(() => {
        return origin.value.y
    }, [origin])

    const debugText = useDerivedValue(() => {
        return `${
            posX.value.toFixed(1)
        }, ${
            posY.value.toFixed(1)
        }, ${
            scale.value.toFixed(2)
        }, (${
            origin.value.x.toFixed(1)
        }, ${
            origin.value.y.toFixed(1)
        })`
    })

    const pan = Gesture.Pan()
        .onChange((e) => {
            posX.value += e.changeX;
            posY.value += e.changeY;
        });

    const pinch = Gesture.Pinch()
        .onStart((e) => {
            origin.value = {
                x: e.focalX - posX.value,
                y: e.focalY - posY.value
            }
        })
        .onChange((e) => {
            scale.value = Math.max(
                Math.min(
                    e.scaleChange * scale.value,
                    options.maxScale
                ),
                options.minScale
            );
        })

    const gesture = Gesture.Simultaneous(pan, pinch);

    const transform = useDerivedValue(() => {
        return [{
            translateX: posX.value
        }, {
            translateY: posY.value
        }, {
            scale: scale.value
        }]
    });

    return (
        <GestureDetector gesture={gesture}>
            <View style={{flex: 1}}>
                <Canvas style={{flex: 1}}>
                    <Fill color="black"/>
                    <Group origin={origin} transform={transform}>
                        <Rect x={0} y={0} width={200} height={200} color="green"/>
                        <Circle r={5} cx={oX} cy={oY} color="red"/>
                    </Group>
                    <Text
                        font={debugFont}
                        text={debugText}
                        color="red"
                        x={50}
                        y={100}
                    />
                </Canvas>
            </View>
        </GestureDetector>
    )
}

export default TestCanvas;

[wcandillon]

I think this tutorial is exactly what you are looking for: https://www.youtube.com/watch?v=5yM4NPcTwY4

…

On Sun, Jan 12, 2025 at 5:55 PM flowtyone ***@***.***> wrote: Hey everyone, I'm familiar with react-native but pretty new to react-native-skia. - I'm trying to create a simple full-screen interaction for a square that can be panned and scaled. - The scaling works fine for the first time, but then the square starts to move and the origin is off. - I tried to apply the scale in many places to fix it but I can't understand what I'm doing wrong, and I would super appreciate your help. https://github.com/user-attachments/assets/f0d07f4a-a795-44e6-a728-c83676eb95ed Code is below: import {Platform, View} from "react-native";import {Canvas, Circle, Fill, Group, matchFont, Rect, SkPoint, Text} from ***@***.***/react-native-skia";import {useDerivedValue, useSharedValue} from "react-native-reanimated";import {Gesture, GestureDetector} from "react-native-gesture-handler";import React from "react"; const debugFont = matchFont({ fontFamily: Platform.select({ios: "Helvetica", default: "serif"}), fontSize: 14}); const options = { minScale: 1, maxScale: 4} const TestCanvas = () => { const posX = useSharedValue<number>(0); const posY = useSharedValue<number>(0); const scale = useSharedValue<number>(options.minScale); const origin = useSharedValue<SkPoint>({x: 0, y: 0}); const oX = useDerivedValue(() => { return origin.value.x }, [origin]) const oY = useDerivedValue(() => { return origin.value.y }, [origin]) const debugText = useDerivedValue(() => { return `${ posX.value.toFixed(1) }, ${ posY.value.toFixed(1) }, ${ scale.value.toFixed(2) }, (${ origin.value.x.toFixed(1) }, ${ origin.value.y.toFixed(1) })` }) const pan = Gesture.Pan() .onChange((e) => { posX.value += e.changeX; posY.value += e.changeY; }); const pinch = Gesture.Pinch() .onStart((e) => { origin.value = { x: e.focalX - posX.value, y: e.focalY - posY.value } }) .onChange((e) => { scale.value = Math.max( Math.min( e.scaleChange * scale.value, options.maxScale ), options.minScale ); }) const gesture = Gesture.Simultaneous(pan, pinch); const transform = useDerivedValue(() => { return [{ translateX: posX.value }, { translateY: posY.value }, { scale: scale.value }] }); return ( <GestureDetector gesture={gesture}> <View style={{flex: 1}}> <Canvas style={{flex: 1}}> <Fill color="black"/> <Group origin={origin} transform={transform}> <Rect x={0} y={0} width={200} height={200} color="green"/> <Circle r={5} cx={oX} cy={oY} color="red"/> </Group> <Text font={debugFont} text={debugText} color="red" x={50} y={100} /> </Canvas> </View> </GestureDetector> )} export default TestCanvas; — Reply to this email directly, view it on GitHub <#2889>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AACKXVRII7YKHLETPBW2KGT2KKM63AVCNFSM6AAAAABVBGHU2KVHI2DSMVQWIX3LMV43ERDJONRXK43TNFXW4OZXHAYTEMRXHA> . You are receiving this because you are subscribed to this thread.Message ID: ***@***.***>

[flowtyone]

Thank you for such a quick response and this amazing library!

I have actually seen the video multiple times. The code seems slightly outdated because I wasn't able to replicate some of it with the current version of skia.

Also the interaction that I'm trying to create is full screen, with dynamic origin - so the origin of the scale tranform needs to change according to the focal center of the pinch gesture. In the video, origin stays the same, at the center of the sticker