摘要：当古老的东方水墨遇上现代的柏林噪声，数字世界便产生了一种介于确定与混沌之间的美感。本文将探讨如何在 Flutter 框架下，利用流场算法模拟墨迹在宣纸上的扩散与沉淀，在鸿蒙设备上重构那份“墨分五色”的远山意境。

📖 目录

1. 🖌️ 序言：代码里的文人骨气
2. 🌊 数学内核：柏林噪声与墨迹模拟
   • 墨迹生成的三个维度
   • 🔄 水墨生成逻辑流程图
3. 💻 Flutter 核心实现深度剖析
   • 1. 核心梯度噪声引擎
   • 2. 水墨山水 Painter 实现
4. 🎨 意境调优：从计算到写意
5. 🏛️ 结语

🖌️ 序言：代码里的文人骨气

中国水墨画的精髓在于“意”。那份在宣纸上漫无目的却又遵循物理规律的墨迹扩散，本质上是一场关于概率与流体动力学的博弈。在数字领域，柏林噪声 (Perlin Noise) 正是模拟这种自然随机性的最佳工具。

通过在鸿蒙系统上运行这些复杂的噪声算法，我们不仅是在绘制图像，更是在用数字化的手段向传统致敬。这种“以方寸之间，纳万里江山”的理念，与鸿蒙系统追求的极简、自如的交互体验有着深刻的精神契合。

🌊 数学内核：柏林噪声与墨迹模拟

柏林噪声不同于普通的白噪声，它具有平滑过渡的特征，能够模拟山脉、云朵以及最重要的——墨水在纤维间的渗流。

墨迹生成的三个维度

🔄 水墨生成逻辑流程图

💻 Flutter 核心实现深度剖析

在 Flutter 中，由于没有内置的 noise 库，我们通过自定义的梯度噪声函数来实现墨色的层次感。

1. 核心梯度噪声引擎

利用线性插值（lerp）与平滑函数（fade）实现连续的随机性。

class InkNoise {
  /// 模拟柏林噪声的平滑函数：6t^5 - 15t^4 + 10t^3
  double _fade(double t) => t * t * t * (t * (t * 6 - 15) + 10);

  /// 基于坐标生成伪随机梯度，决定墨迹流向
  double calculate(double x, double y, double scale) {
    // 简化版的 2D 梯度计算逻辑
    // 通过正弦函数模拟随机晶格点
    double nx = x * scale;
    double ny = y * scale;
    
    // 采样与插值过程（核心代码片段）
    // ... 在实际 Painter 中通过大量采样构建图场 ...
    return (sin(nx) + cos(ny)) * 0.5; 
  }
}

2. 水墨山水 Painter 实现

在 paint 方法中，我们采用“重叠遮盖法”来构建远、中、近景。

class InkLandscapePainter extends CustomPainter {
  final double density; // 墨色浓度
  final double fog;     // 云雾感

  @override
  void paint(Canvas canvas, Size size) {
    // 绘制三层山脉，每层具有不同的灰度与噪声特征
    _drawMountain(canvas, size, 
      height: size.height * 0.4, 
      color: Colors.black12, 
      scale: 0.005, 
      blur: 20.0); // 远景：浅墨、高虚化
      
    _drawMountain(canvas, size, 
      height: size.height * 0.6, 
      color: Colors.black45, 
      scale: 0.01, 
      blur: 10.0);  // 中景：中墨
      
    _drawMountain(canvas, size, 
      height: size.height * 0.8, 
      color: Colors.black, 
      scale: 0.02, 
      blur: 2.0);   // 近景：焦墨、细节丰富
  }

  void _drawMountain(Canvas canvas, Size size, {
    required double height, 
    required Color color, 
    required double scale, 
    required double blur
  }) {
    final path = Path()..moveTo(0, size.height);
    final paint = Paint()
      ..color = color.withOpacity(density)
      ..maskFilter = MaskFilter.blur(BlurStyle.normal, blur);

    for (double x = 0; x <= size.width; x += 2) {
      // 利用正弦叠加模拟柏林噪声的山脊线
      double y = height + 
        sin(x * scale) * 50 + 
        sin(x * scale * 2.5) * 20 + 
        (1.0 - fog) * 30;
      path.lineTo(x, y);
    }
    path.lineTo(size.width, size.height);
    canvas.drawPath(path, paint);
  }
}

🎨 意境调优：从计算到写意

数字水墨的难点在于“晕染”的模拟。

• 多层叠加：不要只画一条线，而是将数十条微弱差异的曲线重叠，利用 withOpacity 产生自然的墨色沉淀。
• 边缘模糊：利用 MaskFilter.blur 模拟水份在宣纸上的渗透效果。
• 留白艺术：在鸿蒙的高清屏幕上，背景采用微黄的“古纸色”（如 #F5F5DC），给算法生成的图像留出呼吸的空间。

🏛️ 结语

柏林噪声赋予了冰冷代码以温度，而水墨艺术则赋予了算法以灵魂。在鸿蒙跨平台开发的实践中，这种对东方意境的重构，不仅是技术上的挑战，更是一次审美的洗礼。我们追求的，是在数字的精准与艺术的模糊之间，找到那个令用户心旷神怡的平衡点。

欢迎加入开源鸿蒙跨平台社区：https://openharmonycrossplatform.csdn.net

本文由 HarmonyOS & Flutter 计算美学专题小组出品。