全新dlc 多图层,远近中三个图层分别代表不同的明暗程度和下落速度来表现出层次感

相比之下这个dlc也是创建了一个全新的类来管理多图层LayeredRainManager
LayeredRainManager
dart
/// 多图层管理器
class LayeredRainManager {
final List<RainManager> layers;
final List<double> speedFactors;
final List<double> brightnessFactors;
LayeredRainManager({
required int layerCount,
required int dropsPerLayer,
required String charSet,
required Size size,
}) : layers = [],
speedFactors = [],
brightnessFactors = [] {
for (int i = 0; i < layerCount; i++) {
final speed = (1.0 - i * 0.3).clamp(0.3, 1.0);
final brightness = (1.0 - i * 0.3).clamp(0.3, 1.0);
layers.add(RainManager(charSet: charSet, dropCount: dropsPerLayer)
..setSize(size));
speedFactors.add(speed);
brightnessFactors.add(brightness);
}
}
void update() {
for (int i = 0; i < layers.length; i++) {
layers[i].update(scale: speedFactors[i]);
}
}
}
- layerCount 第X图层
- dropsPerLayer 每个图层雨滴数量
- charSet 文字
- size 画布大小
- layers 图层
- speedFactors 速度因子
- brightnessFactors 亮度因子
图层 | 速度 | 亮度 | 描述 |
---|---|---|---|
0 | 快(1.0) | 亮(1.0) | 近景图层 |
1 | 中(0.7) | 中(0.7) | 中景图层 |
2 | 慢(0.4) | 暗(0.4) | 远景图层 |
传参案例
dart
final size = ui.window.physicalSize / ui.window.devicePixelRatio;
_layeredManager = LayeredRainManager(
layerCount: 3,
dropsPerLayer: 30,
charSet: '01',
size: size,
);
根据传参案例来进一步分析多图层的实现方法 在传入参数后多图层管理器LayeredRainManager
会自动去处理数据,分成多个图层
dart
for (int i = 0; i < layerCount; i++) {
final speed =(1.0 - i * 0.3).clamp(0.3, 1.0);
final brightness = (1.0 - i * 0.3).clamp(0.3, 1.0);
layers.add(RainManager(charSet: charSet, dropCount: dropsPerLayer)
..setSize(size));
speedFactors.add(speed);
brightnessFactors.add(brightness);
}
处理后可以得到三个图层
图层 | 速度 | 亮度 | 描述 |
---|---|---|---|
0 | 快(1.0) | 亮(1.0) | 近景图层 |
1 | 中(0.7) | 中(0.7) | 中景图层 |
2 | 慢(0.4) | 暗(0.4) | 远景图层 |
多图层绘制 LayeredRainPainter
由于新增多个图层,所以绘制方法也会有所改变 具体的主要改动还是在传参, RainManager
变成了LayeredRainManager
绘制方法也多进行了一个遍历
dart
for (int i = 0; i < manager.layers.length; i++) {
final rain = manager.layers[i];
final brightnessFactor = manager.brightnessFactors[i];
for (final drop in rain.drops){...}//原有的遍历雨滴
}
dart
/// 绘制多层字符雨
class LayeredRainPainter extends CustomPainter {
final LayeredRainManager manager;
final double charSize;
final Animation<double> repaint;
LayeredRainPainter({
required this.manager,
required this.charSize,
required this.repaint,
}) : super(repaint: repaint);
@override
void paint(Canvas canvas, Size size) {
final Paint paint = Paint();
for (int i = 0; i < manager.layers.length; i++) {
final rain = manager.layers[i];
final brightnessFactor = manager.brightnessFactors[i];
for (final drop in rain.drops) {
final count = drop.frameCount.clamp(1, 10);
for (int j = 0; j < count; j++) {
final brightness = (1.0 - j * 0.1) * brightnessFactor;
final color = HSVColor.fromAHSV(1.0, 120, 1.0, brightness).toColor();
final textPainter = TextPainter(
text: TextSpan(
text: '0',
style: TextStyle(
fontSize: charSize,
color: color,
fontWeight: FontWeight.bold,
),
),
textDirection: TextDirection.ltr,
)..layout();
textPainter.paint(canvas, Offset(drop.x, drop.y + j * charSize));
}
}
}
}
@override
bool shouldRepaint(covariant CustomPainter oldDelegate) => true;
}