- 博客(38)
- 收藏
- 关注
RSS订阅原创 使用Three.js如何通过代码动态改变模型的视角
使用Three.js，我们能不能通过代码，切换特定的视角呢？有没有官方的API可以实现这个交互呢？
2025-01-17 16:08:01
491
原创 小白的DIY Arduino+ESP8266 WIFI 空气质量检测仪（1）- 串口通讯
基于离线版的Arduino 小白的 DIY 空气质量检测仪（1~5），将扩展实现一个 WIFI 联网版的 DIY 空气质量检测仪。
2025-01-16 19:01:33
840
原创 Arduino 小白的 DIY 空气质量检测仪（5）- OLED显示模块、按钮模块
这一章把剩下的OLED显示模块、按钮模块分享一下，当前这个离线无存储的版本，基本告一段落。如果后续能进化成🈶存储、联网版本，就再开一个小系列分享一下。
2025-01-04 20:53:13
692
原创 Arduino 小白的 DIY 空气质量检测仪（4）- 温湿度模块、UV紫外线模块、时钟模块
关门关窗睡觉，即使开了新风（低档），今早测得二氧化碳1800+、TVOC280+，看来还是要想想办法提高一下换气效率，且不能噪音太大呀~
2025-01-02 08:27:07
355
原创 Arduino 小白的 DIY 空气质量检测仪（3）- TVOC模块、CO2模块
DFRobot_SGP40 是一个第三方库，但是 Arduino Nano 仅有一对 I2C 接口 A4、A5 引脚，而这硬件级的 I2C 接口，需要留个 OLED 显示屏使用。因此，这里使用了另外一个第三方库 SoftI2C，利用其它引脚通过软件模拟的方式实现I2C通讯。
2025-01-01 20:54:28
538
原创 Arduino 小白的 DIY 空气质量检测仪（2）- 甲醛模块、程序入口、目录结构
Arduino 小白的 DIY 空气质量检测仪，关于甲醛模块、程序入口、目录结构。
2024-12-31 11:53:26
636
原创 Arduino 小白的 DIY 空气质量检测仪（1）
Arduino DIY 空气质量检测仪，Arduino Nano、DART WZ-S 甲醛（HCHO）、SGP40 总挥发物（TVOC）、MTP40-F 二氧化碳（CO2）、DHT22 温湿度。。。
2024-12-30 18:10:56
956
原创 手把手实现一个图片可缩放可拖拽的 Vue3 组件
手把手展示一下如何实现一个简单的组件，预览一张尺寸可能非常大的图片，初始化显示的时候，希望它自适应显示区域后，还可以缩放并可以在显示区域中拖拽
2024-11-21 12:35:49
2118
2
原创 基于 CSS Grid 的简易拖拉拽 Vue3 组件，从代码到NPM发布（3）- 小结
基本完成了拖动、调整大小、拖入、拖出、嵌套、删除等特性，可以基于组件嵌套，也可以基于数据结构嵌套。算是告一段落了，后面在使用过程发现问题解决问题好了。请大家动动小手，给我一个免费的 Star 吧~大家如果发现了 Bug，欢迎来提 Issue 哟~
2024-10-17 18:46:13
309
1
原创 基于 CSS Grid 的简易拖拉拽 Vue3 组件，从代码到NPM发布（2）- NPM发布、在线示例
这里分享一下本开源项目是如何构建组件库及其如何发布到NPM上的，还有组件库与在线示例的构建有什么差异。请大家动动小手，给我一个免费的 Star 吧~大家如果发现了 Bug，欢迎来提 Issue 哟~
2024-10-12 18:03:02
691
原创 基于 CSS Grid 的简易拖拉拽 Vue3 组件，从代码到NPM发布（1）- 拖拉拽交互
基于特定的应用场景，需要在页面中以网格的方式，实现目标组件在网格中可以进行拖拉拽、修改大小等交互。本章开始分享如何一步步从代码设计，最后到如何在 NPM 上发布。
2024-10-10 19:01:15
704
原创 前端使用 Konva 实现可视化设计器（23）- 绘制曲线、属性面板
本章分享一下如何使用 Konva 绘制基础图形：曲线，以及属性面板的基本实现思路，希望大家继续关注和支持哈（多求 5 个 Stars 谢谢）！
2024-09-26 18:04:22
1578
原创 前端使用 Konva 实现可视化设计器（22）- 绘制图形（矩形、直线、折线）
本章分享一下如何使用 Konva 绘制基础图形：矩形、直线、折线，希望大家继续关注和支持哈！
2024-09-10 18:11:11
932
原创 前端使用 Konva 实现可视化设计器（21）- 绘制图形（椭圆）
本章开始补充一些基础的图形绘制，比如绘制：直线、曲线、圆/椭形、矩形。这一章主要分享一下本示例是如何开始绘制一个图形的，并以绘制圆/椭形为实现目标。
2024-08-20 18:22:45
1250
2
原创 前端使用 Konva 实现可视化设计器（20）- 性能优化、UI 美化
这一章主要分享一下使用 Konva 遇到的性能优化问题，并且介绍一下 UI 美化的思路。
2024-08-08 12:32:01
1368
7
原创 手把手使用 SVG + CSS 实现渐变进度环效果
手把手使用 SVG + CSS 实现渐变进度环效果，利用的就是 SVG 的 stroke-dasharray。
2024-08-02 22:32:22
1447
原创 前端使用 Konva 实现可视化设计器（19）- 连接线 - 直线、折线
本章响应小伙伴的反馈，除了算法自动画连接线（仍需优化完善），实现了可以手动绘制直线、折线连接线功能。
2024-08-01 22:56:54
1036
原创 前端使用 Konva 实现可视化设计器（18）- 素材嵌套 - 加载阶段
本章主要实现素材的嵌套（加载阶段）这意味着可以拖入画布的对象，不只是图片素材，还可以是嵌套的图片和图形。
2024-07-22 18:30:16
611
4
原创 前端使用 Konva 实现可视化设计器（17）- 素材嵌套 - 生成阶段
本章主要实现素材的嵌套（生成阶段）这意味着可以拖入画布的对象，不只是图片素材，还可以是嵌套的图片和图形。在未来的章节中，应该可以实现素材成组/解散的效果。
2024-07-19 23:05:10
730
原创 前端使用 Konva 实现可视化设计器（16）- 旋转对齐、触摸板操作的优化
这一章解决两个缺陷，一是调整一些快捷键，使得 Mac 触摸板可以正常操作；二是修复一个 Issue，使得即使素材节点即使被旋转之后，也能正常触发磁贴对齐效果，有个小坑需要注意。
2024-06-17 22:25:38
662
原创 前端使用 Konva 实现可视化设计器（15）- 自定义连接点、连接优化
本章将处理一些缺陷的同时，实现支持连接点的自定义，一个节点可以定义多个连接点，最终可以满足类似图元接线的效果。
2024-06-14 22:16:07
948
原创 前端使用 Konva 实现可视化设计器（14）- 折线 - 最优路径应用【代码篇】
话接上回，这一章继续说说相关的代码如何构思的，如何一步步构建数据模型可供 AStar 算法进行路径规划，最终画出节点之间的连接折线。
2024-06-11 12:45:39
701
原创 前端使用 Konva 实现可视化设计器（13）- 折线 - 最优路径应用【思路篇】
这一章把直线连接改为折线连接，沿用原来连接点的关系信息。关于折线的计算，使用的是开源的 AStar 算法进行路径规划，启发方式为 曼哈顿距离，且不允许对角线移动。
2024-06-08 15:52:03
875
原创 前端使用 Konva 实现可视化设计器（12）- 连接线 - 直线
这一章实现的连接线，目前仅支持直线连接，为了能够不影响原有的其它功能，尝试了2、3个实现思路，最终实测这个实现方式目前来说最为合适了。
2024-06-02 10:40:01
891
原创 前端使用 Konva 实现可视化设计器（11）- 对齐效果
这一章补充一个效果，在多选的情况下，对目标进行对齐。基于多选整体区域对齐的基础上，还支持基于其中一个节点进行对齐。
2024-05-18 21:00:00
933
原创 前端使用 Konva 实现可视化设计器（9）- 另存为SVG
这一章增强了另存为的能力，使用 canvas2svg 实现“另存为SVG”，大概是全网唯一的实例分享了吧。
2024-05-07 18:06:42
606
原创 前端使用 Konva 实现可视化设计器（8）- 预览框
这一章我们实现一个预览框，实时、可交互定位的。当放大的时候，会显示当前可视区域提示框。附带图片说明哟。
2024-04-30 21:16:10
458
3
原创 前端使用 Konva 实现可视化设计器（7）- 导入导出、上一步、下一步
这一章实现导入导出为JSON文件、另存为图片、上一步、下一步。关键在于如何恢复图片的素材，毕竟JSON内部只有部分记录。
2024-04-24 22:27:29
1205
1
原创 前端使用 Konva 实现可视化设计器（6）- 复制粘贴、删除、位置、zIndex调整
这一章处理一下复制、粘贴、删除、画布归位、层次调整，通过右键菜单控制。其实没有想象中那么简单，细节真的比较多。
2024-04-20 08:59:57
1344
1
原创 前端使用 Konva 实现可视化设计器（5）- 磁贴效果
这一章实现了磁贴效果，花了比较多的时间调试，这个功能实现起来比较麻烦，官方是没有像类似 anchorDragBoundFunc 这样的 api，需要在 transformer 的 dragmove 介入修改。
2024-04-16 22:16:21
554
原创 前端使用 Konva 实现可视化设计器（4）- 快捷键移动元素
这一章实现通过上下左右按键移动所选节点，规则是，按一下移动 1 像素，按着不动则会按 1 像素增速移动，松开按键则恢复原来速度。
2024-04-11 22:20:48
460
1
原创 前端使用 Konva 实现可视化设计器（3）- 单选、多选、选择框
这一章实现了单选、多选、选择框，根据 konva 地特性，处理的细节比较多，官网示例过于简单，按自己思路实现。
2024-04-10 23:12:31
1353
1
原创 前端使用 Konva 实现可视化设计器（2）- 参考线、svg、gif图片加载
这一章实现了参考线，并完成了对各种图片素材的加载显示，同时阐述了这个系列的基本逻辑坐标系，希望大家能快速理解后面的创作。
2024-04-06 20:04:02
1563
13
原创 前端使用 Konva 实现可视化设计器（1）- 无限画布、比例尺
实现了“无限画布”、“画布移动”、“网格背景”、“比例尺”、“定位缩放”，并简单叙述了它们实现的基本思路。绝对的原创。
2024-04-04 22:35:32
1367
1
原创 Vue3 Diff 之 patchKeyedChildren 动态示例
Vue3 Diff 之 patchKeyedChildren 动态示例，图形化的展示 patchKeyedChildren 的处理过程。
2024-01-29 14:39:34
513
原创 axios-api，js结构化定义、调用业务api接口。
基于 axios 可建立结构化实例的工具，有以下特点：1. 基于 axios，兼容 axios 的 api，可无缝的迁移使用。2. 内置了两种常用的请求终止（基于cancelToken）场景，可防止接口重复调用。3. 内置了接口调用的缓存机制，在设置的有效期内，可从缓存中获得历史请求结果。4. 内置了接口地址模板插入功能，满足基于 url 包含变量值的场景。5. 关键：通过结构化的 api 定义生成结构化的 api 请求实例，在项目中畅快的快速调用业务接口。配套使用 webpack 插件（[@n
2022-01-16 13:39:33
503
空空如也
vue3 原理关于 cleanupDepEffect 的疑问
2024-01-31
vue3 原理关于 trackEffect 的疑问
2024-01-31
TA创建的收藏夹 TA关注的收藏夹
TA关注的人