- 博客(257)
- 资源 (1)
- 收藏
- 关注
RSS订阅原创 【pixijs】小练习：画布实现
摘要：该代码使用Pixi.js创建了一个无限网格画布，通过Graphics绘制10000x10000像素的灰色网格线（40px间距）。核心实现包括：1)初始化Pixi应用；2)创建容器并添加网格图形；3)设置容器居中和中心点。结合Viewport插件可实现画布缩放功能，适用于需要无限绘图空间的场景。线上演示可在Pixi.js 8.x的演练场测试。
2026-01-24 10:37:49
204
原创 【Vue 3/Vite】Tailwind CSS稳定版安装替代CDN引入
本文对比了CDN方式和本地构建两种Tailwind CSS引入方案。首先指出CDN方式的潜在风险：服务不可用、网络问题和缓存失效等。随后详细介绍了Vue3+Vite项目中Tailwind v3稳定版的正确安装流程，包括依赖安装、配置文件生成、CSS引入和验证步骤。通过本地构建方案，可以避免CDN方式的稳定性问题，确保项目核心功能可靠运行。最后提供了快速验证方法，帮助开发者确认安装成功。
2026-01-24 09:49:50
137
原创 【pixijs】关于pixijs画圆正方向的定义
PixiJS坐标系与arc函数使用要点：PixiJS采用左上角为原点(0,0)，x轴向右为正，y轴向下为正（与数学坐标系相反）。使用arc函数时需注意：0度起始于3点钟方向，角度按顺时针方向增加。参数依次为圆心(x,y)、半径、起始角度、结束角度、是否逆时针（默认false）。示例代码演示了绘制不同圆弧：粉色为1/5圆扇形，红色为完整圆，绿色为逆时针绘制的1/5圆弧。通过调整容器位置和锚点，可实现图形居中显示。
2025-12-27 21:06:56
141
原创 【Gemini简直无敌了】掌间星河：通过MediaPipe实现手势控制粒子
本文实现了一个基于H5和浏览器摄像头的粒子交互系统，通过MediaPipe检测5种手势控制粒子特效。系统初始化时粒子呈银河系状离散分布，支持握拳聚拢为爱心、展开手掌恢复离散状态，以及三种手势分别显示不同文字。核心技术包括：1) MediaPipe手部21关键点检测；2) 基于指尖关节位置的手势分类算法；3) 粒子系统实现位置插值、排斥力和随机扰动；4) 参数化生成心形和文字形状；5) 银河旋转效果通过极坐标变换实现。该系统展示了手势识别与粒子动画的流畅交互，可用于创意展示场景。
2025-12-20 16:50:03
383
原创 【JS】??和?:以及if()三者区别
JavaScript中的空值合并运算符(??)、三元运算符(?:)和if语句的区别：??仅在左侧为null/undefined时返回右侧值；?:根据条件真假返回不同值；if语句控制代码流程而不返回值。??适用于默认值设置，?:适合简单条件赋值，if语句适合复杂逻辑控制。三者判断依据不同：??仅认null/undefined，后两者判断真假值。
2025-12-18 10:22:36
289
原创 【elementUI】form表单rules没生效
对于嵌套属性如 info.modelId，需要在两个地方都指定完整的路径。关键原则是： 中的 prop 值必须与验证规则对象中的键名。
2025-12-17 18:08:33
331
原创 【mac】解决Apple无法验证“fsevents.node”是否包含可能危害Mac安全或泄漏隐私的恶意软件
时弹窗Apple无法验证“fsevents.node”是否包含可能危害Mac安全或泄漏隐私的恶意软件，如何解决？
2025-12-16 17:06:18
444
原创 【vue/js】文字超长悬停显示的几种方式
你说得对，当前的定位确实有问题。现在的 tooltip 是相对于整个。元素定位的，但我们需要让它相对于父容器（大家可以根据自身项目情况，选择最合适方案。让我帮你调整一下实现方式。
2025-12-02 16:29:20
231
原创 【js】【2D绘图】如何解决快捷键监听未销毁被多次触发
在2D或3D绘图时复制、粘贴、撤销等快捷键会多次用到，但未及时销毁很很可能造成画布的污染。此文记录一下踩过的坑。从前以为快捷键是工具类没有细想，直接丢到utils中随用随引入。
2025-11-30 12:16:34
147
原创 【js】路径绘制与清除方案
本文介绍了一种基于八位二进制编码的路径绘制与清除方法。通过将每个格子划分为8个方向路径（4个进入和4个外出），使用二进制位表示路径状态。绘制时通过位与运算判断路径存在性，并绘制相应矩形和箭头。清除路径时采用按位取反操作，需同时处理相邻格子的进出路径关系。该方法实现了灵活高效的路径管理，适用于导航系统等需要方向指示的场景。
2025-11-30 11:50:18
259
原创 【tauri+rust】App会加载白屏，有时显示在左上角显示一小块，如何优化
使用tauri做App时不可避免的会遇到上图问题，Tauri在启动时会先创建原生窗口，然后才加载WebView引擎并执行前端代码，这就导致存在一个时间差。当前端框架初始化耗时较为明显，Vue/React等现代前端框架需要完成虚拟DOM构建、组件挂载等。
2025-11-27 17:59:09
307
原创 【elemen/js】阻塞UI线程导致的开关卡顿如何优化
如上图，关闭开关时由于我的方法中有报告生成过程，会阻塞UI线程，在导出完成之前，用户界面会完全冻结，造成卡顿感。为了防止界面卡顿，我们需要让导出操作异步执行，不阻塞主线程。
2025-11-27 17:37:03
236
原创 【vue】导航栏变动后刷新router的几种方法
2、menu一般在login进入主页面后只加载一次不会频繁触发，所以onMounted中可以执行菜单显隐控制逻辑。这种方法最为直接，但会中断当前的用户体验，有瞬间白屏。1、适合APP这种通过输入网址进入界面情况；
2025-11-25 13:52:05
401
1
原创 【vue】调用同页面其他组件方法几种新思路
该方法适合复杂界面分成多个组件，组件里面又嵌套子组件，且要出发的方法组参复杂，比如我这个就涉及到canvas转html转pdf的报告导出功能。在主组件中添加dispatchEvent，用来触发目标事件在目标组件中添加addEventListener目标方法有异步函数，下一步操作需等待目标方法结束在目标组件中：
2025-11-20 18:45:38
1021
原创 【tauri+pixijs】关于unicode/ascII/GB2312
如果从后端或外部文件（如JSON、XML）加载文本数据，确保这些数据也是以UTF-8编码传输和解析的。如果文本中包含GB2312编码的字符，但你的HTML文档声明为UTF-8（通常现代项目都是UTF-8），那么这些GB2312字符可能会显示为乱码。Unicode（UTF-8）是当前Web项目的标准，能够支持多语言和Emoji，确保你的项目从源代码到数据传输都使用UTF-8编码。UTF-8是可变长编码，兼容ASCII（即ASCII字符的编码与ASCII相同），因此英文字符仍占1字节，而其他字符占2-4字节。
2025-11-19 10:18:23
448
原创 【前端】IndexedDB 常用 API 详解
IndexedDB核心API摘要： IndexedDB提供浏览器端数据库操作API，主要包括： 数据库操作：open()打开/创建数据库，deleteDatabase()删除数据库，databases()获取库列表 对象存储：createObjectStore()创建数据表结构，支持定义主键和索引 数据CRUD：通过add()/put()添加数据，get()查询，delete()删除，clear()清空 高级查询：支持索引查询(getAll)和游标遍历(openCursor)，可实现范围查询 事务支持：通过
2025-11-12 15:08:15
379
原创 【Windows】tauri+rust运行打包工具链安装
本文介绍了Windows下开发Tauri应用所需的工具链配置。主要包括MinGW-w64（提供GNU工具链）、Scoop（包管理工具）和GCC（C/C++编译器）。Tauri需要这套工具链是因为：1）Rust生态依赖C编译器；2）需要编译系统交互代码；3）确保跨平台一致性。文章详细解释了安装步骤和依赖关系，并对比了MinGW和MSVC方案，指出MinGW因其开源生态兼容性和文件体积优势而更受推荐。最后提供了常见问题的解决方案和环境变量配置建议。
2025-11-11 16:51:14
462
原创 【js+vite】如何在产品页面加上本次成果物打包时间
本文介绍了在前端项目中显示打包时间的方法，通过Vite配置注入构建时间常量，并在页面展示该时间戳。主要步骤包括：1）在vite.config.js中定义__BUILD_TIME__常量；2）在Vue组件中引用该常量并显示。实现效果是页面底部固定显示静态打包时间，便于问题排查。注意打包后时间应保持不变，否则说明配置有误。
2025-11-11 10:09:34
348
原创 git误合并两分支如何回退
当你错误地在main分支上执行了git merge并触发了（快进）合并，随后又推送到了远程仓库，可以通过以下步骤将本地和远程的main分支恢复至合并前的状态。请根据你的具体情况（例如，错误的提交是否已经与他人共享）选择合适的方法。
2025-10-26 18:03:14
557
原创 【js】class中constructor如何接收动态值，如timeRange
Console.vue中定义调用js类PathHeatmapTool，并传递两个参数。在父组件中发生变化时，
2025-10-26 11:41:31
217
原创 【JS】import进来的变量是活的吗？
模块变量共享问题解析 当多个文件（a/b）通过import引入同一个export let变量时，所有文件访问的都是同一个内存引用。若a文件修改了该变量，b文件使用时将获得修改后的值，而非初始值。 关键点： ES模块的export let具有"活绑定"特性，导入的变量始终指向最新值 修改会全局生效，但需注意执行顺序（先修改再使用） 使用export const或export default对象会导致不同行为（前者不可变，后者可能产生快照） 建议：明确使用let+修改函数管理共享状态，避免直
2025-07-02 17:02:11
323
原创 【vue3+tauri+rust】如何实现下载文件mac+windows
摘要：本文针对Vue3+Tauri+Rust项目中文件下载问题，对比了四种实现方案：1）window.open存在安全警告且Mac无效；2）Tauri opener插件仍有警告；3）Base64转Blob下载在Mac无效。最终采用"前端保存对话框+Rust写入磁盘"方案，通过Tauri的dialog插件获取路径，Rust处理Base64数据写入，完美解决跨平台下载问题，适用于远程URL和本地PDF生成场景，无浏览器拦截和安全警告，实现Windows/Mac全兼容。
2025-07-02 10:58:30
473
原创 【JS】JavaScript 中的 Class 和 Constructor 详解
JavaScript 的 class 和 constructor 是 ES6 引入的面向对象编程语法。class 作为对象模板，封装属性和方法，必须用 new 调用，类体默认严格模式。constructor 是类的特殊方法，用于初始化对象实例，每个类只能有一个。ES6 类还支持静态方法/属性、私有字段（#前缀）、getter/setter 以及通过 extends 实现继承。相比传统构造函数，类语法更清晰直观，虽然本质仍是基于原型的语法糖，但提供了更接近传统 OOP 语言的开发体验。
2025-07-02 10:02:23
933
原创 一行代码实现数字格式化带千位分隔符，“23,456,789“，数字加逗号就是这么简单
这篇技术文章介绍了一段简洁的JavaScript代码，使用正则表达式实现数字千位分隔符格式化。核心代码'1234567'.replace(/\B(?=(\d{3})+$)/g, ',')通过正则表达式在每三位数字间插入逗号。文章详细解析了正则表达式各部分的含义：\B匹配非边界位置，正向预查(?=...)确保后面有完整的三位数字组，组合后从右至左在合适位置插入分隔符。这种方案简洁高效，适用于各种长度的数字字符串格式化需求。
2025-06-27 11:51:42
358
原创 【Macos】安装前端环境rust+node环境
6、rustup切换镜像并安装https://rsproxy.cn/#getStarted。7、验证rustc --version # 应显示 Rust 编译器版本。cargo --version # 应显示 Cargo 包管理器版本。rustup --version # 应显示 Rustup 版本。2、安装brew 使用中科大镜像, 手动配置path。5、安装vscode/hbuilderx/node。1、findar 新建目录 projects。Macos 安装前端环境。
2025-05-26 16:16:42
585
转载 【TS】写 TypeScript 必须改掉的16个坏习惯!!!
Interface 和 Type 是 TS 中非常重要的两种类型，在使用他们的时候，命名非常非常重要。写临时类型难以复用和维护。
2025-04-27 13:45:44
168
转载 不会还有人在传统网页定位修改，看我用一行JS代码让你的网页变为可编辑
designModeDocument 的 designMode 属性控制整个文档是否可编辑。你可以使用它使网页上的所有内容都可编辑，浏览器兼容性： designMode览器中都受支持。
2025-04-22 14:10:02
343
原创 如何运行Vue 3 + Tauri + Rust 前端项目
(建议 LTS 版本) - 用于运行前端构建工具- Tauri 基于 Rust 构建。
2025-04-15 10:18:16
1065
原创 【PixiJs】setChildIndex如何使用
通过修改子元素在父容器 children 数组中的索引位置，改变其绘制顺序（索引越大，渲染越靠前）。如需调整多个子元素顺序，建议使用 sortChildren() 自定义排序逻辑。批量操作时使用 sortChildren() 统一排序。一、setChildIndex() 核心作用。动态调整容器内子元素的渲染层级。复杂场景优先使用 zIndex。四、与 zIndex 的对比。未正确引用子元素。
2025-02-27 14:17:34
298
原创 【PixiJS】bunny.anchor.set(0.5)；anchor锚点到底是什么意思
在PixiJS等库中，锚点的坐标是相对于精灵自身的宽度和高度来计算的，范围从0到1。锚点（Anchor）：在图形和界面开发中，锚点是指一个对象的中心点或参考点，用于定位、旋转或缩放该对象。默认情况下，锚点通常位于对象的左上角（坐标为0,0），但可以通过设置来改变。精确定位：将精灵放置在舞台或其他对象上时，以中心为锚点可以更容易地进行精确的位置调整。旋转精灵：将锚点设置为中心，精灵会围绕自己的中心旋转，而不是围绕左上角或其他点。缩放精灵：同样，缩放时也会以中心为参考点进行缩放。
2025-02-17 10:56:12
304
原创 【element plus】虚拟dom表格中cellRenderer如何使用v-for循环渲染item
然而，cellRenderer 本身并不直接支持 Vue 的 v-for 指令，因为 cellRenderer 是一个函数，它接收单元格的数据和其他上下文信息，并返回一个 VNode（虚拟节点）或字符串来渲染单元格。注意，这里使用了 JSX 语法。要在 cellRenderer 中实现类似 v-for 的效果，需要使用 JavaScript 的数组方法来迭代数据，并在迭代过程中生成相应的 VNode（如果你使用的是 JSX）或字符串（如果你使用的是模板字符串或普通的 HTML 字符串）。
2025-01-15 16:58:23
1017
原创 【git命令行】git pull冲突如何使用stash暂存,不提交当前工作的情况下临时保存修改
保存当前工作目录的临时状态，并将其存储为一个新的stash。**吐出之前暂存的改动，
2025-01-14 21:45:46
427
原创 【Element】一键重置表单resetFields
在 Element Plus 中，resetFields 方法是用于重置 el-form组件中的表单字段到其初始值，并移除校验结果。这个方法非常实用，特别是在用户需要清空表单并重新开始填写，或者表单验证失败后需要重置表单以允许用户重新输入时。以下是使用 resetFields 方法的一些关键点和示例：使用关键点为了能够在 Vue 实例中调用 resetFields 方法，你需要在 el-form 组件上设置一个 ref 属性。这个 ref 属性将用作对该表单组件的引用。
2025-01-14 17:07:52
1659
原创 jsx语法中el-table-v2中cellRender如何使用动态绑定
【代码】jsx语法中el-table-v2中cellRender如何使用动态绑定。
2025-01-14 14:57:24
557
原创 WebSocket、SSE（Server-Sent Events）、HTTP 和 Axios关系总结
HTTP 是 Web 开发的基础协议，WebSocket 和 SSE 都基于 HTTP 协议进行通信，但在连接建立后的数据传输方式上有所不同。WebSocket 是一种全双工通信协议，适用于需要实时双向通信的应用场景。SSE 是一种单向通信协议，适用于需要服务器主动向客户端推送数据的场景，但客户端不能主动发送数据。Axios 是一个 HTTP 客户端库，用于发送 HTTP 请求。
2025-01-09 10:37:03
995
原创 git commit冲突，需输入提交信息合并提交
git commit时冲突，需输入提交信息合并提交，该如何操作？windows按esc键进入命令模式，输入。
2025-01-08 14:07:58
443
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人