javascript - 根据点击量逐渐模糊图片(React-Native)

Question

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

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

Answer 1

图像组件有一个名为“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;