时间戳

首页 > 解决方案 > 在 Flutter 中绘制 3D 散点图

flutter - 在 Flutter 中绘制 3D 散点图

问题描述

我正在寻找一个颤振包来绘制给定一系列 X、Y、Z 和 R、G、B 值的 3D 散点图。希望输出如下内容：https ://photos.app.goo.gl/VtwTxnqHY4ahc24u6

我知道echarts可以做 3d 散点图，但我需要它在移动和网络上工作

问题：有人知道我可以用来为移动设备和网络绘制 3d 散点图的颤振包吗？

标签： flutterflutter-web

解决方案

如果有意愿有办法，我不知道任何包，但你可以很容易地自己实现它：

1：导入包vector_math64

import 'package:vector_math/vector_math_64.dart' as vm;

2：制作投影矩阵。

vm.Matrix4 perspectiveMatrix = vm.makePerspectiveMatrix(vm.radians(150), 16/9,3, 20);

3：制作一个 Vector3 来移动你的绘图，一个 3x3 旋转矩阵来旋转你的绘图，另一个 Vector3 来缩放你的绘图。

vm.Vector3 location = vm.Vector3.array([100,-200,300]);

vm.Matrix3 rotation = vm.Matrix3.identity();
rotation.setRotationX(vm.radians(xRot));
rotation.setRotationY(vm.radians(yRot));
rotation.setRotationZ(vm.radians(zRot));

vm.Vector3 scale = vm.Vector3.array([1,1,1]);

4：使用这些，制作从本地坐标系到世界坐标系的投影矩阵

vm.Matrix4 localToWorldMatrix = Matrix4.compose(location, vm.Quaternion.fromRotation(rotation), scale);

5：您的最终投影矩阵将是：

vm.Matrix4 finalMatrix = perspectiveMatrix*localToWorldMatrix;

6：如果您在每次绘制/更新之前更改旋转重新计算矩阵

7：制作自定义画家

8：将您的点列表保存为 vm.Vector3 的

List<vm.Vector3> points = [...]

9：在你的更新函数中：用vector.clone()复制你所有的点，应用投影并将它们放入另一个列表

List<vm.Vector3> cloneList = [];
points.forEach((element) { 
  vm.Vector3 clone = element.clone();
  clone.applyProjection(finalMatrix);
  cloneList.add(clone);
});

10：在你的draw函数里面画点：

cloneList.forEach((element) {   
  canvas.drawCircle(Offset(element.storage[0]*size.width,element.storage[1]
  *size.height), 1, Paint()..color = Colors.red);
});

11：为您的坐标系制作 4 个点：(0,0,0),(10,0,0),(0,10,0),(0,0,10)。

12：将投影应用到坐标系的 4 个点，画线，一切顺利

推荐阅读