根据点击量逐渐模糊图片（React-Native）

Question

我想根据按钮的点击次数逐渐模糊一张图片'Blur picture'。例如：如果用户点击一次它会使图片模糊一点，然后第二次点击会模糊一点，依此类推...... 是否有库可以执行此操作，否则我该如何实现？

我想在 React-Native 中执行此操作，但如果您知道如何使用其他语言执行此操作，我愿意接受任何建议。

Answer 1

Image 组件有一个名为“blurRadius”的属性，您可以在触摸时触发它（如果目标，您必须使用像 TouchableHighlight 这样的可触摸容器是一张图片）。

检查以下示例，它完全符合您的描述；我使用状态来跟踪模糊级别。

https://snack.expo.io/@danyalejandro/b38413

import React, { Component } from "react";
import { TouchableHighlight, Image, View } from "react-native";

class App extends Component {
  state: {
    radius: number
  }
  constructor(props){
    super(props);
    this.state = { radius: 0 };
  }


  _imagePressed() {
    this.setState({ radius: this.state.radius + 4 });

  }

  render() {
    return (
      <View>
        <TouchableHighlight onPress={this._imagePressed.bind(this)}>
          <Image
            blurRadius={this.state.radius}
            style={{ width: 320, height: 240 }}
            source={{
              uri:
                "https://4.img-dpreview.com/files/p/E~TS590x0~articles/3925134721/0266554465.jpeg"
            }}
            resizeMode="contain"
          />
        </TouchableHighlight>
      </View>
    );
  }
}

export default App;

根据点击量逐渐模糊图片（React-Native）

Blurring a picture gradually based on amounts of clicks (React-Native)

javascript

image

blur

button

react-native