文章列表

4.8k 字 4 分钟

# 目标 实现一个搜索框，输入内容后，实时搜索并展示下拉框匹配的结果。 输入内容 根据内容请求接口，返回字符串数组 输入框做防抖 以队列形式请求 下拉框采用虚拟列表 # 输入内容 通过 input 组件并采用 onChange 事件来获取输入的内容 # 根据内容请求接口 把接口请求操作写到 useEffect 中 获取到结果后 setState 到全局 注意：每次请求完后，需要对整个列表的滚动条进行复原 # 输入框做防抖 防抖单独写一个 hook ： useDebounce<T>(value: T, delay: number):...
2.6k 字 2 分钟

# 个性化快捷键绑定 在 React 应用中，我们可以使用 react-hotkeys-hook 库来实现快捷键绑定，但是在这里，我先暂时使用一下最原始的写法，哈哈。 # 思路 创建一个快捷键到事件的映射表 添加监听事件 获取当前按下的键 判断当前的阶段，如果是修改阶段，则修改对应事件的快捷键，如果是执行阶段，则执行对应事件 # 代码 import React, { useState, useEffect, useCallback } from 'react'; interface Shortcut { event:...
2.3k 字 2 分钟

# 使用 Konva.Tween 实现拖拽后的惯性动画 在现代 Web 应用中，为用户提供流畅自然的交互体验至关重要。通过为拖拽操作添加惯性效果，我们可以让应用感觉更加生动和自然。 # 准备工作 在开始之前，确保已安装 Konva.js 库。 npm install konva或者说直接在 HTML 中直接引用 <script src="https://unpkg.com/konva@8.3.10/konva.min.js"></script>#...
13k 字 12 分钟

# 手写 Promise # 构造函数 核心步骤： 定义类 => 添加构造函数 => 定义resolve/reject => 执行回调函数 class MyPromise { // state = PENDING; // result = undefined; constructor(executor) { const resolve = (value) => { } const reject = (reason) => { }...
17k 字 16 分钟

# 多种格式的导入导出 支持 JSON 格式的导入导出、专有文件 dmp 格式的导入导出、 xlsx 格式的导入导出、 md 格式的导入导出。 支持导出 png 、 jpg 、 svg 、 pdf 格式。 这里使用的数据结构是 export interface Node { id: string; text: string; position: [number, number]; children: string[]; size: [number, number]; // 新增尺寸字段 [width, height] collapsed: boolean; // 新增折叠状态...
7.2k 字 7 分钟

# 📝如何将思维导图导出导入为 XMind 文件 Xmind 文件本质上是一个 ZIP 压缩包。其中包含了多个 JSON 文件 (如 content.json ， metadata.json 等)，这些文件描述了思维导图的内容和结构 # 1. 🛠️ 准备工作 JSZip: 用于创建 ZIP 文件。允许我们轻松创建符合 XMind 规范的 ZIP 文件 file-saver: 用于保存生成的文件。这个库简化了浏览器环境下的文件下载过程。 # 2. 🔍 定义数据结构 # Node 接口 interface Node { id: string; // 节点 ID...
757 字 1 分钟

# 📐 构造二次贝塞尔曲线：轻松实现节点间的优雅连线 在开发思维导图或树状结构应用时，如何优雅地连接节点并绘制平滑的线条 # ✨ 贝塞尔曲线简介 贝塞尔曲线是一种用于生成平滑曲线的数学工具 。它广泛应用于图形设计、动画、UI 开发等领域。贝塞尔曲线的特点是可以通过控制点来调整曲线的形状，从而生成各种平滑的路径。 多个贝塞尔曲线的组合可以生成各种复杂的曲线，如圆弧、曲线、贝塞尔曲线等。 一次贝塞尔曲线的公式是： B(t) = (1 - t) * P₀ + t * P₁ # 二次贝塞尔曲线 二次贝塞尔曲线是最简单的贝塞尔曲线类型之一，它由以下三个点定义： 起点...
18k 字 17 分钟

# 🌳 带尺寸多叉树分层递归布局算法详解 这里主要应用与思维导图，树的方向是从左到右 让你的树形结构「严丝合缝」！✨ 本算法可实现： ✅ 父节点垂直居中于子节点区域 ✅ 子节点右侧竖直排列不重叠 ✅ 支持动态尺寸和折叠状态 ✅ O (n) 时间复杂度 # 🧩 核心思想 分为两阶段 📏 预计算阶段：自底向上统计子树尺寸 🎯 定位阶段：自顶向下递归布局 # 🛠️ 实现 # 1. 📦 数据结构定义 interface TreeNode { id: string; position: [number, number]; // 节点中心坐标 size:...
3.2k 字 3 分钟

# 🎨 当 Canvas 遇见 DOM：在 Konva 中实现丝滑文本编辑的技巧 # 💡 为什么需要 DOM + Canvas 的混合方案？ konva 的 Text 组件虽然强大，但在处理复杂文本编辑时存在局限： ⌨️ 缺少自动换行、光标控制等原生能力 🖥️ 复杂样式支持有限 解决方案：通过 DOM 元素模拟 Canvas 的文本编辑！ # 📌 目标 让 Konva 画布中的节点文本 双击可编辑，效果像直接在 Canvas 上输入文字一样丝滑！（无需 Konva 的复杂组件，直接用原生 <textarea> 实现！） # 🔧...
1.7k 字 2 分钟

# 如何实现以鼠标为中心的精准画布缩放？ # 一、核心原理：坐标系转换 要实现精准缩放，需要理解两个核心坐标系： 视口坐标系：用户当前看到的区域（Viewport） 内容坐标系：画布的实际内容（Content） 缩放的本质就是这两个坐标系的比例变换。我们的目的是：无论缩放比例如何变化，鼠标点对应的内容位置始终保持不变。 # 数学关系 设： 当前缩放比例： S 新缩放比例： S' 鼠标的视口坐标： 向量A = (P_x, P_y) 画布偏移量 (相对于视口)： 向量B = (O_x,...