Flutter噪声纹理生成插件perlin的使用

Flutter噪声纹理生成插件perlin的使用

Perlin 是一个在 Dart 中实现的 Perlin 噪声算法。该库提供了一个单一函数 perlin2d，它接受噪声的尺寸和频率作为参数，同时还有一个可选的随机数生成器种子。

// 这将生成一个 10x10 的二维数组，其中包含随机的 Perlin 噪声。
final noise = perlin2d(width: 10, height: 10, frequency: 10);

example/generate_image.dart 文件中的示例展示了如何从生成的噪声创建一张图像：

noise

完整示例代码

下面是一个完整的 Flutter 示例代码，演示如何使用 perlin 插件来生成并显示噪声纹理。

首先，在 pubspec.yaml 文件中添加 perlin 依赖项：

dependencies:
  flutter:
    sdk: flutter
  perlin: ^0.1.0 # 请根据实际版本号进行调整

然后在 Dart 文件中编写以下代码：

import 'package:flutter/material.dart';
import 'package:perlin/perlin.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Perlin 噪声纹理'),
        ),
        body: Center(
          child: NoiseImage(),
        ),
      ),
    );
  }
}

class NoiseImage extends StatefulWidget {
  [@override](/user/override)
  _NoiseImageState createState() => _NoiseImageState();
}

class _NoiseImageState extends State<NoiseImage> {
  List<List<double>> noise;

  [@override](/user/override)
  void initState() {
    super.initState();
    // 生成噪声
    noise = perlin2d(width: 256, height: 256, frequency: 10);
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return CustomPaint(
      size: Size(256, 256),
      painter: NoisePainter(noise),
    );
  }
}

class NoisePainter extends CustomPainter {
  final List<List<double>> noise;

  NoisePainter(this.noise);

  [@override](/user/override)
  void paint(Canvas canvas, Size size) {
    final Paint paint = Paint()
      ..style = PaintingStyle.fill;

    final int width = noise.length;
    final int height = noise[0].length;

    for (int x = 0; x < width; x++) {
      for (int y = 0; y < height; y++) {
        // 将噪声值映射到颜色
        final double value = noise[x][y];
        final Color color = Color((value * 0xFFFFFF).toInt());

        canvas.drawRect(
          Rect.fromLTWH(x.toDouble(), y.toDouble(), 1, 1),
          paint..color = color,
        );
      }
    }
  }

  [@override](/user/override)
  bool shouldRepaint(CustomPainter oldDelegate) {
    return false;
  }
}

更多关于Flutter噪声纹理生成插件perlin的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter噪声纹理生成插件perlin的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


在Flutter中生成Perlin噪声纹理，可以使用perlin_noise插件。Perlin噪声是一种梯度噪声，常用于生成自然纹理，如云、地形、火焰等。下面是如何在Flutter中使用perlin_noise插件来生成噪声纹理的步骤。

1. 添加依赖

首先，在你的pubspec.yaml文件中添加perlin_noise插件的依赖：

dependencies:
  flutter:
    sdk: flutter
  perlin_noise: ^1.0.0

然后运行flutter pub get来安装依赖。

2. 导入包

在你的Dart文件中导入perlin_noise包：

import 'package:perlin_noise/perlin_noise.dart';

3. 生成噪声纹理

你可以使用PerlinNoise类来生成噪声纹理。以下是一个简单的示例，展示如何生成一个2D噪声纹理并将其显示在Flutter应用中。

import 'package:flutter/material.dart';
import 'package:perlin_noise/perlin_noise.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Perlin Noise Example')),
        body: NoiseTexture(),
      ),
    );
  }
}

class NoiseTexture extends StatelessWidget {
  final PerlinNoise perlin = PerlinNoise();

  [@override](/user/override)
  Widget build(BuildContext context) {
    return CustomPaint(
      size: Size(300, 300),
      painter: NoisePainter(perlin),
    );
  }
}

class NoisePainter extends CustomPainter {
  final PerlinNoise perlin;

  NoisePainter(this.perlin);

  [@override](/user/override)
  void paint(Canvas canvas, Size size) {
    final paint = Paint();
    final image = Image.raw(
      width: size.width.toInt(),
      height: size.height.toInt(),
      format: ImageByteFormat.rgba8888,
      bytes: generateNoiseTexture(size.width.toInt(), size.height.toInt()),
    );

    canvas.drawImage(image, Offset.zero, paint);
  }

  Uint8List generateNoiseTexture(int width, int height) {
    final noise = Uint8List(width * height * 4);

    for (int y = 0; y < height; y++) {
      for (int x = 0; x < width; x++) {
        final value = perlin.noise2D(x / 50.0, y / 50.0);
        final color = (value * 255).toInt();
        final index = (y * width + x) * 4;
        noise[index] = color;
        noise[index + 1] = color;
        noise[index + 2] = color;
        noise[index + 3] = 255; // Alpha channel
      }
    }

    return noise;
  }

  [@override](/user/override)
  bool shouldRepaint(covariant CustomPainter oldDelegate) {
    return false;
  }
}
回到顶部