第四十六回：Transform Widget

最新推荐文章于 2025-12-03 10:58:45 发布
原创 最新推荐文章于 2025-12-03 10:58:45 发布 · 596 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#flutter #transform #translate #rotate #flip

TransformWidget是Flutter中的一个容器组件，用于对子组件进行平移、旋转、缩放和翻转操作。通过Transform的translate、rotate、scale和flip静态方法，可以实现各种变换效果。文中提供了具体的代码示例，如使用Transform对Text组件进行平移、旋转和翻转，并提示可参考上一章节的内容来实现缩放操作。

文章目录


我们在上一章回中介绍了Checkbox Widget相关的内容,本章回中将介绍 Transform Widget.闲话休提，让我们一起Talk Flutter吧。

概念介绍

我们在这里说的Transform是一种容器类widget,它和Container组件类似。它可以包含其它的组件，并且对被包含的组件进行平移，旋转、翻转和缩放操作。本章回中将详细介绍它的使用方法。

其实我们在上一章回中已经使用过该组件，只是没有详细介绍而已。Checkbox有一个缺点就是无法控制自身的大小，我们可以将它放在Transform组件中，然后对它进行缩放操作，进而达到控制大小的目的。

使用方法

通常情况下使用组件时需要通过组件的构造方法来创建组件，Transform组件则不然，它提供了静态方法，通过静态方法可以创建Transform组件并且对其中的组件进行相关的操作，下面是常用的构造方法以及其功能：

  • translate方法：主要用来对被包含组件进行平移操作,通过参数offset来设置平移的距离；
  • rotate方法：主要用来对被包含组件进行旋转操作,通过参数angle来设置旋转的角度；
  • scale方法：主要用来对被包含组件进行缩放操作，通过参数scale来设置缩放的倍数；
  • flip方法：主要用来对被包含组件进行翻转操作,通过参数flipX来设置左右倒置，通过参数flipY来设置上下翻转；

这四种中方法中都有一个child属性，用来指定被包含的组件，这是容器类组件的特点。

示例代码

最低0.47元/天 解锁文章
第十六篇：Lambda表达式：匿名函数对象的艺术
厚积薄发的博客
10-21 124
Lambda表达式是C++11引入的重要特性，它简化了函数对象的创建，使代码更紧凑和可读。相比传统函数对象，Lambda具有以下优势： 内联定义：直接在调用处定义，避免代码分散 简洁语法：无需创建完整类或函数 上下文访问：通过捕获列表访问局部变量 维护便捷：相关逻辑集中在一处
第十四节《vtk中生成二维码模型并识别二维码信息》
yumeiguo的博客
10-09 259
4.采用微信二维码识别算法进行识别二维码，提示：二维码模型利用3D打印机打印出来后基本上是纯色，相机拍摄后识别难度较大，经过本人测试，采用微信二维码识别准确率高于其他传统算法，并且微信二维码识别算法已经收录到opencv4.5以上版本中。库官网：https://www.nayuki.io/page/qr-code-generator-library。库链接：https://github.com/nayuki/QR-Code-generator。QR-Code-generator 库。
vue使用antv-x6 绘制流程图DAG图（二）
贵林之恋的博客
01-30 3091
【代码】vue使用antv-x6 绘制流程图DAG图（二）
AntV X6流程图绘制程序（官方示例纯javascript+html+css）
yao136的专栏
08-09 7747
纯javascript+html+css绘制流程图，使用antv x6
「AntV」使用AntV X6实现流程编排设计器
热门推荐
沐唐风宋雨
07-05 1万+
基于AntV X6低成本定制能力：AntV X6是基于HTML和SVG的图表编辑引擎，提供了丰富的API和自定义事件，可以通过编写JavaScript代码，快速实现自定义的图表样式、布局和交互方式，满足具体业务需求。高度可扩展性：AntV X6提供了众多内置扩展，包括DAG图、ER图、流程图等应用，可以帮助你根据自己的需要，自由扩展和定制功能和组件，实现更加灵活的业务需求。
AntV X6流程图绘制程序
shinergx的博客
12-11 1502
X6 绘制流程图
【Qt系列】Graphics View框架下实现自定义item类的拖动
wuwenbin12的博客
12-23 3502
利用Qt View自带的功能函数完成自定义item类的拖拽设置。
void Mw::initBoxWidgetWithObbData() { // === 1. 创建用于显示的 OBB 框架 actor === vtkSmartPointer<vtkPolyData> cube = createSingleColoredCube(); // 单位立方体 [-0.5,0.5] vtkSmartPointer<vtkPolyDataMapper> mapper = vtkSmartPointer<vtkPolyDataMapper>::New(); mapper->SetInputData(cube); obbActor = vtkActor::New(); obbActor->SetMapper(mapper); obbActor->GetProperty()->SetEdgeColor(0, 1, 0); // 绿边 obbActor->GetProperty()->SetLineWidth(2); obbActor->GetProperty()->SetOpacity(0.7); pointCloudRenderer->AddActor(obbActor); // === 2. 获取 OBB 参数（来自你的 JSON）=== double pos_x = 27.19659302729935; double pos_y = -1.0806391767250558; double pos_z = 2.0502098276214245; double rot_x_rad = 0.08325045738799344; // 弧度 double rot_y_rad = -0.10858955119739604; double rot_z_rad = -0.22469717039816792; double scale_x = 46.19283650079597; // 总长度 X double scale_y = 7.944462581692713; // 总长度 Y double scale_z = 4.417756175940248; // 总长度 Z // 转换为角度（VTK 的 RotateX/Y/Z 接受角度） double rot_x_deg = vtkMath::DegreesFromRadians(rot_x_rad); double rot_y_deg = vtkMath::DegreesFromRadians(rot_y_rad); double rot_z_deg = vtkMath::DegreesFromRadians(rot_z_rad); // === 3. 构造变换：T * R * S（注意顺序！PostMultiply = 按代码顺序执行）=== vtkNew<vtkTransform> initialTransform; initialTransform->PostMultiply(); // 推荐：按调用顺序执行 initialTransform->Translate(pos_x, pos_y, pos_z); // 平移到中心 initialTransform->RotateZ(rot_z_deg); // Z 最后（内旋） initialTransform->RotateY(rot_y_deg); // Y 次之 initialTransform->RotateX(rot_x_deg); // X 最先 initialTransform->Scale(scale_x, scale_y, scale_z); // 缩放到实际尺寸 // === 4. 创建 BoxWidget 和 Representation === boxWidget = vtkBoxWidget2::New(); vtkBoxRepresentation* rep = vtkBoxRepresentation::SafeDownCast(boxWidget->GetRepresentation()); // 设置初始变换 rep->SetTransform(initialTransform); // 启用交互功能 rep->SetTranslationEnabled(true); rep->SetRotationEnabled(true); rep->SetScalingEnabled(true); // 外观样式 rep->GetOutlineProperty()->SetColor(1, 1, 0); // 黄色边框 rep->GetSelectedOutlineProperty()->SetColor(1, 0, 0); // 选中红色 rep->GetSelectedOutlineProperty()->SetLineWidth(3); // === 5. 关联到渲染窗口 === boxWidget->SetInteractor(vtkWidget->GetRenderWindow()->GetInteractor()); boxWidget->SetRepresentation(rep); // === 6. 添加同步回调：保持 obbActor 与 widget 一致 === class BoxCallback : public vtkCommand { public: static BoxCallback* New() { return new BoxCallback; } Mw* mainWindow = nullptr; vtkActor* actor = nullptr; void Execute(vtkObject*, unsigned long event, void*) override { if (!actor || !mainWindow) return; vtkBoxWidget2* w = vtkBoxWidget2::SafeDownCast(caller); vtkBoxRepresentation* r = vtkBoxRepresentation::SafeDownCast(w->GetRepresentation()); vtkTransform* t = vtkTransform::New(); r->GetTransform(t); actor->SetUserTransform(t); // 结束交互时更新投影 if (event == vtkCommand::EndInteractionEvent) { mainWindow->updateOBBProjection(); } t->Delete(); } }; BoxCallback* cb = BoxCallback::New(); cb->mainWindow = this; cb->actor = obbActor; boxWidget->AddObserver(vtkCommand::InteractionEvent, cb); boxWidget->AddObserver(vtkCommand::EndInteractionEvent, cb); cb->Delete(); // === 7. 开启 widget === boxWidget->On(); // === 8. 初始同步一次 actor 变换 === obbActor->SetUserTransform(initialTransform); // === 9. 渲染更新 === vtkWidget->GetRenderWindow()->Render(); } 这是我原本的，在这里面设置
10-26
double scale[3] = {46.19283650079597, 7.944462581692713, 4.417756175940248}; setupInitialTransform(initialTransform, pos, rot, scale); ``` --- ## ✅ 总结：如何安全设置初始状态？ | 步骤 | 要点 | |-...
UE4运用C++和框架开发坦克大战教程笔记（十五）（第46~48集）
q446013924的博客
01-24 1360
本篇笔记内容包括：批量加载 UClass 资源、加载并创建单个资源对象、加载并创建多个同类型资源对象
[译] 使用 Flutter 制作 3D 翻转动画，赶紧收藏备战金三银四
m0_61418295的博客
09-03 6787
children: [ ClipRect( child: Align( alignment: Alignment.topCenter, heightFactor: 0.5, child: child, )), Padding( padding: EdgeInsets.only(top: 2.0), ), ClipRect( child: Align( alignment:...
【前端】AntV X6学习笔记
lcukyNwa的博客
11-16 4574
/ 注册自定义模板节点 'custom-image'width: 62, // 节点宽度height: 62, // 节点高度markup: [selector: 'body', // 节点外部矩形},},},],attrs: {body: {stroke: 'green', // 外部矩形边框颜色fill: 'pink', // 外部矩形填充颜色},image: {refWidth: '100%', // 图片宽度和节点宽度一致。
流程图编辑器-拖拉拽-antV X6流程可视化-VUE
weixin_47917431的博客
09-03 3838
上个我记录的relation-graph关系图本来是以后有需要我可以翻阅自己的博客可以当作备胎，使用的时候看一下让自己也知道还有个这么个不错的库，新的项目要有一个流程编辑器，relation-graph提供例子，无论动画效果还是操作手感都挺不错，唯一的遗憾是阅读示例代码要钱（上一个文章C友留言说VIP的，我本以为可以一直白嫖B站视频，没想到要再次白嫖的时候，一个都找不到了），所以我选择了这个，还是阿里实在，不搞vip文档那些。
Flutter：手把手教你实现一个仿 Flipboard 图片3D翻转动画
weixin_34677811的博客
04-22 3180
Flutter：手把手教你实现一个仿 Flipboard 图片翻转动画 效果如上，通过观察可以发现这个动画分为三个部分 底部翘起来 转起来 右边翘起来 三维图像投影到二维平面 图片绕着 x 轴旋转，左侧视图为旋转后投影到二位平面的图片，右侧为旋转过程中的三维视图。 过程一 可以把图片分成上下两部分，上半边完全没动，下半部分绕着 x 轴旋转 ##过程二 过程二稍复杂，先看其中某一帧的情况 ...
AntV X6制作画板工具（图形，线段，图片上传）
qq_38980678的博客
07-31 2307
使用upload上传组件时，需要在接口调用成功之后的函数中进行图片展示，action调用接口，formatter配合拿取后端接口返回的图片数据2.upload内部只可包含一个标签元素否则会失效3.保存画布元素之后，可能会出现img的url丢失的情况，请提前做好存值准备4.使用input进行图片文件上传，需要将文件进行base64格式转换之后才可以在页面上成功展示（使用upload组件可忽略此条）...
flutter--页面布局（Transform、Baseline、Wrap、Offstage）
weixin_43846755的博客
10-11 599
目录flutter--页面布局（Transform、Baseline、Wrap、Offstage）Transform(矩阵转换)Baseline(基准线布局)Wrap(按宽高自动换行布局) flutter–页面布局（Transform、Baseline、Wrap、Offstage） Transform(矩阵转换) 作用：做矩形变换-------可以对它的child做平移、旋转、缩放等操作 主要属性表： 属性名 类型 说明 transform Matrix4 一个4*4矩阵。 orig
Flutter使用VS Code打包app
u010112509的博客
12-03 181
本文介绍了Flutter开发环境的完整配置流程。首先在VSCode中安装Flutter和Dart插件，下载Flutter镜像源并配置环境变量。接着安装Android Studio及对应SDK，配置Java和Android相关环境变量。最后详细说明了创建Flutter项目、修改gradle源以及打包APK的具体步骤，包括设置本地gradle路径和构建release版本APK的命令。整个配置过程涵盖了从开发工具安装到项目构建的全流程。
鸿蒙分布式能力与Flutter集成：Flutter三方库鸿蒙适配实践
最新发布
nanxuan521的专栏
12-03 435
// 设备信息模型});?'',?'Unknown',?'unknown',?false,/// 分布式设备发现插件/// 初始化插件并开始监听设备发现/// [serviceId]：用于发现的业务标识符try {/// 获取当前已发现的设备列表try {return [];/// 在设备间发起一个认证请求（例如，建立连接前的安全握手）try {/// 停止发现并释放资源try {// 在Flutter应用中的使用示例/*
OpenHarmony 后台任务与 Flutter 生命周期协调：构建稳定可靠的混合应用
2502_93572233的博客
11-30 1299
本文探讨了在OpenHarmony生态中协调Flutter应用生命周期的策略。OpenHarmony的Ability生命周期模型与Flutter原生设计存在差异，可能导致后台资源浪费、任务异常终止等问题。文章提出了双向生命周期同步方案，通过MethodChannel建立OpenHarmony与Flutter的通信机制：当应用进入后台时触发Flutter任务暂停，返回前台时恢复任务。实践部分展示了在OpenHarmony端监听生命周期事件并通知Flutter，以及在Flutter端接收通知管理任务的完整代码实
Flutter图片库CachedNetworkImage鸿蒙适配：从原理到实践
nanxuan521的专栏
12-02 446
鸿蒙（HarmonyOS）生态的快速发展，给跨平台框架带来了新的适配需求。对于很多采用Flutter的团队来说，一个现实的问题摆在眼前：那些在Android和iOS上成熟的三方库，如何在鸿蒙上继续工作？作为Flutter社区里最常用的图片加载与缓存库，其能力深深扎根于原生平台——它依赖系统网络栈进行下载，依赖本地文件系统进行缓存。当运行环境切换到鸿蒙，这些依赖就需要被重新实现。
tf::Transform
08-06
### `tf::Transform` 的使用方法与坐标变换 在 ROS（Robot Operating System）中，`tf::Transform` 是用于表示坐标变换的核心数据结构之一。它能够存储一个刚体变换，包括平移（translation）和旋转（rotation）。...
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

talk_8

真诚赞赏，手有余香

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值