vue3 可视化数据大屏 项目开发中，会遇到各种各样的头部，今天整理的是 vue3数据可视化大屏蓝色顶部组件 - 图书馆数据可视化大屏。
效果截图
帧动画效果
通过ae实现从两侧到中间的扫光动画，使用帧动画生成。帧动画虽然增加了效果同时也增加了文件大小。
动画持续时间
动画持...
yekong
1年前 (2023-09-06)
喜欢
数据可视化大屏项目中，我们需要实现帧动画，实现方式有很多种，这里的方法是通过将序列帧图片转为雪碧图来实现，但是这里似乎有个问题就是不容易控制宽高。
将图片合成雪碧图并实现动画
将雪碧图拆解为序列帧图片
既然能序列帧图片转为雪碧图，我们也可能需要将序列帧做成的雪碧图重新转回到帧图片...
yekong
1年前 (2023-09-05)
喜欢
vue数据可视化大屏项目中，为了让数据大屏更加酷炫，会增加帧动画，在以前的项目中为了让是将帧动画转为雪碧图然后再使用的。今天反向操作一波，将雪碧图转为序列帧图片。
在线地址
将雪碧图拆解为序列帧图片
关键代码
这里通过选择图片然后输入序列帧图片的宽和高，输入序列帧图片的数量，然后...
yekong
1年前 (2023-09-05)
喜欢
上一节我们学习了:cesium纹理采样设置酷炫轨迹飞线今天我们要学习的是cesium着色器实现旋转雷达特效。
动态效果
选择位置，创建矩形
首先我们需要选择一个坐标，来放置我们的雷达。Cesium.Rectangle.fromDegrees 是CesiumJS库中一个方便的...
yekong
1年前 (2023-09-05)
喜欢
在GLSL（OpenGL Shading Language）中，mat2 用于声明一个2x2的矩阵，它包含四个浮点数。这个数据结构常用于各种线性变换，例如旋转和缩放。
声明：
声明一个 mat2 变量的基本语法如下：
mat2 myMatrix;
你也可以在声明时进行初始化：
...
yekong
1年前 (2023-09-05)
喜欢
在GLSL（OpenGL Shading Language）中，atan 函数用于计算一个数或两个数的反正切（arctangent）。这个函数有两个不同的形式：
语法：
单参数形式： float atan(float y) 或 vecN atan(vecN y)
计算y的反...
yekong
1年前 (2023-09-05)
喜欢
在GLSL（OpenGL Shading Language）中，step 函数用于执行阶梯（step-like）函数操作。给定一个边缘值和一个输入值，step 函数返回0或1，取决于输入值是否大于或等于边缘值。
语法：
step 函数在GLSL中有两种基本形式：
float s...
yekong
1年前 (2023-09-05)
喜欢
在GLSL（OpenGL Shading Language）中，distance 函数用于计算两个点（通常表示为向量）之间的欧几里得距离。
语法：
GLSL的 distance 函数有多个重载版本，以支持不同维度的向量（vec2，vec3，vec4 等）。
float dista...
yekong
1年前 (2023-09-05)
喜欢
上一节我们学习了:cesium着色器实现实现上升流光飞线效果今天我们要学习的是cesium纹理采样设置酷炫轨迹飞线。
动态效果
上一节中cesium着色器实现实现上升流光飞线效果,我们学习了着色器的方法来绘制飞线，这一节课我们在上一节的基础上使用纹理采样的方式实现飞线。
我...
yekong
1年前 (2023-09-05)
喜欢
texture2D 是 GLSL（OpenGL Shading Language）中用于从2D纹理中进行采样（即读取纹理像素颜色）的一个内建函数。这个函数在渲染管线中的片元着色器（Fragment Shader）中常被使用。
参数：
第一个参数：纹理采样器（sampler2D）...
yekong
1年前 (2023-09-05)
喜欢
