railbird/react-native-vision-camera
10
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix: Represent neutralZoom in factor instead of percentage (#179)

Browse Source 
* Use factor instead of percent for `neutralZoom`

* fix zoom calculation

* Update CameraPage.tsx
This commit is contained in:
Marc Rousavy
2021-06-07 10:46:53 +02:00
committed by GitHub
parent 8aec647acd
commit 555474be7d
7 changed files with 37 additions and 51 deletions
Download Patch File Download Diff File Expand all files Collapse all files

31
example/src/CameraPage.tsx
View File

@@ -95,18 +95,23 @@ export const CameraPage: NavigationFunctionComponent = ({ componentId }) => {
}, [formats, fps, enableHdr]);
//#region Animated Zoom
const formatMaxZoom = format?.maxZoom ?? 1;
const maxZoomFactor = Math.min(formatMaxZoom, MAX_ZOOM_FACTOR);
const neutralZoom = device?.neutralZoom ?? 0;
const neutralZoomScaled = (neutralZoom / maxZoomFactor) * formatMaxZoom;
const maxZoomScaled = (1 / formatMaxZoom) * maxZoomFactor;
// This just maps the zoom factor to a percentage value.
// so e.g. for [min, neutr., max] values [1, 2, 128] this would result in [0, 0.0081, 1]
const minZoomFactor = device?.minZoom ?? 1;
const neutralZoomFactor = device?.neutralZoom ?? 1;
const maxZoomFactor = device?.maxZoom ?? 1;
const maxZoomFactorClamped = Math.min(maxZoomFactor, MAX_ZOOM_FACTOR);
const cameraAnimatedProps = useAnimatedProps(
() => ({
zoom: interpolate(zoom.value, [0, neutralZoomScaled, 1], [0, neutralZoom, maxZoomScaled], Extrapolate.CLAMP),
}),
[maxZoomScaled, neutralZoom, neutralZoomScaled, zoom],
);
const neutralZoomOut = (neutralZoomFactor - minZoomFactor) / (maxZoomFactor - minZoomFactor);
const neutralZoomIn = (neutralZoomOut / maxZoomFactorClamped) * maxZoomFactor;
const maxZoomOut = maxZoomFactorClamped / maxZoomFactor;
const cameraAnimatedProps = useAnimatedProps(() => {
const z = interpolate(zoom.value, [0, neutralZoomIn, 1], [0, neutralZoomOut, maxZoomOut], Extrapolate.CLAMP);
return {
zoom: isNaN(z) ? 0 : z,
};
}, [maxZoomOut, neutralZoomOut, neutralZoomIn, zoom]);
//#endregion
//#region Callbacks
@@ -155,8 +160,8 @@ export const CameraPage: NavigationFunctionComponent = ({ componentId }) => {
//#region Effects
useEffect(() => {
// Run everytime the neutralZoomScaled value changes. (reset zoom when device changes)
zoom.value = neutralZoomScaled;
}, [neutralZoomScaled, zoom]);
zoom.value = neutralZoomIn;
}, [neutralZoomIn, zoom]);
//#endregion
//#region Pinch to Zoom Gesture