Щетка и масштаб реагируют нативную лыж и реагируют обработчик жестов ⇐ Javascript

[Anonymous]

Я использую Native Skias Library React, и я пытаюсь выполнить вычисления матрицы для создания паннабельного и увеличиваемого холста Skia (например, Figma или Google Maps). Вот моя реализация до сих пор < /p>


function MyCanvas({
imageView,
canvasWidth,
canvasHeight,
}: {
imageView: Element[];
canvasWidth: number;
canvasHeight: number;
}) {
const translateX = useSharedValue(0);
const translateY = useSharedValue(0);
const scale = useSharedValue(1);
const savedScale = useSharedValue(1);
const focalX = useSharedValue(0);
const focalY = useSharedValue(0);

const matrix = useSharedValue(Matrix4());

const context = useSharedValue({ x: 0, y: 0 });

const panGesture = Gesture.Pan()
.onStart(() => {
context.value = { x: translateX.value, y: translateY.value };
})
.onUpdate((event) => {
translateX.value = event.translationX + context.value.x;
translateY.value = event.translationY + context.value.y;
});

const pinchGesture = Gesture.Pinch()
.onUpdate((event) => {
scale.value = event.scale * savedScale.value;
focalX.value = event.focalX;
focalY.value = event.focalY;
})
.onEnd(() => {
savedScale.value = scale.value;
console.log(matrix.value);
});

const computedMatrix = useDerivedValue(() => {
return processTransform3d([
// 1. Apply current global panning
{ translateX: translateX.value },
{ translateY: translateY.value },

// 2. Translate to pivot point (focal point for zoom)
{ translateX: focalX.value },
{ translateY: focalY.value },

// 3. Apply scaling
{ scale: scale.value },

// 4. Translate back from pivot point
{ translateX: -focalX.value },
{ translateY: -focalY.value },
]);
}, [scale, translateX, translateY, focalX, focalY]);

useDerivedValue(() => {
// console.log(computedMatrix.value);
// This effect updates the Skia Matrix4 instance directly.
matrix.value = computedMatrix.value;
});

const composedGesture = Gesture.Simultaneous(panGesture, pinchGesture);

return (



{imageView}



);
}< /code>
< /div>
< /div>
< /p>
Эти кастрюли (переводится), но всякий раз, когда я пытаюсь укол, чтобы продолжать увеличивать начало происхождения (0,0), а не фокусную точку жеста. Есть предложения?


Подробнее здесь: https://stackoverflow.com/questions/796 ... re-handler