<?xml version="1.0" encoding="utf-8" ?><rss version="2.0"><channel><title><![CDATA[harrain的博客]]></title><description><![CDATA[不要试图追求安全感，周遭环境从来都不会有绝对的安全感，如果你觉得安全，很可能暗藏危机。真正的安全感，来自你对自己的信心，是你每个阶段性目标的实现，而真正的归属感，在于你的内心深处，对自己命运的把控。]]></description><link>https://blog.csdn.net/harrain</link><language>zh-cn</language><generator>https://blog.csdn.net/</generator><copyright><![CDATA[Copyright &copy; harrain]]></copyright><item><title><![CDATA[antvG2折线图和区间range标记同时绘制]]></title><link>https://blog.csdn.net/harrain/article/details/158881256</link><guid>https://blog.csdn.net/harrain/article/details/158881256</guid><author>harrain</author><pubDate>Tue, 24 Mar 2026 10:47:04 +0800</pubDate><description><![CDATA[我试过用spaceLayer，让line和range分别在一个view上，但会出现两个坐标轴，而又因为line和range数据结构不一致，所以无法共用一套数据，只能分别设置数据，数据的不同，导致scale比例尺对应不上，坐标轴也对应不上。line和range都能通过tooltip显示数据，让line和range共用一套坐标轴，并且当鼠标移动到line上时，tooltip显示line的数据信息；当鼠标移动到range上，tooltip显示range的数据信息。下面是g2chartHook。]]></description><category></category></item><item><title><![CDATA[elementplus修改dialog弹窗样式]]></title><link>https://blog.csdn.net/harrain/article/details/158881155</link><guid>https://blog.csdn.net/harrain/article/details/158881155</guid><author>harrain</author><pubDate>Tue, 24 Mar 2026 08:38:06 +0800</pubDate><description><![CDATA[当设置了append-to-body， 无法在scope下通过样式穿透设置dialog。需要在<script></script>下写class，不能带scope。]]></description><category></category></item><item><title><![CDATA[antv x6graph使用经验]]></title><link>https://blog.csdn.net/harrain/article/details/158881062</link><guid>https://blog.csdn.net/harrain/article/details/158881062</guid><author>harrain</author><pubDate>Sat, 21 Mar 2026 14:19:37 +0800</pubDate><description><![CDATA[本文介绍了使用AntV X6图表库创建关系图的实现方法。首先通过npm安装X6库，然后创建画布容器。重点展示了一个自定义hook的实现，该hook可生成带中心节点和多个子节点的关系图，支持设置节点样式、布局和动画效果。子节点采用圆形布局，通过三角函数计算位置，支持1-8个节点的自动排列。hook还实现了连线动画和节点呼吸效果。最后说明了如何单独设置数字和文字的字体大小差异，通过CSS选择器针对不同文本内容应用不同样式。]]></description><category></category></item><item><title><![CDATA[拟合模型与虚幻引擎]]></title><link>https://blog.csdn.net/harrain/article/details/159317666</link><guid>https://blog.csdn.net/harrain/article/details/159317666</guid><author>harrain</author><pubDate>Sat, 21 Mar 2026 13:37:22 +0800</pubDate><description><![CDATA[点云逆向建模是将物理世界转化为数字资产的关键环节，主要包括点云预处理、轮廓提取、曲面拟合、模型重构和验证等步骤。技术难点包括点云缺失、复杂曲面拟合、语义分割等。虚幻引擎(UE)在可视化建模中发挥重要作用，如场景构建、程序化建模和实时渲染，但不适合参数化设计和制造级输出。建议明确精度等级，采用自动化+人工校验流程，在专业CAD软件完成建模后导入UE优化。]]></description><category></category></item><item><title><![CDATA[数字孪生原始三维数据预处理]]></title><link>https://blog.csdn.net/harrain/article/details/159317611</link><guid>https://blog.csdn.net/harrain/article/details/159317611</guid><author>harrain</author><pubDate>Sat, 21 Mar 2026 13:32:07 +0800</pubDate><description><![CDATA[本文详细介绍了点云数据的预处理流程。该流程分为两大核心环节：质量检测确保数据可用性，包括检查完整性、噪点和照片质量；点云处理实现数据转化，通过拼接、坐标校准、可视化渲染和实体模型拟合，将原始点云转化为结构化的数字资产。整个过程将杂乱的点云数据转化为可用于工程验收、逆向建模和数字孪生的高精度模型，避免了后期返工风险，保证了数据的准确性和可用性。预处理环节实现了从原始数据到可用资产的转化，为后续应用奠定了坚实基础。]]></description><category></category></item><item><title><![CDATA[数字孪生外业测量数据采集]]></title><link>https://blog.csdn.net/harrain/article/details/159317570</link><guid>https://blog.csdn.net/harrain/article/details/159317570</guid><author>harrain</author><pubDate>Sat, 21 Mar 2026 13:28:49 +0800</pubDate><description><![CDATA[本文系统介绍了三维测量工作的三个关键环节：控制测量、照片采集和三维扫描。控制测量通过布设控制点和坐标系转换，为数据提供精确的空间基准；照片采集使用高像素相机获取场景纹理信息；三维扫描通过激光扫描仪获取点云数据，经过去噪和拼接形成完整的三维骨架。这三个环节相互配合，最终生成高精度的三维模型，确保数字孪生与实体场景在几何形状和纹理细节上完全一致。整个过程注重质量控制，包括复测和数据备份，为后续应用提供可靠保障。]]></description><category></category></item><item><title><![CDATA[数字孪生项目中普通建模和三维建模的区别]]></title><link>https://blog.csdn.net/harrain/article/details/159317535</link><guid>https://blog.csdn.net/harrain/article/details/159317535</guid><author>harrain</author><pubDate>Sat, 21 Mar 2026 13:26:05 +0800</pubDate><description><![CDATA[摘要：数字孪生项目中，普通建模（2D/基础3D）与三维建模（高精度3D）存在本质差异。普通建模侧重外观呈现，适用于简单展示；三维建模则构建物理实体的数字镜像，具备毫米级精度、多源数据融合和实时交互能力，可支撑仿真预测与决策优化。选择建模方式应基于项目需求：关键业务场景需高精度建模，而基础展示可采用普通建模。未来趋势将结合AI辅助、3D高斯泼溅等技术提升建模效率，但需避免过度追求建模精度而忽视实际业务价值，应着力实现从可视化到业务应用的闭环。]]></description><category></category></item><item><title><![CDATA[vue3多个watch监听统一等待触发再执行后续逻辑的处理方案]]></title><link>https://blog.csdn.net/harrain/article/details/159159327</link><guid>https://blog.csdn.net/harrain/article/details/159159327</guid><author>harrain</author><pubDate>Tue, 17 Mar 2026 11:24:31 +0800</pubDate><description><![CDATA[摘要：Vue3中等待多个watch监听器触发的最佳实践包括：1）使用Promise.all封装（推荐），代码清晰且符合异步编程习惯；2）标志变量控制适合简单场景；3）Vue3.2+可使用watchPostEffect自动追踪依赖；4）计算属性组合状态语义清晰；5）通过flush选项精确控制时序。建议根据场景选择方案，Promise.all最适合复杂需求，简单场景可用标志变量，DOM操作需设置flush:'post'，同时注意避免循环依赖和内存泄漏。]]></description><category></category></item><item><title><![CDATA[鼠标移动到svg rect左右边框时可拉伸缩短rect]]></title><link>https://blog.csdn.net/harrain/article/details/158962163</link><guid>https://blog.csdn.net/harrain/article/details/158962163</guid><author>harrain</author><pubDate>Thu, 12 Mar 2026 11:17:16 +0800</pubDate><description><![CDATA[核心功能实现交互细节技术实现使用说明]]></description><category></category></item><item><title><![CDATA[svg的rect标签跟随鼠标拖动而移动时增加视觉辅助线]]></title><link>https://blog.csdn.net/harrain/article/details/158930271</link><guid>https://blog.csdn.net/harrain/article/details/158930271</guid><author>harrain</author><pubDate>Wed, 11 Mar 2026 17:10:57 +0800</pubDate><description><![CDATA[本文介绍了通过SVG实现拖拽元素吸附功能并添加视觉辅助线的方法。核心思路是在拖拽过程中检测元素间距，当小于阈值时动态绘制虚线辅助线。方案采用SVG &lt;line&gt;元素实现，具有简单直观的特点：1. 基础结构包含SVG画布、静态参考矩形和可拖动矩形；2. 实现水平和垂直方向的边缘/中心点吸附检测；3. 动态绘制品红色虚线辅助线，在不满足条件时自动移除；4. 优化了鼠标样式和操作说明等用户体验细节。该方案能清晰展示吸附对齐效果，提升交互设计的可视化反馈。]]></description><category></category></item><item><title><![CDATA[让svg的path标签跟随鼠标拖动而实时移动]]></title><link>https://blog.csdn.net/harrain/article/details/158928721</link><guid>https://blog.csdn.net/harrain/article/details/158928721</guid><author>harrain</author><pubDate>Wed, 11 Mar 2026 16:32:13 +0800</pubDate><description><![CDATA[摘要：本文介绍了实现SVG路径元素跟随鼠标拖动的完整解决方案。通过JavaScript监听mousedown、mousemove和mouseup事件，动态修改path元素的transform属性实现拖拽效果。重点讲解了坐标转换处理（使用createSVGPoint和matrixTransform确保精度）、边界限制方法（固定区域、SVG画布内或相对起点距离限制）以及原生SVG变换API的使用技巧。提供了可直接运行的HTML代码示例，并比较了原生SVG变换与CSStransform两种实现方式的优缺点。]]></description><category></category></item><item><title><![CDATA[vue局部修改ElementPlus的样式变量如--el-border-color-light]]></title><link>https://blog.csdn.net/harrain/article/details/157971490</link><guid>https://blog.csdn.net/harrain/article/details/157971490</guid><author>harrain</author><pubDate>Tue, 03 Mar 2026 10:00:17 +0800</pubDate><description><![CDATA[摘要：本文介绍了在Vue项目中局部修改ElementPlus组件CSS变量（如--el-border-color-light）的三种有效方法：1）使用深度选择器(:deep())在scoped样式中精准修改；2）通过唯一类名限制作用域的全局样式；3）直接在组件标签上使用行内样式。重点说明了变量覆盖的注意事项，包括需要同时修改hover状态变量，以及scoped样式的工作原理。此外还补充了SCSS变量与CSS变量的转换技巧，通过插值语法实现样式变量的灵活使用。]]></description><category></category></item><item><title><![CDATA[windows下载安装MySQL9.5的缺少Redistributable问题解决]]></title><link>https://blog.csdn.net/harrain/article/details/157992904</link><guid>https://blog.csdn.net/harrain/article/details/157992904</guid><author>harrain</author><pubDate>Thu, 12 Feb 2026 09:46:49 +0800</pubDate><description><![CDATA[提示：This application requires Visual Studio 2019 x64Redistributable, Please install the Redistributable then runthis installer again。出现这个错误是因为我们电脑缺少Microsoft Visual C++ 这个程序.接下来，安装mysql即可。安装完，须重新启动。]]></description><category></category></item><item><title><![CDATA[前端vue性能优化]]></title><link>https://blog.csdn.net/harrain/article/details/156943210</link><guid>https://blog.csdn.net/harrain/article/details/156943210</guid><author>harrain</author><pubDate>Wed, 11 Feb 2026 11:25:51 +0800</pubDate><description><![CDATA[本文介绍了前端性能优化的几种关键方法：1. 代码分割与懒加载：通过路由懒加载、组件分组打包和公共组件分割，减少初始加载体积；2. Tree Shaking：利用ES6模块特性消除无用代码，推荐函数式编程和按需引入；3. 内存优化：监控内存使用，避免闭包和全局变量导致的内存泄漏，注意Vue组件销毁；4. 渲染优化：使用骨架屏减少白屏时间，虚拟滚动提升长列表性能；5. Web Worker：处理计算密集型任务，但需注意通信成本和限制。这些方法可有效提升页面加载速度和运行性能。]]></description><category></category></item><item><title><![CDATA[electron加载显示网页，electron内的网页占用内存最大达到多少，网页不会卡顿]]></title><link>https://blog.csdn.net/harrain/article/details/157024515</link><guid>https://blog.csdn.net/harrain/article/details/157024515</guid><author>harrain</author><pubDate>Wed, 11 Feb 2026 11:22:55 +0800</pubDate><description><![CDATA[Electron应用内存管理建议：单个渲染进程内存占用应控制在300-500MB以内，总内存（含主进程和GPU进程）约760MB。卡顿原因包括内存泄漏、DOM复杂和进程通信压力。优化建议：使用DevTools检测内存、实施懒加载和虚拟滚动、优化图片资源。关键要避免主线程阻塞，长时间运行应用需特别注意内存泄漏问题，以确保应用流畅运行。]]></description><category></category></item><item><title><![CDATA[网页保持不卡，能占用浏览器最大的内存是多少]]></title><link>https://blog.csdn.net/harrain/article/details/157024481</link><guid>https://blog.csdn.net/harrain/article/details/157024481</guid><author>harrain</author><pubDate>Wed, 11 Feb 2026 11:22:15 +0800</pubDate><description><![CDATA[摘要： 单个网页标签页的内存安全上限通常为200MB-500MB（8GB以上内存的64位系统），超过1GB易导致崩溃。浏览器（如Chrome）对单个进程有软限制（约2GB堆内存），但内存泄漏、DOM节点过多或频繁垃圾回收会提前引发卡顿。硬件配置影响明显，8GB内存电脑建议单页不超过300MB。优化建议包括使用虚拟滚动、及时解绑事件/定时器、图片懒加载，并通过浏览器任务管理器（Shift+Esc）监控内存占用。普通页应保持在50MB-150MB，复杂应用300MB-600MB为正常，超过800MB需排查内存泄]]></description><category></category></item><item><title><![CDATA[vue3封装web worker通用hook useWorker]]></title><link>https://blog.csdn.net/harrain/article/details/157024432</link><guid>https://blog.csdn.net/harrain/article/details/157024432</guid><author>harrain</author><pubDate>Wed, 11 Feb 2026 11:18:03 +0800</pubDate><description><![CDATA[本文介绍了在Vue3中封装WebWorker的两种方案：1. 通用基础版通过useWorker composable封装Worker实例，实现类型安全的消息通信和自动资源释放，适用于Vite项目；2. 高级内联版通过Blob动态创建Worker，无需单独文件，适合简单任务。文章还指出了内存泄漏、路径问题、数据传递限制等常见问题及解决方案，强调使用onUnmounted自动终止Worker的重要性。这种封装方式显著提升了代码复用性和可维护性，使多线程编程更简单高效。]]></description><category></category></item><item><title><![CDATA[【读源码】axios拦截器的原理]]></title><link>https://blog.csdn.net/harrain/article/details/157687214</link><guid>https://blog.csdn.net/harrain/article/details/157687214</guid><author>harrain</author><pubDate>Tue, 10 Feb 2026 10:46:54 +0800</pubDate><description><![CDATA[Axios拦截器实现原理：通过Promise链式调用和数组排序机制构建处理流水线。请求拦截器采用后进先出（LIFO）顺序执行，核心请求居中，响应拦截器采用先进先出（FIFO）顺序执行。内部维护两个队列存储拦截器，利用unshift和push方法控制执行顺序，最终通过循环调用Promise.then()形成完整处理链。这种设计类似洋葱模型，既保证顺序性又提供扩展性。]]></description><category></category></item><item><title><![CDATA[leaflet封装vue组件]]></title><link>https://blog.csdn.net/harrain/article/details/156869489</link><guid>https://blog.csdn.net/harrain/article/details/156869489</guid><author>harrain</author><pubDate>Tue, 10 Feb 2026 10:46:28 +0800</pubDate><description><![CDATA[本文介绍了前端地图库从OpenLayers转向Leaflet的决策考量。Leaflet因其轻巧、易扩展、跨平台兼容性强等优势被选中，特别是能无缝对接公司现有的ArcGIS服务。文章详细阐述了基于Vue的组件化封装方案，包括LMap、LTileLayer等核心组件的实现逻辑，以及坐标转换、事件处理等关键技术细节。同时分享了开发过程中遇到的标记偏移、无限瓦片加载等典型问题及其解决方案，如通过调整iconAnchor定位、固定Leaflet版本来规避已知bug。整体架构采用响应式设计，实现了地图功能的高效封装与灵]]></description><category></category></item><item><title><![CDATA[地图POI搜索的原理]]></title><link>https://blog.csdn.net/harrain/article/details/156869019</link><guid>https://blog.csdn.net/harrain/article/details/156869019</guid><author>harrain</author><pubDate>Tue, 10 Feb 2026 10:45:28 +0800</pubDate><description><![CDATA[地图中的 POI（Point of Interest，兴趣点）搜索，是我们日常生活中使用频率极高的功能。无论是找附近的咖啡馆、搜索某个写字楼，还是导航到某个景点，背后都依赖于一套复杂而精密的技术体系。无论是在线服务利用强大的服务器集群，还是离线系统利用精心设计的索引结构（如 Trie 树 + Geohash），目标都是为了给你提供最精准、最快速的搜索体验。在地图数据库中，一个 POI 并不仅仅是一个坐标点，而是一个包含空间位置、语义信息和业务属性的复合实体。地图 POI 搜索的本质是一个**“多维筛选”]]></description><category></category></item></channel></rss>