docs: Add tap to focus example
This commit is contained in:
parent
de9da64400
commit
0ffaa7fc29
@ -10,7 +10,7 @@ To focus the camera to a specific point, simply use the Camera's [`focus(...)`](
|
|||||||
await camera.current.focus({ x: tapEvent.x, y: tapEvent.y })
|
await camera.current.focus({ x: tapEvent.x, y: tapEvent.y })
|
||||||
```
|
```
|
||||||
|
|
||||||
The focus function expects a [`Point`](/docs/api/interfaces/Point) parameter which represents the location relative to the Camera view where you want to focus the Camera to (in _points_). If you use [react-native-gesture-handler](https://docs.swmansion.com/react-native-gesture-handler/), this will consist of the [`x`](https://docs.swmansion.com/react-native-gesture-handler/docs/next/gesture-handlers/api/tap-gh/#x) and [`y`](https://docs.swmansion.com/react-native-gesture-handler/docs/next/gesture-handlers/api/tap-gh/#y) properties of the tap event payload.
|
The focus function expects a [`Point`](/docs/api/interfaces/Point) parameter which represents the location relative to the Camera view where you want to focus the Camera to (in _points_). If you use [react-native-gesture-handler](https://github.com/software-mansion/react-native-gesture-handler/), this will consist of the [`x`](https://docs.swmansion.com/react-native-gesture-handler/docs/next/gesture-handlers/api/tap-gh/#x) and [`y`](https://docs.swmansion.com/react-native-gesture-handler/docs/next/gesture-handlers/api/tap-gh/#y) properties of the tap event payload.
|
||||||
|
|
||||||
So for example, `{ x: 0, y: 0 }` will focus to the upper left corner, while `{ x: VIEW_WIDTH, y: VIEW_HEIGHT }` will focus to the bottom right corner.
|
So for example, `{ x: 0, y: 0 }` will focus to the upper left corner, while `{ x: VIEW_WIDTH, y: VIEW_HEIGHT }` will focus to the bottom right corner.
|
||||||
|
|
||||||
@ -20,6 +20,43 @@ Focussing adjusts auto-focus (AF) and auto-exposure (AE).
|
|||||||
`focus(...)` will fail if the selected Camera device does not support focusing (see [`CameraDevice.supportsFocus`](/docs/api/interfaces/CameraDevice#supportsfocus))
|
`focus(...)` will fail if the selected Camera device does not support focusing (see [`CameraDevice.supportsFocus`](/docs/api/interfaces/CameraDevice#supportsfocus))
|
||||||
:::
|
:::
|
||||||
|
|
||||||
|
## Example (Gesture Handler)
|
||||||
|
|
||||||
|
This is an Example on how to use [react-native-gesture-handler](https://github.com/software-mansion/react-native-gesture-handler/) to focus the Camera to a specific point on the screen:
|
||||||
|
|
||||||
|
```tsx
|
||||||
|
import { Camera, useCameraDevice } from 'react-native-vision-camera'
|
||||||
|
import { Gesture, GestureDetector } from 'react-native-gesture-handler'
|
||||||
|
|
||||||
|
export function App() {
|
||||||
|
const camera = useRef<Camera>(null)
|
||||||
|
const device = useCameraDevice('back')
|
||||||
|
|
||||||
|
const focus = useCallback((point: Point) => {
|
||||||
|
const c = camera.current
|
||||||
|
if (c == null) return
|
||||||
|
c.focus()
|
||||||
|
}, [])
|
||||||
|
|
||||||
|
const gesture = Gesture.Tap()
|
||||||
|
.onEnd(({ x, y }) => {
|
||||||
|
runOnJS(focus)({ x, y })
|
||||||
|
})
|
||||||
|
|
||||||
|
if (device == null) return <NoCameraDeviceError />
|
||||||
|
return (
|
||||||
|
<GestureDetector gesture={gesture}>
|
||||||
|
<Camera
|
||||||
|
ref={camera}
|
||||||
|
style={StyleSheet.absoluteFill}
|
||||||
|
device={device}
|
||||||
|
isActive={true}
|
||||||
|
/>
|
||||||
|
</GestureDetector>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
<br />
|
<br />
|
||||||
|
|
||||||
#### 🚀 Next section: [Exposure](exposure)
|
#### 🚀 Next section: [Exposure](exposure)
|
||||||
|
@ -43,8 +43,7 @@ A Camera's `zoom` property is represented in a **logarithmic scale**. That means
|
|||||||
|
|
||||||
The above example only demonstrates how to animate the `zoom` property. To actually implement pinch-to-zoom or pan-to-zoom, take a look at the [VisionCamera example app](https://github.com/mrousavy/react-native-vision-camera/tree/main/package/example), the pinch-to-zoom gesture can be found [here](https://github.com/mrousavy/react-native-vision-camera/blob/main/package/example/src/views/CaptureButton.tsx#L189-L208), and the pan-to-zoom gesture can be found [here](https://github.com/mrousavy/react-native-vision-camera/blob/d8551792e97eaa6fa768f54059ffce054bf748d9/example/src/views/CaptureButton.tsx#L185-L205). They implement a real world use-case, where the maximum zoom value is clamped to a realistic value, and the zoom responds very gracefully by using a logarithmic scale.
|
The above example only demonstrates how to animate the `zoom` property. To actually implement pinch-to-zoom or pan-to-zoom, take a look at the [VisionCamera example app](https://github.com/mrousavy/react-native-vision-camera/tree/main/package/example), the pinch-to-zoom gesture can be found [here](https://github.com/mrousavy/react-native-vision-camera/blob/main/package/example/src/views/CaptureButton.tsx#L189-L208), and the pan-to-zoom gesture can be found [here](https://github.com/mrousavy/react-native-vision-camera/blob/d8551792e97eaa6fa768f54059ffce054bf748d9/example/src/views/CaptureButton.tsx#L185-L205). They implement a real world use-case, where the maximum zoom value is clamped to a realistic value, and the zoom responds very gracefully by using a logarithmic scale.
|
||||||
|
|
||||||
|
## Example (Reanimated + Gesture Handler)
|
||||||
## Implementation (Reanimated)
|
|
||||||
|
|
||||||
While you can use any animation library to animate the `zoom` property (or use no animation library at all) it is recommended to use [react-native-reanimated](https://github.com/software-mansion/react-native-reanimated) to achieve best performance. Head over to their [Installation guide](https://docs.swmansion.com/react-native-reanimated/docs/installation) to install Reanimated if you haven't already.
|
While you can use any animation library to animate the `zoom` property (or use no animation library at all) it is recommended to use [react-native-reanimated](https://github.com/software-mansion/react-native-reanimated) to achieve best performance. Head over to their [Installation guide](https://docs.swmansion.com/react-native-reanimated/docs/installation) to install Reanimated if you haven't already.
|
||||||
|
|
||||||
@ -61,8 +60,8 @@ While you can use any animation library to animate the `zoom` property (or use n
|
|||||||
The following example implements a pinch-to-zoom gesture using [react-native-gesture-handler](https://github.com/software-mansion/react-native-gesture-handler/) and [react-native-reanimated](https://github.com/software-mansion/react-native-reanimated):
|
The following example implements a pinch-to-zoom gesture using [react-native-gesture-handler](https://github.com/software-mansion/react-native-gesture-handler/) and [react-native-reanimated](https://github.com/software-mansion/react-native-reanimated):
|
||||||
|
|
||||||
```tsx
|
```tsx
|
||||||
import { Camera, useCameraDevice, CameraProps } from "react-native-vision-camera"
|
import { Camera, useCameraDevice, CameraProps } from 'react-native-vision-camera'
|
||||||
import Reanimated, { useAnimatedProps, useSharedValue } from "react-native-reanimated"
|
import Reanimated, { useAnimatedProps, useSharedValue } from 'react-native-reanimated'
|
||||||
import { Gesture, GestureDetector } from 'react-native-gesture-handler'
|
import { Gesture, GestureDetector } from 'react-native-gesture-handler'
|
||||||
|
|
||||||
Reanimated.addWhitelistedNativeProps({
|
Reanimated.addWhitelistedNativeProps({
|
||||||
|
Loading…
Reference in New Issue
Block a user