Flutter 图片编辑板(一) 事件路由

一个图片编辑板,有两部分组成。编辑板和内容项。每一个内容项是被InteractiveViewer修饰的widget,具有缩放偏移的功能。

在图片编辑板上, 会有多个内容相,图片或文字(添加文字目前还没做过)。 当要编辑其中一个项目时,必然需要先选中这个项目。这就牵扯到事件问题。是不是点中哪个看到的项目,这个项目就会发出事件?实际情况是不会的。因为InteractiveViewer的大小是覆盖真个编辑板的,虽然看到的内容项小,其实是占用了所有编辑板的。这就导致事件无法传递给你看到并点击的内容项。

这就需要我们重新实现编辑板的事件路由。

1. 我们在InteractiveViewer再修饰一层GestureDetector。这样就能获取在编辑板上点击的所有事件!

2. 实时计算每一个内容项的事件区域,或者说在编辑板所占位置大小,也就是一个Rect对象。这里要注意缩放问题。

if (widget.transformationController != null &&widget.mergeItemInfo.eventArea != null) {double transX = widget.transformationController!.value.getTranslation().x; //the distance in UI review.double transY = widget.transformationController!.value.getTranslation().y;double scale = widget.transformationController!.value.getMaxScaleOnAxis();Rect eventArea = Rect.fromLTWH(widget.mergeItemInfo.initEventArea!.left * scale + transX,widget.mergeItemInfo.initEventArea!.top * scale + transY,widget.mergeItemInfo.initEventArea!.width * scale,widget.mergeItemInfo.initEventArea!.height * scale);widget.mergeItemInfo.eventArea = eventArea;}

3. 根据点击的事件位置,路由的遍历每一个内容项,查看是否命中,命中就返回事件给这个内容项。

  bool isInEventArea(TapDownDetails details) {Offset point = details.localPosition;if (eventArea != null) {return point.dx >= eventArea!.left &&point.dx <= eventArea!.left + eventArea!.width &&point.dy >= eventArea!.top &&point.dy <= eventArea!.top + eventArea!.height;}return false;}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/web/62535.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

数仓技术hive与oracle对比(一)

准备 包括软硬件环境、数据、测试数据三方面的准备内容。 环境 虚拟机软件virtualbox7&#xff0c;同样的虚拟机配置&#xff1a;内存2G、cpu一核&#xff0c;物理主机同一台macbookpro&#xff08;13-2020款&#xff09;&#xff0c;所以硬盘IO读写速度一致。 综上&#x…

AR眼镜_消费级工业AR智能眼镜主板硬件解决方案

AR眼镜的研发是一项复杂的软硬件集成工程&#xff0c;它需要在摄影、音频、交互和连接等多个方面提供卓越的基础体验&#xff0c;因此产品的每个细节都显得尤为重要。 在设计AR眼镜时&#xff0c;重量、体积和散热性能都是必须认真考量的关键因素。在芯片平台的选择上&#xff…

通信原理概论复习笔记(1)

1 绪论 消息: 通信系统传输对象, 信息的载体和物理表现形式. 信息: 消息的有效内容和内涵. 信号: 消息的传输载体. 模拟通信: 信源 → \to → 调制器 → \to → 信道(噪声) → \to → 解调器 → \to → 信宿. 数字通信: 信源 → \to → 信源编码(压缩数字化) → \to →…

ASPICE评估如何优化软件开发、测试和部署流程

ASPICE&#xff08;Automotive SPICE&#xff0c;即汽车软件过程改进及能力评定&#xff09;评估在提高软件开发、测试、部署的速度和质量方面发挥着重要作用。以下是ASPICE评估如何具体提高这些环节的具体方式&#xff1a; 一、提高软件开发效率 标准化流程&#xff1a;ASPIC…

【OpenCV】Canny边缘检测

理论 Canny 边缘检测是一种流行的边缘检测算法。它是由 John F. Canny 在 1986 年提出。 这是一个多阶段算法&#xff0c;我们将介绍算法的每一个步骤。 降噪 由于边缘检测易受图像中的噪声影响&#xff0c;因此第一步是使用 5x5 高斯滤波器去除图像中的噪声。我们在前面的章…

Ubuntu 安装 web 服务器

安装 apach sudo apt install apache2 -y 查看 apach2 版本号 apache2 -v 检查是否启动服务器 sudo service apache2 status 检查可用的 ufw 防火墙应用程序配置 sudo ufw app list 关闭防火墙 sudo ufw disable 更改允许通过端口流量 sudo ufw allow Apache Full 开启…

如何落地文件即服务?--- 基于makeself封装服务并启动

我通常想能不能给客户一个文件&#xff0c;然后客户通过执行这个简单的指令就可以吧&#xff0c;一个服务在本地起来&#xff1f; 这是一种文件即服务的思想&#xff0c;不知道你有没有类似的想法&#xff0c;当我发现https://makeself.io/ &#xff0c;我觉得它能很好的解决我…

mysql集群MHA方式部署

1. 基本信息 部署机器角色部署路径192.168.242.71MySQL-Mater MHA-NodeMySQL: /alidata1/mysql-5.7.43192.168.242.72MySQL-Slave MHA-NodeMHA-Node: /alidata1/admin/tools/mha4mysql-node-0.58192.168.242.73MySQL-Slave MHA-Node192.168.242.74MHA-ManagerMHA-Manager: …

【C++】8___继承

目录 一、基本语法 二、继承方式 三、对象模型 四、继承中的构造与析构的顺序 五、继承中同名成员处理 六、多继承语法 七、菱形继承 一、基本语法 好处&#xff1a;减少重复的代码 语法&#xff1a; class 子类 &#xff1a; 继承方式 父类 子类 也称为 派生类 父类…

Netty客户端接收不到服务端发送的数据问题

文章目录 前言问题描述相关代码解决方法 前言 环境 JDK&#xff1a;64位 jdk1.8.0_201 Netty&#xff1a;4.1.39.Final 问题描述 项目中使用Netty接受客户端的消息&#xff0c;客户端为硬件设备&#xff0c;在接受数据后发送数据到服务端。 同时因为客户端没有联网&#xff…

IDEA方法注释模板设置

目录 创建模板 新建模板&#xff1a;命名为* 设置模板内容-IDEA格式模板 设置模板应用场景 设置参数 创建模板 /**Enter这里我们也按照这种习惯来设置IDEA的方法注释&#xff1a;File-->Settings-->Editor-->Live Templates 先新建模板组&#xff0c;然后在模板组中…

vscode 配置C/C++环境控制台参数

您可以通过以下步骤在VS Code中配置C/C环境的控制台参数&#xff1a; 1&#xff0c;打开VS Code并进入您的C/C项目 2&#xff0c;点击左侧的"调试"图标&#xff0c;然后点击顶部的齿轮图标&#xff0c;选择“launch.json”。 3&#xff0c;在"launch.json&qu…

深度学习笔记之BERT(五)TinyBERT

深度学习笔记之TinyBERT 引言回顾&#xff1a;DistilBERT模型TinyBERT模型结构TinyBERT模型策略Transformer层蒸馏嵌入层蒸馏预测层蒸馏 TinyBERT模型的训练效果展示 引言 上一节介绍了 DistilBERT \text{DistilBERT} DistilBERT模型&#xff0c;本节将继续介绍优化性更强的知…

正则表达式——参考视频B站《奇乐编程学院》

智能指针 一、背景&#x1f388;1.1. 模式匹配&#x1f388;1.2. 文本替换&#x1f388;1.3. 数据验证&#x1f388;1.4. 信息提取&#x1f388;1.5. 拆分字符串&#x1f388;1.6. 高级搜索功能 二、原料2.1 参考视频2.2 验证网址 三、用法3.1 限定符3.1.1 ?3.1.2 *3.1.3 3.1.…

appium学习之二:adb命令

1、查看设备 adb devices 2、连接 adb connect IP:端口 3、安装 adb install xxx.apk 4、卸载 adb uninstall 【包名】 5、把对应目录下的1.txt文件传到手机sdcard下 adb push 1.txt /sdcard 6、进入对应的设备里 adb shell 7、切入sdcard目录 cd /sdcard 8、ls 查…

Tablesaw封装Plot.ly实现数据可视化

上文介绍tablesaw的数据处理功能&#xff0c;本文向你展示其数据可视化功能&#xff0c;并通过几个常用图表示例进行说明。 Plot.ly包装 可视化是数据分析的重要组成部分&#xff0c;无论你只是“查看”新数据集还是验证机器学习算法的结果。Tablesaw是一个开源、高性能的Java…

Python实现中国象棋

探索中国象棋 Python 代码实现&#xff1a;从规则逻辑到游戏呈现 中国象棋&#xff0c;这款源远流长的棋类游戏&#xff0c;承载着深厚的文化底蕴与策略智慧。如今&#xff0c;借助 Python 与 Pygame 库&#xff0c;我们能够在数字世界中复刻其魅力&#xff0c;深入探究代码背后…

互联网、物联网的相关标准

互联网的相关标准 网络通信协议&#xff1a; HTTP&#xff08;Hypertext Transfer Protocol&#xff09;&#xff1a;用于在网络中传输文本、图像、音频和视频等数据的协议。它基于请求-响应模型&#xff0c;客户端发送请求给服务器&#xff0c;服务器返回响应。HTTPS&a…

学习Ajax (概述,应用场景,使用jQury 实现ajax)

目录 前言 概述 什么是Ajax? 同步交互与异步交互的区别是什么呢&#xff1f; 应用场景 场景1 在搜索框搜索 资源 场景2 登录业务的对用户名处理 AJAX的优缺点 优点&#xff1a; 缺点&#xff1a; 使用jQury 实现ajax 使用步骤 1 引入jQury 文件 2 使用Ajax 函数…

网迅通推出新一代智能家居拓展网关

Zigbee 型智能家居拓展网关 产品概述 A、概述 Zigbee 是一种短距离、低功耗的无线通信技术名称。其特点是近距离、低复杂度、低功耗、低数据速率、低成本。ZigBee 模块是一种物联网无线数据终端&#xff0c;利用 ZigBee 网络为用户提供无线数据传输功能。该产品采用高性能的…