WebGL系列教程九（动画）

news2024/11/14 18:19:20

目录

  • 1 前言
  • 2 绘制立方体并进行纹理映射
  • 3 动画思路
  • 4 开始绘制
    • 4.1 在顶点着色器中声明旋转矩阵
    • 4.2 获取旋转矩阵变量并进行赋值
    • 4.3 计算角度
    • 4.4 每一帧都去绘制
    • 4.5 效果
    • 4.6 完整代码
  • 5 总结

1 前言

  上一篇我们讲了WebGL中的基础语法，现在我们已经讲过了三维物体的绘制，着色及纹理映射，现在我们可以讲一些稍微高级点的操作了，这一节我们来讲动画，我们考虑怎么让一个立方体动起来。

2 绘制立方体并进行纹理映射

  这一节的代码是在WebGL系列教程六（纹理映射与立方体贴图）的基础上修改而来的，因此绘制立方体和纹理映射的代码我们直接拿过来。

<script id="vertex-shader" type="x-shader/x-vertex">
    //顶点位置
    attribute vec4 a_Position;
    //纹理坐标
    attribute vec2 a_TexCoord;
    //传递纹理坐标
    varying vec2 v_TexCoord;
    void main(){
        gl_Position = a_Position;
        //直接将纹理坐标赋值给传递变量
        v_TexCoord = a_TexCoord;
    }
</script>
<script id="fragment-shader" type="x-shader/x-fragment">
    precision highp float;
    //采样器，固定写法
    uniform sampler2D u_Sampler;
    //接收顶点着色器传过来的值
    varying vec2 v_TexCoord;
    void main(){
    	//到某个纹理坐标去采样，也是固定写法
        gl_FragColor = texture2D(u_Sampler,v_TexCoord);
    }
</script>


// Create a cube
//    v6----- v7
//   /|      /|
//  v1------v0|
//  | |     | |
//  | |v5---|-|v4
//  |/      |/
//  v2------v3
const verticesColors = new Float32Array([
    // 前面
    -1.0, -1.0,  1.0,   0.0, 0.0,//v2 图片左下角纹理坐标
     1.0, -1.0,  1.0,   1.0, 0.0,//v3 图片左下角纹理坐标
     1.0,  1.0,  1.0,   1.0, 1.0,//v0 图片右下角纹理坐标
    -1.0,  1.0,  1.0,   0.0, 1.0,//v1 图片左上角纹理坐标

    // 后面
    -1.0, -1.0, -1.0,   0.0, 0.0,//v5 同上
     1.0, -1.0, -1.0,   1.0, 0.0,//v4 同上
     1.0,  1.0, -1.0,   1.0, 1.0,//v7 同上
    -1.0,  1.0, -1.0,   0.0, 1.0,//v6 同上

    // 上面
    -1.0,  1.0,  1.0,   0.0, 0.0,//v1 同上
     1.0,  1.0,  1.0,   1.0, 0.0,//v0 同上
     1.0,  1.0, -1.0,   1.0, 1.0,//v7 同上
    -1.0,  1.0, -1.0,   0.0, 1.0,//v6 同上

    // 下面
     -1.0, -1.0, 1.0,   0.0, 0.0,//v2 同上
     1.0,  -1.0, 1.0,   1.0, 0.0,//v3 同上
     1.0,  -1.0,-1.0,   1.0, 1.0,//v4 同上
     -1.0, -1.0,-1.0,   0.0, 1.0,//v5 同上

    // 左面
    -1.0, -1.0, -1.0,   0.0, 0.0,//v5 同上
    -1.0, -1.0,  1.0,   1.0, 0.0,//v2 同上
    -1.0,  1.0,  1.0,   1.0, 1.0,//v1 同上
    -1.0,  1.0, -1.0,   0.0, 1.0,//v6 同上

    // 右面
     1.0, -1.0,  1.0,   0.0, 0.0,//v3 同上
     1.0, -1.0, -1.0,   1.0, 0.0,//v4 同上
     1.0,  1.0, -1.0,   1.0, 1.0,//v7 同上
     1.0,  1.0,  1.0,   0.0, 1.0,//v0 同上
]);


const indices = new Uint8Array([
    0, 1, 2, 0, 2, 3, // 前面
    4, 5, 6, 4, 6, 7, // 后面
    8, 9, 10, 8, 10, 11, // 上面
    12, 13, 14, 12, 14, 15, // 下面
    16, 17, 18, 16, 18, 19, // 左面
    20, 21, 22, 20, 22, 23  // 右面
]);
gl.viewport(0, 0, canvas.width, canvas.height);
gl.enable(gl.DEPTH_TEST);
//顶点
let vertexColorBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER,vertexColorBuffer);
gl.bufferData(gl.ARRAY_BUFFER,verticesColors,gl.STATIC_DRAW);
let FSIZE = verticesColors.BYTES_PER_ELEMENT;
let a_Position = gl.getAttribLocation(program,'a_Position');
gl.vertexAttribPointer(a_Position,3,gl.FLOAT,false,FSIZE*5,0);
gl.enableVertexAttribArray(a_Position);
//指定纹理坐标值
let a_TexCoord = gl.getAttribLocation(program,'a_TexCoord');
gl.vertexAttribPointer(a_TexCoord,2,gl.FLOAT,false,5*FSIZE,3*FSIZE);
gl.enableVertexAttribArray(a_TexCoord);
let image = new Image();
image.src = 'static/sky.jpg';
image.onload = function(){
    console.log('image ok');
	//创建纹理对象
    let texture = gl.createTexture();
    //获取采样器
    let u_Sampler = gl.getUniformLocation(program,'u_Sampler');
    //反转Y轴，canvas的Y轴和WebGL的Y轴方向是反的
    gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL,1);
    //启用0号纹理
    gl.activeTexture(gl.TEXTURE0);
    gl.bindTexture(gl.TEXTURE_2D,texture);
    //设置纹理为，缩小纹理时，取纹理坐标周围四个像素的颜色均值
    gl.texParameteri(gl.TEXTURE_2D,gl.TEXTURE_MIN_FILTER,gl.LINEAR);
    //设置对象使用的图片，mipmap层级，图像的格式，纹理的格式，纹理数据类型，图片
    gl.texImage2D(gl.TEXTURE_2D,0,gl.RGB,gl.RGB,gl.UNSIGNED_BYTE,image);
    //将0号纹理赋值给采样器
    gl.uniform1i(u_Sampler,0);


    //绑定索引缓冲
    let indexBuffer =  gl.createBuffer();
    gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER,indexBuffer);
    gl.bufferData(gl.ELEMENT_ARRAY_BUFFER,indices,gl.STATIC_DRAW);
    //清空颜色缓冲和深度缓冲
    gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
    //绘制
    //顶点索引数组如果是Uint8Array，就是UNSIGNED_BYTE，表示数组里的值在0-2^8-1(255)
    //................Uint16Array,就是UNSIGNED_SHORT，表示数组里的值在0-2^16-1(65535)
    //................Uint32Array,就是UNSIGNED_INT，表示数组里的值在0-2^32-1(4294967295)
    gl.drawElements(gl.TRIANGLES, 36, gl.UNSIGNED_BYTE, 0);
};

效果：

在这里插入图片描述

3 动画思路

  现在我们要让这个立方体动起来。那怎么动呢？让立方体始终旋转就可以了。那怎么让它旋转呢？乘以我们之前讲到的旋转矩阵就可以了。那怎么让它一直动呢？用定时器可以实现，每秒都去执行，但是还有性能更好的实现方案，那就是requestAnimationFrame。requestAnimationFrame能够让浏览器每一帧都去调用一个函数。

4 开始绘制

4.1 在顶点着色器中声明旋转矩阵

<script id="vertex-shader" type="x-shader/x-vertex">
    //顶点位置
    attribute vec4 a_Position;
    //旋转矩阵
    uniform mat4 uRotateMatrix;
    //纹理坐标
    attribute vec2 a_TexCoord;
    //传递纹理坐标
    varying vec2 v_TexCoord;
    void main(){
    	//旋转矩阵乘以顶点的位置，表示每个顶点都经过了旋转
        gl_Position = uRotateMatrix * a_Position;
        //直接将纹理坐标赋值给传递变量
        v_TexCoord = a_TexCoord;
    }
</script>
<script id="fragment-shader" type="x-shader/x-fragment">
    precision highp float;
    //采样器，固定写法
    uniform sampler2D u_Sampler;
    //接收顶点着色器传过来的值
    varying vec2 v_TexCoord;
    void main(){
    	//到某个纹理坐标去采样，也是固定写法
        gl_FragColor = texture2D(u_Sampler,v_TexCoord);
    }
</script>

4.2 获取旋转矩阵变量并进行赋值

//创建旋转矩阵
var modelMatrix = new Matrix4();
//绕Y轴旋转60度，0，1，0，表示Y轴上的单位向量
modelMatrix.setRotate(60,0,1,0);
var uRotateMatrix = gl.getUniformLocation(program, 'uRotateMatrix');
gl.uniformMatrix4fv(uRotateMatrix,false,modelMatrix .elements);

4.3 计算角度

var ANGLE_STEP = 30.0;//假设每秒旋转30度
var currentAngle = 0.0; //当前是0度
var g_last = Date.now();//记录一个开始时间
function animate(angle) {
    // 计算角度
    var now = Date.now();//获取当前时间
    var elapsed = now - g_last;//两个时间相减，得到两个时间之差，单位为毫秒
    g_last = now;
    // 更新角度,一秒是1000毫秒，先算出过了几秒，再乘以角度的步长
    var newAngle = angle + ANGLE_STEP * (elapsed / 1000.0);
    return newAngle %= 360;
}

4.4 每一帧都去绘制

let tick = function(){
    currentAngle = animate(currentAngle);
    modelMatrix.setRotate(currentAngle,0,1,0);
    //绘制
    //略。。。
    //每一帧都去调用
    requestAnimationFrame(tick);
};
tick();

4.5 效果

在这里插入图片描述

4.6 完整代码

const verticesColors = new Float32Array([
    // 前面
    -1.0, -1.0,  1.0,   0.0, 0.0,//v2 图片左下角纹理坐标
     1.0, -1.0,  1.0,   1.0, 0.0,//v3 图片左下角纹理坐标
     1.0,  1.0,  1.0,   1.0, 1.0,//v0 图片右下角纹理坐标
    -1.0,  1.0,  1.0,   0.0, 1.0,//v1 图片左上角纹理坐标

    // 后面
     1.0, -1.0, -1.0,   0.0, 0.0,//v4 同上
    -1.0, -1.0, -1.0,   1.0, 0.0,//v5 同上
    -1.0,  1.0, -1.0,   1.0, 1.0,//v6 同上
     1.0,  1.0, -1.0,   0.0, 1.0,//v7 同上

    // 上面
    -1.0,  1.0,  1.0,   0.0, 0.0,//v1 同上
     1.0,  1.0,  1.0,   1.0, 0.0,//v0 同上
     1.0,  1.0, -1.0,   1.0, 1.0,//v7 同上
    -1.0,  1.0, -1.0,   0.0, 1.0,//v6 同上

    // 下面
     -1.0, -1.0, 1.0,   0.0, 0.0,//v2 同上
     1.0,  -1.0, 1.0,   1.0, 0.0,//v3 同上
     1.0,  -1.0,-1.0,   1.0, 1.0,//v4 同上
     -1.0, -1.0,-1.0,   0.0, 1.0,//v5 同上

    // 左面
    -1.0, -1.0, -1.0,   0.0, 0.0,//v5 同上
    -1.0, -1.0,  1.0,   1.0, 0.0,//v2 同上
    -1.0,  1.0,  1.0,   1.0, 1.0,//v1 同上
    -1.0,  1.0, -1.0,   0.0, 1.0,//v6 同上

    // 右面
     1.0, -1.0,  1.0,   0.0, 0.0,//v3 同上
     1.0, -1.0, -1.0,   1.0, 0.0,//v4 同上
     1.0,  1.0, -1.0,   1.0, 1.0,//v7 同上
     1.0,  1.0,  1.0,   0.0, 1.0,//v0 同上
]);


const indices = new Uint8Array([
    0, 1, 2, 0, 2, 3, // 前面
    4, 5, 6, 4, 6, 7, // 后面
    8, 9, 10, 8, 10, 11, // 上面
    12, 13, 14, 12, 14, 15, // 下面
    16, 17, 18, 16, 18, 19, // 左面
    20, 21, 22, 20, 22, 23  // 右面
]);
gl.viewport(0, 0, canvas.width, canvas.height);
gl.enable(gl.DEPTH_TEST);
//顶点
let vertexColorBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER,vertexColorBuffer);
gl.bufferData(gl.ARRAY_BUFFER,verticesColors,gl.STATIC_DRAW);
let FSIZE = verticesColors.BYTES_PER_ELEMENT;
let a_Position = gl.getAttribLocation(program,'a_Position');
gl.vertexAttribPointer(a_Position,3,gl.FLOAT,false,FSIZE*5,0);
gl.enableVertexAttribArray(a_Position);


//指定纹理坐标值
let a_TexCoord = gl.getAttribLocation(program,'a_TexCoord');
gl.vertexAttribPointer(a_TexCoord,2,gl.FLOAT,false,5*FSIZE,3*FSIZE);
gl.enableVertexAttribArray(a_TexCoord);
let image = new Image();
image.src = 'static/sky.jpg';
// Rotation angle (degrees/second)
let ANGLE_STEP = 30.0;
let currentAngle = 0.0; 
let modelMatrix = new Matrix4();
// Last time that this function was called
let g_last = Date.now();
function animate(angle) {
    // Calculate the elapsed time
    let now = Date.now();
    let elapsed = now - g_last;
    g_last = now;
    // Update the current rotation angle (adjusted by the elapsed time)
    let newAngle = angle + (ANGLE_STEP * elapsed) / 1000.0;
    return newAngle %= 360;
}
image.onload = function(){
    let tick = function(){
        // console.log('image ok');
        currentAngle = animate(currentAngle);
        modelMatrix.setRotate(currentAngle,0,1,0);

        let texture = gl.createTexture();
        let u_Sampler = gl.getUniformLocation(program,'u_Sampler');
        //反转Y轴
        gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL,1);
        //启用0号纹理
        gl.activeTexture(gl.TEXTURE0);
        gl.bindTexture(gl.TEXTURE_2D,texture);
        //设置纹理为，缩小纹理，取纹理坐标周围四个像素的颜色均值
        gl.texParameteri(gl.TEXTURE_2D,gl.TEXTURE_MIN_FILTER,gl.LINEAR);
        //设置对象使用的图片，mipmap层级，图像的格式，纹理的格式，纹理数据类型，图片
        gl.texImage2D(gl.TEXTURE_2D,0,gl.RGB,gl.RGB,gl.UNSIGNED_BYTE,image);
        //将0号纹理赋值给采样器
        gl.uniform1i(u_Sampler,0);

        //绑定索引缓冲
        let indexBuffer =  gl.createBuffer();
        gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER,indexBuffer);
        gl.bufferData(gl.ELEMENT_ARRAY_BUFFER,indices,gl.STATIC_DRAW);


        //赋值给u_MvpMatrix
        var uRotateMatrix= gl.getUniformLocation(program, 'uRotateMatrix');
        gl.uniformMatrix4fv(uRotateMatrix,false,uRotateMatrix.elements);
        //清空颜色缓冲和深度缓冲
        gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
        //绘制
        //顶点索引数组如果是Uint8Array，就是UNSIGNED_BYTE，表示数组里的值在0-2^8-1(255)
        //................Uint16Array,就是UNSIGNED_SHORT，表示数组里的值在0-2^16-1(65535)
        //................Uint32Array,就是UNSIGNED_INT，表示数组里的值在0-2^32-1(4294967295)
        gl.drawElements(gl.TRIANGLES, 36, gl.UNSIGNED_BYTE, 0);
        requestAnimationFrame(tick, canvas);
    };
    tick();
    
};

5 总结

  本文中我们讲解了动画的原理，并在绘制的立方体及纹理贴图后，绕Y轴旋转，形成了一个简单的动画。本篇的内容结合了之前讲过的所有内容，是一个比较综合的例子，希望读者仔细体会，回见~

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/2155038.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

14.面试算法-字符串常见算法题（三）

14.面试算法-字符串常见算法题（三）

1. 字符串回文问题 1.1 LeetCode.125. 验证回文串 回文问题在链表中是重点&#xff0c;在字符串中同样是个重点。当初我去美团面试第一轮技术面的第一个算法题就是让写判断字符串回文的问题。 这个本身还是比较简单的&#xff0c;只要先转换成字符数组&#xff0c;然后使用双…
阅读更多...
PS相关操作记录

PS相关操作记录

1. 磨皮步骤 1.1. 图层操作 先对照片进行去瑕疵、液化等操作&#xff0c;操作完的图层&#xff0c;重命名为液化&#xff0c;方便识别。复制两个图层&#xff0c;分别改为“低频”、“高频”&#xff0c;低频在下&#xff0c;高频在上。选中“低频”图层&#xff0c;滤镜 -&g…
阅读更多...
NodeJs文档

NodeJs文档

文件操作 // 1. 导入fs模块 const fs require(fs)文件写入 //异步写入 // fs.writeFile(文件名&#xff0c; 待写入的数据&#xff0c; 选项设置&#xff08;可选&#xff09;&#xff0c; 回调函数) fs.writeFile(./座右铭.txt, 三人行&#xff0c;必有我师傅, err > {/…
阅读更多...
kubernetes应用的包管理Helm工具

kubernetes应用的包管理Helm工具

目录 一、helm简介 二、部署helm 1、官网与资源 2、部署helm &#xff08;1&#xff09;安装helm &#xff08;2&#xff09;配置helm命令补齐 三、helm常用操作 &#xff08;1&#xff09;查询官方应用中心 &#xff08;2&#xff09;管理第三方repo源 &#xff08;…
阅读更多...
AI周报（9.15-9.21）

AI周报（9.15-9.21）

AI应用-宇宙建筑师&#xff1a;AI探索宇宙结构 近日&#xff0c;来自马克斯普朗克研究所等机构&#xff0c;利用宇宙学和红移依赖性对宇宙结构形成进行了场级仿真。 AI版“宇宙闪电侠”&#xff1a;若以传统宇宙模拟的缓慢行进比作悠然自得的蜗牛&#xff0c;那么AI便宛如宇宙…
阅读更多...
centos7 添加中文字体

centos7 添加中文字体

一、打开C:\Windows\Fonts 复制 复制出来再拷贝到linux服务器目录&#xff1a;/usr/share/fonts/jtwin #执行 #mkdir /usr/share/fonts/jtwin chmod -R 755 /usr/share/fonts/jtwin yum -y install ttmkfdir ttmkfdir -e /usr/share/X11/fonts/encodings/encodings.dir 编辑&…
阅读更多...
Ubuntu 安装和使用 Fcitx 中文输入法；截图软件flameshot

Ubuntu 安装和使用 Fcitx 中文输入法；截图软件flameshot

一、Ubuntu 安装和使用 Fcitx 中文输入法 在 Ubuntu 上安装和使用 Fcitx 输入法框架是一个常见的选择&#xff0c;特别是对于需要中文输入的用户。以下是详细的步骤来安装和配置 Fcitx 输入法&#xff1a; 1. 安装 Fcitx 和相关输入法 首先&#xff0c;更新你的包列表并安装…
阅读更多...
黑马智数Day1

黑马智数Day1

src文件夹 src 目录指的是源代码目录&#xff0c;存放项目应用的源代码&#xff0c;包含项目的逻辑和功能实现&#xff0c;实际上线之后在浏览器中跑的代码就是它们 apis - 业务接口 assets - 静态资源 &#xff08;图片&#xff09; components - 组件 公共组件 constants…
阅读更多...
1.量化第一步，搭建属于自己的金融数据库！

1.量化第一步，搭建属于自己的金融数据库！

数据是一切量化研究的前提。 做量化没有数据&#xff0c;就相当于做饭时没有食材。 很多时候&#xff0c;我们需要从大量的数据中寻找规律&#xff0c;并从中开发出策略。如果我们每次使用的时候&#xff0c;都从网上去找数据&#xff0c;一方面效率低下&#xff0c;另一方面短…
阅读更多...
erlang学习:Linux常用命令2

erlang学习:Linux常用命令2

目录操作命令 对目录进行基本操作 相关cd切换目录之类的就直接省去了&#xff0c;以下操作中都会用到 查看当前目录下的所有目录和文件 ls 列表查看当前目录下的所有目录和文件&#xff08;列表查看&#xff0c;显示更多信息&#xff09; ls -l 或 ll 在当前目录下创建一个…
阅读更多...
中断-MCU

中断-MCU

中断 目录 中断 中断的概念 中断的执行过程 中断服务函数 中断的部分专业术语 – 了解 STM32中的中断分类 嵌套向量中断控制器 NVIC STM32中的中断优先级 中断编程 外部中断&#xff08;单片机之外&#xff09;之EXTI中断 相关寄存器 外部中断&#xff08;EXTI&am…
阅读更多...
在jupyter notebook中取消代理服务器的解决方案

在jupyter notebook中取消代理服务器的解决方案

大家好，我是爱编程的喵喵。双985硕士毕业，现担任全栈工程师一职，热衷于将数据思维应用到工作与生活中。从事机器学习以及相关的前后端开发工作。曾在阿里云、科大讯飞、CCF等比赛获得多次Top名次。现为CSDN博客专家、人工智能领域优质创作者。喜欢通过博客创作的方式对所学的…
阅读更多...
2.个人电脑部署MySQL，傻瓜式教程带你拥有个人金融数据库！

2.个人电脑部署MySQL，傻瓜式教程带你拥有个人金融数据库！

2.个人电脑部署MySQL&#xff0c;傻瓜式教程带你拥有个人金融数据库&#xff01; ‍ 前边我们提到&#xff0c;比较适合做量化投研的数据库是MySQL&#xff0c;开源免费。所以今天我就写一篇教程来教大家如何在自己的环境中部署MySQL。 在不同的设备或系统中安装MySQL的步骤…
阅读更多...
MySQL篇（存储过程 触发器 存储函数）（持续更新迭代）

MySQL篇（存储过程 触发器 存储函数）（持续更新迭代）

目录 一、存储过程 1. 简介 2. 特点 3. 语法 3.1. 创建 3.2. 调用 3.3. 查看 3.4. 删除 4. 示例 二、变量 1. 简介 2. 系统变量 2.1. 查看系统变量 2.2. 设置系统变量 2.3. 演示示例 3. 用户定义变量 3.1. 赋值 方式一 方式二 3.2. 使用 3.3. 演示示例 4.…
阅读更多...
MES系统能够实时监控生产进度,优化生产排程

MES系统能够实时监控生产进度,优化生产排程

一、MES系统实时监控生产进度 MES系统通过集成各种数据采集手段&#xff08;如RFID、条形码、传感器、PLC等&#xff09;&#xff0c;能够实时、准确地采集生产现场的数据&#xff0c;包括设备状态、生产数量、生产时间、人员操作等信息。这些数据被实时传输到MES系统的数据库…
阅读更多...
群晖使用Docker部署WPS Office并实现异地使用浏览器制作办公文档

群晖使用Docker部署WPS Office并实现异地使用浏览器制作办公文档

文章目录 前言1. 本地环境配置2. 制作本地分享链接3. 制作公网访问链接4. 公网ip地址访问您的分享相册5. 制作固定公网访问链接 前言 想象一下这个场景&#xff1a;如果遇到周末紧急需要改方案&#xff0c;但团队成员都在各自家中&#xff0c;这个时候如果大家能够轻松访问这个…
阅读更多...
照片EXIF数据统计与可视化

照片EXIF数据统计与可视化

拍的照片越来越多&#xff0c;想要了解一下日常拍摄的习惯&#xff0c;便于后面换镜头、调整参数等操作&#xff0c;所以写了这个脚本来统计照片的EXIF数据。该脚本用于统计指定文件夹下所有JPG图片的EXIF数据&#xff0c;包括快门速度、ISO、焦距、光圈和拍摄时间&#xff0c;…
阅读更多...
网络资源模板--Android Studio 仿WeChat聊天App

网络资源模板--Android Studio 仿WeChat聊天App

目录 一、项目演示 二、项目测试环境 三、项目详情 四、完整的项目源码 一、项目演示 网络资源模板--仿微信聊天App 二、项目测试环境 三、项目详情 登陆注册 ### 登录功能&#xff08;LoginActivity&#xff09; 1. **界面初始化**&#xff1a;设置界面元素&#xff0c;包…
阅读更多...
二叉树---java---黑马

二叉树---java---黑马

二叉树 遍历 遍历分两种 广度优先遍历 尽可能先访问距离根节点最近的节点&#xff0c;也称之为层序遍历。 深度优先遍历 对于二叉树&#xff0c;进一步分为三种 pre-order前序遍历&#xff0c;对于每一颗子树&#xff0c;先访问该节点&#xff0c;然后是左子树&#xf…
阅读更多...
银河麒麟桌面操作系统如何添加WPS字体

银河麒麟桌面操作系统如何添加WPS字体

银河麒麟桌面操作系统如何添加WPS字体 1、使用场景2、操作方法步骤一&#xff1a;下载字体文件步骤二&#xff1a;打开终端步骤三&#xff1a;进入字体文件所在目录步骤四&#xff1a;拷贝字体文件到WPS字体目录步骤五&#xff1a;更新字体缓存步骤六&#xff1a;重启WPS Offic…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023