【无标题】InteractiveViewer组件 矩阵变换

最新推荐文章于 2024-07-22 00:27:05 发布
最新推荐文章于 2024-07-22 00:27:05 发布
阅读量155 收藏
点赞数
文章标签： flutter
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zhuzhibo_xiao/article/details/127412317
版权

需求：仿地图，地图放缩移动，但地图上的mark不放缩
onInteractionUpdate回调可以得到实时的缩放比例。但有一个坑，通过ScaleUpdateDetails获得scale不是实时的比例。因为details.scale 是相对于当前交互的，这会带来一个问题，当放缩到一半松手后再次放缩这时的scale是1而不是累加。

所以我们采用transformationController获得变换的scale和水平、竖直方向的偏移量
在这里插入图片描述
根据InteractiveViewer实现缩放和移动是通过Matrix4的矩阵变换实现的。所以我们只需要反向计算marker的坐标再重新绘制就可以了。反向计算坐标的方法如下：
在这里插入图片描述
还有一个简便方法，直接除以缩放比即可

微尘智慧
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
【Flutter】使用InteractiveViewer实现ScrollableView的放大缩小移动
fight__fight的博客
06-26 2011
Flutter使用Interactiveviewer实现可滚动列表的放缩和移动，处理了可滚动列表在放缩之后的种种异常case
PDF interactive viewer-开源
05-12
压缩包中的"Xiasma-dist-xiasma-20060531"文件可能是Xiasma的一个发行版本，包含了运行该软件所需的全部组件。用户在下载并解压后，按照安装指南进行操作，即可在自己的设备上使用这款强大的PDF查看器。 总的来说，...
Flutter InteractiveViewer
Leove的专栏
06-17 347
可以对图片放大，缩小，左右移动等操作 /// Flutter code sample for InteractiveViewer // This example shows a simple Container that can be panned and zoomed. import 'package:flutter/material.dart'; void main() => runApp(const MyApp()); /// This is the main application
Flutter 中的 InteractiveViewer 小部件：全面指南
smileKH的博客
05-19 447
提供了一个可交互的视图，用户可以对这个视图执行缩放、旋转和平移操作。它非常适合实现如图像查看器、图形编辑器或任何需要用户能够自由探索内容的功能。// ... 自定义绘制逻辑 ...),
Flutter InteractiveViewer 支持平移和缩放子Widget
代码小疯子
12-28 3050
在码农的世界里，优美的应用体验，来源于程序员对细节的处理以及自我要求的境界，年轻人也是忙忙碌碌的码农中一员，每天、每周，都会留下一些脚印，就是这些创作的内容，有一种执着，就是不知为什么，如果你迷茫，不妨来瞅瞅码农的轨迹。 优美的音乐节奏带你浏览这个效果的编码过程 坚持每一天，是每个有理想青年的追求 追寻年轻人的脚步，也许你的答案就在这里 如果你迷茫 不妨来瞅瞅这里 1 InteractiveViewer 是什么 ？ InteractiveViewer 是Flutter 中一个可以将子Widget进.
Flutter 中的 InteractiveViewer：轻松实现交互性
爱喝水程序员的博客
01-15 812
是一个用于支持用户交互的Flutter小部件。它允许用户通过手势来控制其子项的平移、缩放和旋转。这使得用户可以更灵活地浏览和操作应用程序中的内容，特别是对于包含大量数据或图像的应用程序而言，是一个非常有用的工具。
flutter 最新版本 1.20.1 Widget之InteractiveViewer 学习总结
wdx_1136346879的博客
08-10 1462
flutter 最新版本 1.20.1 InteractiveViewer 学习总结 Flutter 1.20版本引入了一个新的小部件 InteractiveViewer。该 InteractiveViewer 设计用于建设普通类型的交互性到应用程序，如: 平移，缩放和拖动“N”下降甚至大小调整， 这个例子展示了如何创建一个的表格 3列20行 一个for循环 行和列用不同的色彩分隔开 scaleEnabled 为 true 可以放大缩小 表格 @override Widget bui
flutter_pdf_render:Flutter软件包，可呈现PDF页面
03-07
4. **滚动与缩放**：为了实现PDF的滚动和缩放，可以使用`SingleChildScrollView`和`InteractiveViewer`等Flutter组件。`InteractiveViewer`提供了平移和缩放的功能，可以与PDF页面完美结合。 5. **事件处理**：你...
使用Flutter实现uplabs上GoogleMaps的UI挑战
08-10
【标题】"使用Flutter实现uplabs上Google Maps的UI挑战"是关于利用Flutter框架构建一个类似于Google Maps的用户界面的任务。在Flutter中，这涉及到理解布局、颜色、图像以及地图集成等多个方面。Flutter是一个由...
Flutter中实现图片缩放功能详细教程
m0_69332898的博客
03-11 874
使用InteractiveViewer包裹Image组件以支持通过手势进行缩放和平移，调整minScale和maxScale属性来限制缩放范围。InteractiveViewer提供了多种属性，如constrained、scaleEnabled、和panEnabled，用于自定义缩放体验。本教程旨在帮助开发者在Flutter应用中轻松实现图片的缩放查看功能，适用于图像浏览和地图查看等多种场景。
Flutter实现电影院选座效果
Misdirection_XG的博客
01-11 1753
导语 接到了一个仿电影院的需求，上周几乎是找遍了百度，谷歌，stackoverflow。均没有找到用flutter实现的效果，那只能自己写一个了。本文只讲思路，具体实现还需各位看官自己动手。只要看懂了下面的思路，实现起来非常简单。 直接上效果图 竖屏： 横屏： 初始化自适应屏幕的放大缩小效果： 布局分析 中间的座位=>矩阵，通过Column嵌套Row实现，不能通过GridView实现（滑动冲突，下文会说明） 左侧导航条=>一个简单的Column（不能用ListView，同样会造成滑动冲突.
10 个派上用场的 Flutter 小部件
坚果的博客
06-09 568
尝试学习一门新语言可能会令人恐惧和厌烦。很多时候，我们希望我们知道早先存在的某些功能。在今天的文章中，我将告诉你我希望早点知道的最方便的几个Flutter小部件。Spacer 创建一个可调整的空白空间，它占据 Flex 容器中小部件之间的任何剩余空间，例如行或列。 TextButton.icon 在创建带有图标的按钮时，此小部件取代了使用行的需要。您必须提供图标和标签。 Wrap 它根据提供的方向值水平或垂直显示其子项。它可以用来代替 Gridview。这个小部件是响应式的，无需做太多就可以适应不同的屏幕尺
Flutter上InteractiveViewer展示多层级image图片，ColorFilter对图片的对比度，亮度、饱和度、黑白色值反转、图片动态缩放处理
u011498329的专栏
09-14 1711
1、需求概述： 一套代码，到处运行，节约开发人力成本+方便统一编码方式、方便维护（番外：在一年多前自己对Flutter-dart也略有涉猎，不过尚未完成独立完整的app项目），本着这样的目的和尝新的心态，在加上公司的业务和技术栈规划，直接入手撸了一份Flutter Android pad的项目（。项目中有一个功能，需求如下： a、展示一张底图，在底图的基础上，可以根据位置，动态添加logo图片或者接口返回的Mark图片，有点类似底图上的打点，根据位置打mark点，之后形成的多图层可以支持整体手势缩小放大
Flutter常用命令
我叫柱子哥
07-22 832
CocoaPods 是 iOS 和 macOS 项目中常用的依赖管理工具。它的实现原理涉及依赖解析、Podspec 处理、Xcode 项目集成等多个方面。下面将详细讲解 CocoaPods 的实现原理。
方案-基于云架构的校园信息化建设方案.pdf
最新发布
07-29
方案-基于云架构的校园信息化建设方案.pdf
【创新未发表】Matlab实现蛇群优化算法SO-Kmean-Transformer-LSTM负荷预测算法研究.rar
07-29
1.版本：matlab2014/2019a/2021a 2.附赠案例数据可直接运行matlab程序。 3.代码特点：参数化编程、参数可方便更改、代码编程思路清晰、注释明细。 4.适用对象：计算机，电子信息工程、数学等专业的大学生课程设计、期末大作业和毕业设计。 5.作者介绍：某大厂资深算法工程师，从事Matlab算法仿真工作10年；擅长智能优化算法、神经网络预测、信号处理、元胞自动机等多种领域的算法仿真实验，更多仿真源码、数据集定制私信+。 替换数据可以直接使用，注释清楚，适合新手
【创新未发表】Matlab实现北方苍鹰优化算法NGO-Kmean-Transformer-LSTM组合状态识别算法研究.rar
07-29
1.版本：matlab2014/2019a/2021a 2.附赠案例数据可直接运行matlab程序。 3.代码特点：参数化编程、参数可方便更改、代码编程思路清晰、注释明细。 4.适用对象：计算机，电子信息工程、数学等专业的大学生课程设计、期末大作业和毕业设计。 5.作者介绍：某大厂资深算法工程师，从事Matlab算法仿真工作10年；擅长智能优化算法、神经网络预测、信号处理、元胞自动机等多种领域的算法仿真实验，更多仿真源码、数据集定制私信+。 替换数据可以直接使用，注释清楚，适合新手
【创新未发表】Matlab实现蝗虫优化算法GOA-Kmean-Transformer-BiLSTM组合状态识别算法研究.rar
07-29
1.版本：matlab2014/2019a/2021a 2.附赠案例数据可直接运行matlab程序。 3.代码特点：参数化编程、参数可方便更改、代码编程思路清晰、注释明细。 4.适用对象：计算机，电子信息工程、数学等专业的大学生课程设计、期末大作业和毕业设计。 5.作者介绍：某大厂资深算法工程师，从事Matlab算法仿真工作10年；擅长智能优化算法、神经网络预测、信号处理、元胞自动机等多种领域的算法仿真实验，更多仿真源码、数据集定制私信+。 替换数据可以直接使用，注释清楚，适合新手
flutter组件放大缩小
09-25
另一种方法是使用`InteractiveViewer`组件。这个组件提供了用手势进行缩放和平移的功能。我们可以通过设置`maxScale`和`minScale`属性来控制最大和最小的缩放比例。下面是一个例子： ```dart InteractiveViewer( ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值