- 博客(25)
- 收藏
- 关注
RSS订阅原创 Flutter 实现一个容器内部元素可平移、缩放和旋转等功能（八）
有许多方式实现扩展功能区域，第一种就是划分区域，划分下面为属性扩展区域，元素变换区域则会相应的压缩，所以涉及到变换的计算有使用到容器宽高属性的都要变化；按照部分经验，这种功能操作的大多数是图片+文本，所以我们以这两种来划分元素的类型为例，后续如果有新的类型再增加即可。这样我们就简单实现了属性的修改，样式什么的后面有时间再慢慢调整，现在只是功能为主，毕竟真实的开发总会有UI的。前面我们实现了元素的变换操作，单纯的变换操作只是为了后续功能的实现，接下来我们就开始扩展容器的属性。
2025-12-22 23:04:36
1004
原创 Flutter 实现一个容器内部元素可平移、缩放和旋转等功能（七）
前面我们抽取了区域的配置，主要实现了对内置区域的自定义，现在有个问题，如果是我们想自定义某个特定区域实现特定的效果，现在的数据都在部件的内部，如果不能提升到外部，那我们不能由外界传入貌似也没有什么用，因为功能需求都不一样，只有尽可能的以我现在的能力去进行封装。可以看到我们定义了左下角为自定义区域，其他内置的区域配置也生效了，接下来我们来实现这个区域的方法。如果还需要实现其他自定义可能，可以按照类似的方式来实现。好了，今天的分享就结束了，后续就开始实现容器属性的设置了，比如辅助线，比如撤销还原。
2025-12-22 22:57:40
361
原创 Flutter 实现一个容器内部元素可平移、缩放和旋转等功能（六）
我们使用的顶点坐标顺序是顺时针，第一次循环 i = 0，j = 3，那么i就是左上顶点，j就是左下顶点，两个顶点刚好构成矩形左边；这样就简单实现了元素的删除功能。前面有人提到在元素内部的那块判断怎么那么写的，看来对知识渴望的小伙伴还是有，这样挺好的。这样就得到了代码中的判断依据，至于循环遍历顶点的写法，就是为了获取相邻两个顶点，这个就可以带入square坐标和循环去算一下就行了，保证每次循环都是相邻的两个顶点。可以看到，我们将旋转区域移到右下角了，并且不使用缩放区域，这样就简单完成了区域自定义的配置。
2025-12-21 18:33:22
1098
原创 Flutter 实现一个容器内部元素可平移、缩放和旋转等功能（五）
之前我们使用的是以宽度为基准实现的元素缩放，这样如果y变化大于x的变化，就会不是很协调，现在我们使用新的一种计算方式，以初始按下的坐标和中心点坐标的距离和结束点坐标到中心点坐标的距离来计算缩放的比例，通过这个比例再去计算宽高，这样可能稍微会协调一点。前面我们简单实现了属性的抽取和元素的移动，接下来我们实现元素的旋转（因为旋转涉及到角度的变化，所以先行实现），因为原理在之前的单个中已经分析了，所以这里依然以代码结合详细注释来说明，只对特别注意的点单独提取出来说明。可以看到，这样就简单实现了多个元素的变换。
2025-12-21 00:04:52
770
原创 Flutter 实现一个容器内部元素可平移、缩放和旋转等功能（四）
这里给出一种确定响应区域的计算方式，基于元素本身创建一个坐标系，坐标原点为元素的左上角，使用元素的总体宽高和响应区域中心点来计算出一个比例，通过这个比例就能让我们使用区域内包括区域外的任意区域来做响应的区域，例如，元素整体宽高为20*20，我需要响应区域的中心点在右上角(20, 0)，所以这个比例就是 （x: 20/20，y: 0/20）。现在是多个元素的，当前正在操作的肯定只有一个元素，所以按下的时候得选中元素，后续的操作就是作用于选中的元素，因为还只是移动操作，所以也先不考虑旋转。
2025-12-16 23:26:17
765
原创 Flutter 实现一个容器内部元素可平移、缩放和旋转等功能（三）
然后我们继续考虑热区的问题，当旋转一定角度的时候，再次点击对应的热区，就无法响应事件了，因为旋转后热区坐标已经发生改变，所以我们得对点击判断中加入角度的影响。值得注意的是，现在我们研究的是单个元素，所以坐标系就是以元素自身形成的（响应的事件也是在这个元素上），等后期要实现多个，坐标系就得以外层容器作为参考了。要实现旋转，我们就得知道元素的旋转角度，主要得出旋转的角度，那么实现起来就比较简单，所以简单使用数学的知识分析一下吧。这样就对单个元素实现了变换的效果，前置就算时铺垫完成了，后续就开始实现多个的。
2025-12-13 23:56:39
766
原创 Flutter 实现一个容器内部元素可平移、缩放和旋转等功能（二）
接下来我们实现以元素中心为缩放中心的效果，如果我们想以元素的中心为缩放的中心（现在的中心是元素的左上角），这样在缩放过程中，对应的坐标值也得更着变化，缩放从原来的一边转换为双边。这样就简单的实现了缩放，如果没有其他的要求，不在意拉伸挤压的话，这就完成了，实际上肯定有需要保持等比例缩放（例如对一张图片的缩放，如果拉伸挤压后就很难看了）。这样就简单实现了元素的缩放，因为只是快速演示，所以考虑的情况没有那么复杂，部分极限的情况也没有做限制。可以看到，我们抽取了响应的区域，当点击对应的区域则可以实现响应的操作。
2025-12-10 22:19:21
733
原创 Flutter 实现一个容器内部元素可平移、缩放和旋转等功能（一）
为了解决这个问题，我们可以使用下面这种方法，将手指按下，移动，抬起看做一个操作动作，用变量记录当前的初始的x和y，手指按下记录按下的坐标，手指移动时记录移动到的坐标，通过按下的坐标与移动的坐标计算移动的距离，那么就有：当前的值 = 初始化值 + (手指当前移动的值 - 手指按下的值)；这样就达到了我们的要求。现在我们对边界做出了限制，但新的问题又出现了，我们手指拖动到容器外面，依然在响应事件，此时移动到容器内的过程中，元素也在跟着移动，待完全将手指移动到容器内，元素和手指已经隔了很长一个距离了。
2025-11-30 22:20:29
565
原创 flutter 封装一个 tab
上面我们就完成了一个简单的tab封装，但是目前还不算很通用，例如我想要TabBar在下面，TabView在上面，这个就不能直接使用了，得更改内部代码，所以继续继续封装，允许用户自定义方向。一种是使用PageView，这个天生就支持上下滑动，但是如果使用这个，得维护PageController，同步TabBar的切换，有兴趣的可自行试一下。另一种方式依然是旋转，我们将其旋转90度后，自然而然滑动手势从左右变成了上下，不过需要注意的是，子项依然要反方向旋转90度还原。
2025-11-29 21:22:59
579
原创 flutter实现背景容器与滚动容器的联动滚动
当滑动可滚动的前景容器时，需要判断背景容器是否滑动到底部，如果背景没有滚动到底部，需先滚动背景容器，如果背景已经滚动到底部，则滚动前景容器，这样来实现联动滚动效果。起初分析用双层滚动容器实现，外层滚动容器放背景，内层滚动容器放列表，通过动态控制内层容器的可滚动属性来实现效果。其实进一步分析不难发现，当内层容器覆盖在背景上时，当内层容器滚动，背景跟着一起滚动就行了，所以可以监听滚动容器的滚动，当背景没有滚动到底部时，就设置背景容器距离顶部高度为滚动容器滚动的距离即可。为透明的，那么底部滚动内容滑动就会被。
2025-11-28 22:09:00
650
原创 基于CupertinoPicker封装日期选择器
实现这个需求，可以找一下三方插件，应该有很多插件实现了这个功能，不过我们项目使用到的比较简单，就自行实现了一个，这里做一下简单的记录。因为实现类似于ios风格的可滑动选择的小部件，所以通过查阅官方文档，找到了小部件 =>
2024-11-01 17:35:27
497
原创 flutter自定义table_calendar
如果我要对头部新增一些按钮图标，或者控制某些样式，这样我们就需要使用和属性来自定义头部// 用于自定义切换上一月和下一月@override),// 监听日历组件创建，设置_pageController},// 可选时间区间的开始时间// 可选时间区间的结束时间// 当前获取焦点的时间// 所以自定义头部Builder，我们就可以自定义头部小部件了Stack(left: 20,top: 3,// 处理事件},width: 26,),),),Row(
2024-10-25 14:57:20
1386
原创 uniapp封装原生 firebase-analytics 插件
因为有这个需求，先查看官方文档，官方提供了上传配置文件功能，但是并没有开放对应的api，然后又找了插件市场里面，并没有合适的，所以就自己简单弄了一下，后续有其他需要原生的功能也可以使用类似的方式实现。这里只是一个简单的记录流程，方便后续做参考。
2024-10-18 14:35:21
1699
1
原创 uniapp 小程序端简单实现一个拖动排序
在小程序端实现这个功能没有 web 端那么方便，在插件市场也没有找到合适的，所以简单实现一个。我们知道，一般来说要实现拖动排序的列表大概率没有很长很长，所以就不做长列表的优化了。微信小程序可以单独使用 wxs 优化当然实现方式多样，适合自己的才是最好的。通常来说，部分列表项拥有自己特定的响应事件，例如点击操作，我们实现拖动最好和这些事件避开。首先确定列表项的排列方式，我们选择的是定位来布局列表项，因为这样方便操作每个元素的位置，直接动态改变元素的定位信息即可。接着就是怎么确定元素的位置信息，包括后面如何判断
2024-01-19 18:22:11
3353
3
原创 记录元素平移、旋转、缩放和镜像翻转（4）
记录元素平移、旋转、缩放和镜像翻转（4）接下来就是一些收尾的工作，实现镜像翻转功能。这个功能就相对来说比较简单了，这里只做简单的实现，使用 css 即可。首先为元素新增字段来确定翻转效果，这个效果就两种，翻转和不翻转，所以使用 boolean 值。/** * 处理元素属性 * * @param {Object} options 元素属性 */handleOptions(options = {}) { // 之前的代码省略...... // 新增镜像翻转字段 _options.m
2023-09-15 10:56:09
618
1
原创 记录元素平移、旋转、缩放和镜像翻转（3）
上面我们实现了抽取区域，对应的区域做相应的事情，基于此，我们可以让外界也传入同样的配置，来实现自己的操作，不过这个操作有部分限制，函数定义在配置对象内，那么 this 指向会变，所以也不能完全方便的使用方法，当然这个也可以更改（等等，这里我有个好sou主意，对于涉及到 this 的地方可以增加可以外界传入，然后可以通过 call apply bind 来更改 this 指向），算了，我反正不想改了！接下来就开始抽取区域，让对应的区域做对应的事情，目前已有的功能有旋转和缩放，所以用这两个为基准开始修改代码。
2023-09-14 18:09:31
193
原创 记录元素平移、旋转、缩放和镜像翻转（2）
因为加入了元素的状态，所以鼠标点击的时候，我们必须得将元素状态设置，只要是在对应区域，那就设置对应的状态，之前只是判断点击元素是否在元素内部，现在元素内部需要划分部分区域，鼠标在这些区域响应正确的操作，所以我们得新增点击点位置判断函数，这里要实现的是元素的旋转变换，这个响应区域为元素的右下角，只要点击的坐标在此处，就响应变换操作，这样 render 函数也要进行改造。观察上面改造后的函数，如果我们后面还要加很多状态，就要写很多的 if-else，所以使用策略模式改造，抽离处理函数，所以继续改造。
2023-09-12 16:59:00
175
原创 记录元素平移、旋转、缩放和镜像翻转（1）
其实这个功能在网上随便一找就是一大堆，但为了方便自己，还是写一下，这里是一个简单的 demo，使用的是 js 的方式，后面再基于此融合到框架中去，或者适配移动端。初步实现了元素的移动，因为篇幅，到此结束，后面基于此再实现其他功能。这个功能都很清楚了，所以简单的做下分析。
2023-09-11 18:04:12
215
原创 记录前端更改纯色图片的几种方式
只是提供了几种实现更改纯色图片颜色需求的简单方式，如果还有其他较好的方式后面发现了再补充。其中没有对比各种方式的优缺点优缺点，只是工作中遇到相应的需求，然后去参考相应的文档，最后做一个大概得记录。（掘金同名，微信公众号：“前端学习小营地”）……
2023-09-06 14:38:29
975
原创 vue2 + tracking 实现 PC 端的人脸识别
首先确保有摄像头有时候本地调试无法打开摄像头，可以在浏览器上输入chrome然后会出现如下页面，再操作即可。
2022-07-26 17:53:28
1402
1
原创 记录一下 TCP 的部分知识点
一、TCP 的部分知识点为什么要写这个，其实只是做笔记了。方便自己以后阅读，也当作知识的分享。只是一些简单知识的概括，详细请参考谢希仁的《计算机网络》。1. 一些基本知识运输层最重要的两种协议 TCP 和 UDP套接字 socket = (IP 地址:端口号)每一条 TCP 连接唯一地被通信两端的两个端点（即两个套接字）所确定。2. 可靠传输的工作原理2.1 停止等待协议全双工通信的双方既是发送方也是接收方。“停止等待” 就是每发送完一个分组就停止发送，等待对方确认，在收到确认后再发
2022-04-20 14:00:55
2456
原创 重温 ES 5 的继承
重温 ES 5 的继承1. es5 创建类function Person () { this.name = '张三'; this.age = 20;}var p = new Person();console.log(p.name); // 张三console.log(p.age); // 202. 构造函数和原型链里面增加方法function Person () { this.name = '张三'; this.age = 20; this.run = function
2021-09-14 18:16:11
178
1
原创 记录 uniapp 全局请求的封装
记录 uniapp 全局请求的封装为什么要封装全局请求，为了方便我们统一处理后端返回的错误码，处理一些共同的逻辑。request.js// 引入请求的基础urlimport baseurl from './config.js';// 全局请求封装export default (url, method, params) => { const token = uni.getStorageSync('token'); // 处理 token 不存在时的逻辑 // ... // 显示加载
2021-09-14 17:33:54
553
1
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人