如何在React Native中弄脏视图的一部分？

英式

无论用户将手指拖到哪里，我都希望对图像的一部分进行模糊处理，但我不想对整个图像进行模糊处理。这是我的模糊处理方式

我@react-native-community/blur用于模糊视图

const MyView = () => {
  const [locations, setLocation] = useState([]);
  const [top, setTop] = useState();
  const [left, setLeft] = useState();

  return (
    <>
      <View
        style={styles.container}
        onTouchEnd={(event) => {
          console.log(event.nativeEvent.locationX);
          console.log(event.nativeEvent.locationY);
          setLocation([
            ...locations,
            {
              right: event.nativeEvent.locationX,
              bottom: event.nativeEvent.locationY,
              top,
              left,
            },
          ]);
        }}
        onTouchStart={(event) => {
          console.log('S' + event.nativeEvent.locationX);
          console.log('S' + event.nativeEvent.locationY);
          setLeft(event.nativeEvent.locationX);
          setTop(event.nativeEvent.locationY);
        }}>
        <ImageBackground
          style={{width, height}}
          source={{
            uri:
              'https://images.unsplash.com/photo-1593642634315-48f5414c3ad9?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80',
          }}>
          <Text>Hi there </Text>
        </ImageBackground>
      </View>
      {locations.map((l, index) => {
        return (
          <BlurView
            key={index.toString()}
            style={{
              width: l.right - l.left,
              height: l.bottom - l.top,
              backgroundColor: 'rgba(0,0,0,0.1)',
              position: 'absolute',
              top: parseFloat(l.top),
              left: parseFloat(l.left),
              right: parseFloat(l.right),
              bottom: parseFloat(l.bottom),
              // blurR,
              // opacity: 0.4,
            }}
            blurType="light"
            blurAmount={4}
            reducedTransparencyFallbackColor="white"
          />
        );
      })}
    </>);
};

这是一种在用户拖动手指时弄脏部分图像的真正技巧。在Android上，只要我将手指移到两个以上的位置，应用程序就会停止响应。有谁知道一种更好的方法来弄脏部分视图，而不是模糊用户拖动手指时的整个图像视图

库比莱·萨利（Kubilay Salih）

您可以使用PanResponder。我为您开发了一个示例应用程序。世博会小吃没有模糊的观点，但我想您可以轻松地将样本转换为您想要的样本。这是示例代码：

import React, { useState, useRef } from 'react'
import { StyleSheet, View, ImageBackground, PanResponder, Animated } from 'react-native'

const CIRCLE_RADIUS = 60

const IAmTheBlurComponent = () => {
  return (
    <View style={[StyleSheet.absoluteFill, { backgroundColor: 'pink', opacity: 0.5 }]}></View>
  )
}

const Component = () => {
  const [pointers, setPointers] = useState([])
  const refs: any = useRef({}).current;

  const panResponder = useRef(
    PanResponder.create({
      onStartShouldSetPanResponder: () => true,
      onMoveShouldSetPanResponderCapture: () => true,
      onPanResponderStart: (evt) => {
        setPointers(evt.nativeEvent.touches.map(touch => touch.identifier))
        evt.nativeEvent.touches.forEach((event) => {
          refs[event.identifier] = { x: new Animated.Value(event.pageX), y: new Animated.Value(event.pageY) }
        })
      },
      onPanResponderMove: (evt) => {
        evt.nativeEvent.touches.forEach((event) => {
          refs[event.identifier].x.setValue(event.pageX)
          refs[event.identifier].y.setValue(event.pageY)
        })
      },
      onPanResponderEnd: (evt) => {
        setPointers(evt.nativeEvent.touches.map(touch => touch.identifier))
      },
    })
  ).current

  return (
    <ImageBackground
      style={{
        flex: 1,
        position: 'relative'
      }}
      source={{
        uri:
          'https://images.unsplash.com/photo-1593642634315-48f5414c3ad9?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80',
      }}
      {...panResponder.panHandlers}
    >
      {pointers.map((pnt) => {
        return (
          <Animated.View
            key={pnt}
            style={{
              overflow: 'hidden',
              height: CIRCLE_RADIUS * 2,
              width: CIRCLE_RADIUS * 2,
              borderRadius: CIRCLE_RADIUS,
              position: 'absolute',
              transform: [
                {
                  translateX: Animated.subtract(refs[pnt].x, CIRCLE_RADIUS)
                },
                {
                  translateY: Animated.subtract(refs[pnt].y, CIRCLE_RADIUS)
                }
              ]
            }}
          >
            <IAmTheBlurComponent />
          </Animated.View>
        )
      })}
    </ImageBackground>
  )
}

export default function App() {
  return (
    <View style={styles.container}>
      <Component />
    </View>
  )
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
  },
})

对于平滑的动画，可以选择“动画库”。我没有使用ValueXY或类似的东西，因此您可以轻松地将该样本转换为复活。

这是世博会小吃的样本：https : //snack.expo.io/@kubilaysali/suspicious-ice-cream

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。