梦凡尘-CSDN博客

原创 webgl 顶点、片元着色器传参，绘制彩色三角形

本文介绍了WebGL着色器编程的关键步骤：1）顶点着色器通过attribute接收顶点位置和颜色参数，用varying变量将颜色传递给片元着色器；2）片元着色器接收颜色值并输出；3）采用交错数组优化数据组织（5元素/顶点：2位坐标+3位颜色）；4）详细说明了缓冲区创建、绑定、数据写入和分配的5个步骤；5）重点解析了gl.vertexAttribPointer()中步进（FSIZE*5）和偏移量参数的使用，其中颜色数据需要偏移2个元素（FSIZE*2）。该流程实现了高效的顶点属性数据传输机制。

2025-11-04 16:14:34 350

原创 webgl 变换矩阵：旋转、平移、缩放

本文介绍了WebGL中常用的三种变换矩阵：旋转矩阵、平移矩阵和缩放矩阵。通过推导过程展示了这些矩阵的数学原理，包括三角函数关系、矩阵乘法运算等。重点说明了如何在WebGL中实现这些变换：使用mat4声明矩阵变量，按列主序创建具体矩阵值（如旋转角度、平移距离或缩放比例），并通过uniformMatrix4fv方法传递给着色器。文中还提供了每种变换的具体实现代码，包括顶点着色器中的矩阵运算和应用示例，展示了如何使用变换矩阵来旋转、平移或缩放三角形对象。这些矩阵变换是三维图形处理的基础操作。

2025-10-31 17:15:11 280

原创 webgl 三角形的平移和旋转

摘要：本文介绍了使用WebGL实现三角形平移和旋转的方法。对于平移，通过顶点着色器增加uniform变量u_Position，并在JavaScript中传递位移参数。对于旋转，基于三角函数推导旋转公式，在顶点着色器中实现坐标转换，可以单独传递cos和sin值或优化为vec2类型统一传递。两种变换都通过修改顶点着色器计算最终坐标位置，并保持齐次坐标系w分量为1.0。

2025-10-30 14:46:18 444

原创 Webgl 使用缓冲区绘制三角形，线段。

本文介绍了WebGL图形渲染的基本流程：首先初始化WebGL上下文并设置清空颜色；然后创建顶点和片元着色器，编译并链接为着色器程序；接着初始化顶点缓冲区，写入顶点数据并绑定到着色器变量；最后通过不同绘制模式（TRIANGLES、TRIANGLE_STRIP、TRIANGLE_FAN、LINES等）实现多种图形的渲染，包括三角形、矩形、多边形和线段等。文章详细说明了各绘制模式的区别和适用场景，展示了WebGL基础图形绘制的主要技术要点。

2025-10-30 10:15:47 407

原创 Webgl 入门（通过鼠标点击绘点）

本文介绍了使用WebGL绘制交互式点阵的实现过程。首先初始化WebGL上下文并设置黑色背景，然后创建并编译顶点着色器(定义点的位置和大小)和片元着色器(定义颜色精度和填充色)。接着获取着色器变量地址，并在画布点击事件中实现坐标转换：将鼠标点击的屏幕坐标转换为WebGL的标准化坐标(-1到1)，同时根据点击位置的不同象限设置不同颜色(第一象限红色，第三象限绿色，其他白色)。最后将转换后的坐标和颜色传递给着色器进行绘制，实现点击画布生成彩色点的功能。

2025-10-28 15:30:36 199

原创 Three.js 实现 3d 面积图

本文介绍了使用Three.js实现3D数据可视化的关键技术：1. 使用Line2创建可调粗细的线框；2. 通过ExtrudeGeometry创建拉伸几何体，实现数据到三维坐标的转换；3. 利用精灵贴图生成坐标轴文本；4. 创建带有高斯模糊的镜面反射效果；5. 编写流动Shader实现动态光效，并适配不同屏幕刷新率；6. 使用UnrealBloomPass实现局部辉光后期处理；7. 处理平面与三维坐标转换；8. 添加响应式布局适配窗口变化。这些技术共同构建了一个交互性强、视觉效果丰富的3D数据可视化系统。

2025-10-27 14:07:51 1055

原创 Three.js 设置抗锯齿效果的三种方法

本文介绍了三种抗锯齿技术及其实现方法： SSAA超级采样抗锯齿：通过超高分辨率渲染后降采样，实现全场景抗锯齿，但性能消耗较大。 FXAA快速近似抗锯齿：基于后期处理的边缘检测技术，性能消耗小但效果较粗糙。 TAA时域抗锯齿：利用多帧混合技术获得更好效果，但会带来背景色改变和帧率下降的问题，文中提供了相应的解决方案，包括使用ShaderPass修正背景色和通过performance.now()调整动画速度。

2025-10-24 15:59:05 361

原创 CryptoJs 实现前端 Aes 加密

本文介绍了使用crypto-js实现AES加解密的完整流程。首先通过npm安装依赖，然后提供两个核心函数：aesEncryption()用于CBC模式下的AES加密，aesDecrypt()用于对应解密。两个函数都需要传入待处理字符串、密钥和初始向量，并采用UTF-8编码和PKCS7填充方式。特别强调密钥和初始向量在加解密过程中必须保持一致。这段代码实现了一个完整的AES加解密方案，适用于需要数据加密传输或存储的场景。

2025-10-09 19:16:53 206

原创 paper.js 实现图片简单框选标注功能

本文介绍了基于Vue3和paper.js实现的可交互画布开发方案，主要内容包括：1. 画布初始化与paper.js集成；2. 背景图加载与自适应缩放；3. 选框的创建、编辑和交互功能实现；4. 操作按钮（删除/完成）的事件绑定；5. 碰撞检测与边界处理；6. 响应式窗口适配。该方案实现了选框的增删改查、移动缩放、状态管理等核心功能，采用分层设计和事件驱动模式，确保交互流畅性和代码可维护性。文章详细展示了各功能模块的关键代码实现，包括图层管理、事件处理、坐标计算等技术细节。

2025-10-09 16:28:39 904

原创 vue3+vite Cannot find module ‘@/XXXXXX‘ or its corresponding type declarations

在使用vue3+vite 创建新的工程时会出现Connot find module '@/xxx'错误，根本原因是vite 中没有配置跟目录别名导致的，可以在vite.config.ts 中增加如下配置。如果tsconfig.json中增加了references属性，则要在references引用的文件中都增加paths配置即可。如果在tsconfig.json中增加。

2025-04-11 11:19:47 826 1

原创 Cannot find module ‘vue‘ or its corresponding type declarations

在使用vue3+vite创建新的工程时，在新增.vue文件时会出现Cannot find module 'vue'这个错误。只需要我们在项目中的.d.ts文件中添加以下代码即可。

2025-04-11 10:57:24 1016

原创 Vue3 使用inject 获取provide 发布的响应式数据动态更新失败问题解决

在日常开发过程中，有时候会碰到使用inject 获取父组件provide发布的响应式数据，当修改父组件provide 绑定的响应式数据源时，子组件使用Inject获取的数据并没有更新。当父组件执行一些修改state.demoData 变量的代码逻辑时，子组件中的demoData 并没有发生变化。可以在父组件使用provide 的地方将绑定的变量用computed 包裹一下。这样在子组件中使用inject 获取的数据也会跟着发生变化；

2024-12-03 20:34:13 691 1

原创可编辑div遇到的那些事

在日常开发中有时可能会遇到input 或 textarea 不能满足的开发场景，比如多行输入的情况下，textarea 的右下角icon 无法去除, 所以此时可以使用div 设置可编辑状态，完成功能开发，在开发的过程中仍会遇到一下问题。// 否则的话可以根据event.target.innerText.trim() 获取输入的文本。// 如果进行的是中文输入法输入，或者输入的是空格，则不保存输入文本。// 第6部将光标设置到文本末尾。// 添加输入文本长度检测。5，输入处理，获取输入的文本内容。

2024-10-14 16:58:33 1184

原创 js div 中文本设置全选

【代码】js div 中文本设置全选。

2024-10-14 16:43:06 204

原创 js将文本添加到剪贴板上

剪贴板添加文本兼容写法。

2024-10-14 16:31:31 463

原创 vue3 watch 监听表单绑定的对象 newVal 和oldVal 相同问题解决

vue3 中使用Element plus 表单组件绑定对象时，使用watch 监听绑定的变量，需要根据表单中某一个单选的值变化处理相应的代码逻辑。若要使用watch 监听formData 中某个属性的变化时，需要先将依据formData 使用computed 创建一个变量。之后再用watch 监听tempData 则就能在表单的操作中监听到formData 的变化。// 此时在表单的操作过程中，newVal, oldVal 就会不一样了，// 表单绑定的数据。

2024-08-12 15:48:23 1037 1

原创 iframe 内嵌跨域页面如何做到高度自适应

parent.html 页面中通过iframe内嵌children.html页面，且children.html 页面高度是动态变化的，此时需要parent.html中的iframe的高度自适应children.hml 的高度，避免出现滚动条., 解决方法分为以下两步。// 此时监听统计图dom尺寸的改变，重载统计图。// child.html最外层元素 .page-container。// my-src 对应的是childrem.html 页面的地址。// 设置iframe 的高度。

2024-07-26 15:39:22 1364 1

原创 postMessage 收到消息类型 “webpackWarnings“

当A系统中的parent页面使用iframe内嵌C系统的child页面，并且在parent页面中通过postMessageg给child页面发送消息时，如果C系统中使用了webpack,则webpack也会给child页面发送消息，消息类型为webpackWarnings。// 因为webpack 发送的数据是对象类型，parent 页面发送的是经过JSON.stringify转换的字符串类型的。// 过滤来自webpack发送的possMessage 消息。// 处理来自parent 页面的数据。

2024-07-26 15:35:59 1457

原创 qiankun子应用vue加载js资源失效问题解决

/ 指定部分特殊的动态加载的微应用资源（css/js) 不被 qiankun 劫持处理。// 在入口方法的whiteWords 中创建白名单字段，比如cdn_js。* @param {string} 要加载的外部资源链接。// 目标外部js资源地址+ '?* @description: 动态加载资源方法。

2024-07-13 14:50:38 958

原创 Vue3 对于内嵌Iframe组件进行缓存

对于系统内所有内嵌iframe 的页面均通过同一个路由'/iframe', 在router.query内传入不同src 参数，在同一组件内显示iframe 内嵌页面，对这些页面分别进行缓存。3.4 在template 部分增加组件通过v-show 控制ifram 路由缓存的组件是否渲染。// 保存相同iframe 组件修改之后的组件名称同iframe套壳组件的映射关系。3.3 对同一iframe 路由传入不同参数的组件套壳修改name 进行缓存。-- iframe 组件缓存 -->

2024-07-06 11:25:59 3291

原创 Vue3 对跳转同一路由传入不同参数的页面分别进行缓存

watch 监听对于route.query 是否存在catchName 参数的路由分别进行缓存。path: '/myRouter/detail', // 路径。从列表页跳转至不同的详情页面，对这些详情页面分别进行缓存。keepAlive: true, // 是否被缓存。在路由文件里对需要进行缓存的路由对象添加meta 属性。-- 有条件的进行缓存 -->// 需要缓存的详情页面路由。

2024-07-06 11:09:10 1497 1

原创 ResizeObserver监听画布尺寸改变动态渲染echarts

在日常开发中有时遇到同数据相关的业务可能会用到echarts插件。一般在封装echarts组件的时候大家可能都会通过windows对象监听浏览器窗口大小的改变动态渲染echarts,这样当echarts窗口改变导致echarts画布元素大小改变的同时，就能调用相关api进行重绘。这样统计图就能一直充满canvas画布了，并能适配尺寸的电脑屏幕。但是在有些业务场景下，对于同一台电脑而言，窗口大小不会改变，但是会动态修改echarts绑定的dom元素的宽高。

2024-06-03 22:41:13 666

原创 CodeMirror 创建标签计算编辑器

在日常开发中对于一些数据计算场景可能会遇到标签计算的需求，下面关于如何使用CodeMirror实现标签计算编辑功能。

2024-06-01 16:36:10 979

原创 Echarts x轴坐标二级分组

在使用echarts 封装组件的时候，偶尔会遇到需要x轴坐标进行二层分组的需求。那么如何对echarts 进行二层分组呢，有以下几个步骤：仅介绍二层分组的逻辑。有兴趣的可以进行三层延伸。

2024-05-28 19:29:15 3293 2

原创 vxetable 如何修改行点击高亮背景色

根据row-style 属性绑定的方法，根据回调参数{rowIndex} ,判断如果当前索引和记录点击高亮行的索引相同，则。在使用vxetable中的表格组件时，有时会遇到修改点击高亮行背景色的情况。要修改高亮行背景色只需要以下两步即可。根据传入的高亮背景色，对行样式进行设置即可。

2024-05-28 19:03:29 1576

原创 Element plus 低版本弹窗组件添加拖拽功能

在使用element plus 弹窗组件el-dialog 的时候，由于自己组件库版本过低，所以就会缺失某些功能，比如弹窗组件的可拖拽功能。因为某些原因element plus 组件库又不能升级，所以此时就需要自己为弹窗组件添加拖拽功能。插件中使用watch，只能执行一次，并不能监听store.visible 的改变。所以使用Object.defineProperty，监听store.visible。自定义插件，编写拖拽功能。

2024-05-27 23:36:55 939 1