如何在Flutter组件中加载展示DWG/DXF文件及实现3D视图？

一、现有Flutter包尝试 #

1. DXF解析相关包 #

• dxf 包：仅支持解析DXF文件的基础矢量数据（线条、圆、文本等），能提取实体信息，但无内置渲染组件，需自行基于Canvas或CustomPainter实现绘制。
  示例代码片段：

  import 'package:dxf/dxf.dart';
  import 'dart:io';
  
  Future<void> loadDxfFile() async {
    final file = File('path/to/your/file.dxf');
    final dxfContent = await file.readAsString();
    final dxf = DxfFile.fromString(dxfContent);
    // 提取线条实体
    final lines = dxf.entities.whereType<LineEntity>().toList();
    // 后续可将实体数据传入自定义绘制组件
  }
  

• 注意：该包不支持DWG格式，仅处理DXF。

2. 3D视图相关 #

Flutter生态中无直接支持CAD 3D渲染的包，若需3D视图，需先将CAD文件转换为OBJ、GLB等通用3D格式，再通过flutter_3d_obj或three_dart这类3D引擎包加载，无法直接解析DWG/DXF的原生3D数据。

二、原生集成方案（推荐） #

DWG是AutoCAD私有格式，无纯Flutter开源解析方案，必须依赖原生库：

1. Android端 #

• 可集成AutoCAD官方AutoCAD Mobile SDK，或开源DWG解析库LibreDWG，解析后通过MethodChannel将矢量数据传递给Flutter；渲染可选择原生端用Canvas绘制后传Bitmap给Flutter，或把解析后的坐标、图形类型等数据传给Flutter，用CustomPainter绘制。

2. iOS端 #

• 编译LibreDWG的iOS版本集成，或使用AutoCAD iOS SDK，同样通过MethodChannel与Flutter交互，传递解析后的图形数据。

3. 跨平台桥接示例（Flutter端） #

import 'package:flutter/services.dart';

static const platform = MethodChannel('com.example/cad_parser');

Future<List<Map<String, dynamic>>> parseDwgFile(String filePath) async {
  try {
    final List<dynamic> result = await platform.invokeMethod('parseDwg', {'path': filePath});
    return result.cast<Map<String, dynamic>>();
  } on PlatformException catch (e) {
    print("解析失败: ${e.message}");
    return [];
  }
}

原生端接收调用完成解析后，返回结构化的图形数据，Flutter端基于这些数据实现绘制。

三、基础交互实现（缩放、平移） #

通过GestureDetector结合Transform组件即可实现：

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

class CadView extends StatefulWidget {
  final List<dynamic> entities;
  const CadView({super.key, required this.entities});

  @override
  State<CadView> createState() => _CadViewState();
}

class _CadViewState extends State<CadView> {
  double _scale = 1.0;
  Offset _offset = Offset.zero;
  Offset _previousFocalPoint = Offset.zero;

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onScaleUpdate: (ScaleUpdateDetails details) {
        setState(() {
          _scale *= details.scale;
          _offset += details.focalPoint - _previousFocalPoint;
          _previousFocalPoint = details.focalPoint;
        });
      },
      onScaleStart: (ScaleStartDetails details) {
        _previousFocalPoint = details.focalPoint;
      },
      child: Transform(
        transform: Matrix4.identity()
          ..translate(_offset.dx, _offset.dy)
          ..scale(_scale),
        child: CustomPaint(
          painter: CadPainter(entities: widget.entities),
          size: Size.infinite,
        ),
      ),
    );
  }
}

class CadPainter extends CustomPainter {
  final List<dynamic> entities;
  CadPainter({required this.entities});

  @override
  void paint(Canvas canvas, Size size) {
    // 根据实体数据绘制线条、图形等
    final paint = Paint()..color = Colors.black..strokeWidth = 1;
    for (var entity in entities) {
      if (entity['type'] == 'line') {
        canvas.drawLine(
          Offset(entity['startX'], entity['startY']),
          Offset(entity['endX'], entity['endY']),
          paint,
        );
      }
    }
  }

  @override
  bool shouldRepaint(covariant CadPainter oldDelegate) => oldDelegate.entities != entities;
}

四、3D视图实现思路 #

1. 先通过原生工具或服务将DWG/DXF文件转换为GLB/OBJ等通用3D格式（可通过AutoCAD导出，或用LibreDWG解析后转换）；
2. 使用flutter_gl或three_dart这类Flutter 3D包加载转换后的模型，实现旋转、缩放等交互。

内容的提问来源于stack exchange，提问作者Gaurav