Flutter笔记:Matrix4矩阵变换与案例

Flutter笔记
Matrix4矩阵变换及其案例

作者李俊才 (jcLee95):https://blog.csdn.net/qq_28550263
邮箱 :291148484@163.com
本文地址:https://blog.csdn.net/qq_28550263/article/details/134474764


【简介】在3D计算机图形中,4x4矩阵最常见的用途是作为变换矩阵,这在各种 UI 框架中都非常常见,比如前端的 three.js 中也有类似对象。文本介绍 Flutter 中 Matrix4 矩阵变换的基础知识及其简单应用。本文涉及很一些学知识,不理解的读者可以参考线性代数相关教材。


1. 概述

Flutter 中,矩阵变换是一种强大的技术,它可以对目标对象进行各种变换,如缩放、平移和旋转。这种变换是通过使用 Matrix4,一个表示 4D 矩阵的类,来实现的。这里的 4D 并不是指四维空间,而是指这个矩阵有 4 行 4 列。通过改变这个矩阵的元素,我们可以实现对目标对象的各种变换。

Matrix4 的应用非常广泛,它可以用于各种图形和 3D 场景的变换。例如,我们可以通过改变矩阵的元素来控制图形的缩放比例、平移距离和旋转角度。这种变换方式的通用性使得我们可以在各种不同的场景中使用它。

矩阵变换是一种在 Flutter 中实现动画效果和交互效果的重要手段。通过理解和掌握 Matrix4 的使用,我们可以在 Flutter 中创建出各种各样的动画和交互效果。

2. 矩阵变换基础

2.1 矩阵的概念和性质

矩阵是一种特殊的数表,由 m 行 n 列的数值组成,通常用大写字母表示。矩阵的行数和列数称为矩阵的维度。矩阵的每个数值称为矩阵的元素。矩阵的加法、减法和乘法都有特定的运算规则。特别的,矩阵的乘法不满足交换律,即 AB ≠ BA。

2.2 图形变换与 Matrix4 类

2.2.1 矩阵与变换

要讲清楚矩阵和变换,就需要提一提线性代数中中的一些知识。同济六版线性代数教材中有一个很重要的应用就是“正交二次型”,其几何意义就是将一个图形变为对应的正交图形,就像用一个扳手将一个斜着或歪着的图形扳正——于是这个时候读了大学的你开始回忆,当年是如何求解将图形扳正的那个二次型的。但是实际上我们除了可以使用二次型将图形“扳正”,其实也可以通过变换将一个图形“扳”成其它样子,这就是线性变换的意义所在。

没有学过的也没事,我带大家过一遍。

1. 旋转变换

旋转变换是一种常见的线性变换,它可以将平面上的点或者空间中的点绕某一点旋转一定的角度。在二维平面上,一个点 (x, y) 绕原点旋转 θ 角度后的新坐标 (x’, y’) 可以通过以下矩阵乘法得到:

在这里插入图片描述

对应的旋转变换矩阵就是:

在三维空间中,绕 z 轴旋转的旋转变换矩阵为:

在这里插入图片描述

2. 反射变换

反射变换是一种将平面上的点或者空间中的点关于某条直线或者某个平面进行翻转的变换。

在二维平面上,关于 x 轴的反射变换矩阵为:

在这里插入图片描述

对应的变换矩阵为:

在这里插入图片描述

另外一种情况是,关于y=x轴变换,可以得到对应的变换矩阵为:
在这里插入图片描述

如果是三维空间中,关于 xy 平面的反射变换,对应矩阵为:

在这里插入图片描述

3. 伸缩变换

伸缩变换是一种将平面上的点或者空间中的点在某个方向上进行拉伸或者压缩的变换。在二维平面上,沿 x 轴方向进行伸缩的变换矩阵为:
在这里插入图片描述

4. 投影变换

投影变换是一种将空间中的点投影到某个平面上的变换。
在这里插入图片描述
在三维空间中,将点投影到 xy 平面上的投影变换矩阵为:

在这里插入图片描述

5. 切变变换

切变变换是一种将平面上的点或者空间中的点在某个方向上进行错切的变换。在二维平面上:

平行x轴的切边变换:

在这里插入图片描述

或者 平行y轴的切边变换:

在这里插入图片描述

在三维空间中,沿 z 轴方向进行切变的变换矩阵为:

在这里插入图片描述
(其它轴类似)

要理解和运用矩阵变换,这些很重要。实际上后续小节的内容中,如果需要准确控制变换,没有这些数学知识是做不到的。其中,在后面的 4-3 小节中,有一个具体的例子,讲述了是如何应用到具体开发中的。

5. 逆变换的概念

逆变换是线性代数中的一个重要概念。对于一个线性变换,如果存在另一个线性变换,使得这两个变换的组合是恒等变换(即任何向量经过这两个变换后仍然保持不变),那么我们就说这两个变换是互逆的。

在矩阵表示的线性变换中,逆变换对应于矩阵的逆。给定一个矩阵 A,如果存在另一个矩阵 B,使得 AB = BA = E(其中 E 是单位矩阵),那么我们就说 B 是 A 的逆矩阵,记作
A^-1

逆矩阵的存在性并不是总成立的,只有当矩阵是可逆的(或者说是非奇异的)时,逆矩阵才存在。在实际应用中,我们通常通过高斯消元法或者 LU 分解等方法来计算矩阵的逆。

逆变换在许多应用中都非常重要。例如,在解线性方程组时,我们可以通过求解系数矩阵的逆来找到解。在计算机图形学中,逆变换可以用来撤销之前的变换,或者从目标状态计算出初始状态。

从几何意义上说,逆矩阵对应的是逆变换。一个变换让图形产生某个形变,那么一个对应的逆变换让变换后的图形还原原来的样子。

2.2.2 Matrix4 类

3D 图形的变换中,我们通常使用 4x4 的矩阵,这种矩阵可以表示平移、缩放、旋转等变换,也可以表示这些变换的组合。在这个矩阵中,最后一列通常用于表示平移变换,其余部分用于表示缩放和旋转变换。

Flutter 中,这种 4x4 矩阵由 Matrix4 类来表示。Matrix4 类提供了一系列的方法,可以方便地创建和操作 4x4 矩阵实现 3D图形变换。例如:

  • Matrix4.identity() 可以创建一个单位矩阵;
  • Matrix4.diagonal3Values() 可以创建一个对角矩阵;
  • Matrix4.compose() 可以创建一个表示组合变换的矩阵。

2.3 Flutter 中的坐标系统

对于手机屏幕来讲,坐标系的:

  • 原点 在手机屏幕的左上角
  • 水平向右是 x 轴的正方向;
  • 竖直向下是 y 轴的正方向;
  • 垂直于屏幕的方向是 z 轴。

这种坐标系统的设计使得我们可以方便地定位屏幕上的任何一个点,也方便我们使用 Matrix4 进行图形的变换。

3. Matrix4 的基本操作

3.1 创建 Matrix4 对象

Flutter 中,我们可以使用多种方式创建 Matrix4 对象。最简单的方式是使用 Matrix4 的构造函数,这将创建一个全零的矩阵。如果我们想创建一个单位矩阵,可以使用 Matrix4.identity() 方法。此外,我们还可以使用 Matrix4.diagonal3Values() 方法创建一个对角矩阵,或者使用 Matrix4.compose() 方法创建一个表示组合变换的矩阵。

Matrix4 matrix1 = Matrix4(); // 创建一个全零的矩阵
Matrix4 matrix2 = Matrix4.identity(); // 创建一个单位矩阵
Matrix4 matrix3 = Matrix4.diagonal3Values(1.0, 2.0, 3.0); // 创建一个对角矩阵

矩阵的本质是变换,在上面几个矩阵的示例中,代表了不同的变换:

  • Matrix4 matrix1 = Matrix4(); 创建的是一个全零矩阵。在大多数情况下,全零矩阵在图形变换中没有实际用途,因为它会将所有的点都映射到原点;
  • Matrix4 matrix2 = Matrix4.identity(); 创建的是一个单位矩阵。单位矩阵在变换中相当于“无操作”,因为任何向量与单位矩阵相乘都会得到原向量。它常用作变换矩阵的初始值,然后通过应用一系列的变换(如旋转、缩放等)来修改这个矩阵;
  • Matrix4 matrix3 = Matrix4.diagonal3Values(1.0, 2.0, 3.0); 创建的是一个对角矩阵。对角矩阵可以用来进行均匀或非均匀的缩放。例如,上述代码创建的矩阵会在 x 轴方向上保持原大小,在 y 轴方向上放大 2 倍,在 z 轴方向上放大 3 倍。

3.2 Matrix4 的基本方法

Matrix4 类提供了一系列的基本方法,可以用于获取和设置矩阵的元素,以及进行矩阵的基本运算。例如,我们可以使用 [] 运算符获取和设置矩阵的元素,使用 + 和 - 运算符进行矩阵的加法和减法运算,使用 运算符进行矩阵的乘法运算。

double value = matrix1[0]; // 获取矩阵的元素
matrix1[0] = value; // 设置矩阵的元素
Matrix4 result1 = matrix1 + matrix2; // 矩阵的加法运算
Matrix4 result2 = matrix1 - matrix2; // 矩阵的减法运算
Matrix4 result3 = matrix1 * matrix2; // 矩阵的乘法运算

3.3 Matrix4 的变换方法

Matrix4 类提供了一系列的变换方法,可以用于对矩阵进行平移、缩放、旋转等变换。这些方法都会改变矩阵的元素,从而实现对目标对象的变换。

matrix1.translate(10.0, 20.0, 30.0); // 平移变换
matrix1.scale(2.0, 3.0, 4.0); // 缩放变换
matrix1.rotateX(1.0); // 绕 x 轴旋转
matrix1.rotateY(1.0); // 绕 y 轴旋转
matrix1.rotateZ(1.0); // 绕 z 轴旋转

4. 基于 Matrix4 的平移、缩放和旋转变换

4.1 使用 Matrix4 进行平移变换

在 Flutter 中,我们可以使用 Matrix4 的 translate 方法进行平移变换。这个方法接受三个参数,分别表示在 x、y 和 z 轴上的平移距离。

Matrix4 matrix = Matrix4.identity();
matrix.translate(10.0, 20.0, 30.0); // 在 x、y 和 z 轴上分别平移 10、20 和 30 单位

这将会改变 Matrix4 对象的元素,使得它表示一个平移变换。我们可以将这个矩阵应用到一个图形上,使得这个图形在 x、y 和 z 轴上分别平移 10、20 和 30 单位。

4.2 使用 Matrix4 进行缩放变换

我们可以使用 Matrix4 的 scale 方法进行缩放变换。这个方法接受三个参数,分别表示在 x、y 和 z 轴上的缩放比例。

  Matrix4 matrix = Matrix4.identity();
  matrix.scale(2.0, 3.0, 4.0); // 在 x、y 和 z 轴上分别缩放 2、3 和 4 倍

这将会改变 Matrix4 对象的元素,使得它表示一个缩放变换。我们可以将这个矩阵应用到一个图形上,使得这个图形在 x、y 和 z 轴上分别缩放 2、3 和 4 倍。

4.3 使用 Matrix4 进行旋转变换

Matrix4 类提供了 rotateX、rotateY 和 rotateZ 三个方法,可以用于进行旋转变换。这些方法接受一个参数,表示旋转的角度。

  Matrix4 matrix = Matrix4.identity();
  matrix.rotateX(1.0); // 绕 x 轴旋转 1 弧度
  matrix.rotateY(1.0); // 绕 y 轴旋转 1 弧度
  matrix.rotateZ(1.0); // 绕 z 轴旋转 1 弧度

这将会改变 Matrix4 对象的元素,使得它表示一个旋转变换。我们可以将这个矩阵应用到一个图形上,使得这个图形分别绕 x、y 和 z 轴旋转 1 弧度。

实际上,要准确控制,还是要回到之前的数学知识。结合之前讲解的代数学知识,以绕x轴旋转为例。当绕x轴旋转时,旋转矩阵为:

[ 1 0 0 0 cos ⁡ θ − sin ⁡ θ 0 sin ⁡ θ cos ⁡ θ ] \begin{bmatrix} 1 & 0 & 0 \\ 0 & \cos\theta & -\sin\theta \\ 0 & \sin\theta & \cos\theta \end{bmatrix} 1000cosθsinθ0sinθcosθ

对应的用于 Matrix4 的矩阵表示为:

[ 1 0 0 0 0 cos ⁡ θ − sin ⁡ θ 0 0 sin ⁡ θ cos ⁡ θ 0 0 0 0 1 ] \begin{bmatrix} 1 & 0 & 0 & 0 \\ 0 & \cos\theta & -\sin\theta & 0 \\ 0 & \sin\theta & \cos\theta & 0 \\ 0 & 0 & 0 & 1 \end{bmatrix} 10000cosθsinθ00sinθcosθ00001

在这个基础上,以绕x轴正向旋转为例:

  1. 首先,我们需要创建一个 Matrix4 实例。

  2. 然后,我们可以使用 Matrix4 的 setEntry 方法来设置矩阵的元素。对于绕 x 轴旋转的变换,我们需要设置的元素如下:

  • 第二行第二列的元素为 cosθ
  • 第二行第三列的元素为 -sinθ
  • 第三行第二列的元素为 sinθ
  • 第三行第三列的元素为 cosθ
  1. 最后,我们可以使用这个 Matrix4 实例来对图形进行变换。
// 创建一个 Matrix4 实例
final matrix4 = Matrix4.identity();

// 设置旋转角度
final theta = math.pi / 4;  // 旋转 45 度

// 设置矩阵的元素
matrix4.setEntry(1, 1, math.cos(theta));
matrix4.setEntry(1, 2, -math.sin(theta));
matrix4.setEntry(2, 1, math.sin(theta));
matrix4.setEntry(2, 2, math.cos(theta));

// 使用 Matrix4 实例来对图形进行变换
final transformedWidget = Transform(
  transform: matrix4,
  child: /* 变换的组件 */,
);

上面的代码中,我们首先创建了一个 Matrix4 实例,然后设置了旋转角度为 45 度,接着设置了矩阵的元素,最后使用这个 Matrix4 实例来对图形进行变换。

在实际应用中,我们通常会先定义一个变换矩阵来表示变换,然后再将其应用到图形上。在 Flutter 中,我们可以使用 Matrix4 的构造函数来直接创建一个表示特定变换的矩阵。

比如:

import 'dart:math' as math;
import 'package:flutter/widgets.dart';

// 设置旋转角度
final theta = math.pi / 4;  // 旋转 45 度

// 定义一个表示旋转变换的矩阵
final matrix4 = Matrix4(
  1, 0, 0, 0,
  0, math.cos(theta), -math.sin(theta), 0,
  0, math.sin(theta), math.cos(theta), 0,
  0, 0, 0, 1,
);

// 将 Matrix4 转换为 List<double>
final matrix4List = matrix4.storage.toList();

// 使用 Matrix4 实例来对图形进行变换
final transformedWidget = Transform(
  transform: matrix4,
  child: /* your widget */,
);

旋转45度是一个特例,我们可以在理解的基础上进一步写成一个函数,用于绕 x 轴旋转,就像这样:

import 'dart:math' as math;

Matrix4 rotationMatrix(double angleInDegrees) {
  // 将角度转换为弧度
  final theta = angleInDegrees / 180.0 * math.pi;

  // 创建一个列表来表示矩阵
  final matrix = [
    [1, 0, 0, 0],
    [0, math.cos(theta), -math.sin(theta), 0],
    [0, math.sin(theta), math.cos(theta), 0],
    [0, 0, 0, 1],
  ];

  // 创建一个 Matrix4 实例
  final matrix4 = Matrix4.fromList(matrix.expand((i) => i).toList());

  return matrix4;
}

这个函数中,我们首先将输入的角度转换为弧度,然后创建了一个列表来表示矩阵,最后将这个列表转换为 Matrix4 实例并返回。这样,我们就可以通过调用这个函数来创建任意角度的绕 x 轴旋转矩阵了。这个列表 matrix ,就表示的是绕 x 轴旋转变换所用的变换矩阵。

仅举这个例子作为示范,其它的情况都是之前提到数学知识的应用,读者可以按照这个思路参考得出。

5. 复合变换、逆变换和透视变换的实现

5.1 使用 Matrix4 进行复合变换

在 Flutter 中,我们可以通过连续调用 Matrix4 的变换方法来实现复合变换。例如,我们可以先进行平移变换,然后进行缩放变换,最后进行旋转变换。

Matrix4 matrix = Matrix4.identity();
matrix.translate(10.0, 20.0, 30.0); // 平移变换
matrix.scale(2.0, 3.0, 4.0); // 缩放变换
matrix.rotateZ(1.0); // 旋转变换

这将会改变 Matrix4 对象的元素,使得它表示一个复合变换。我们可以将这个矩阵应用到一个图形上,使得这个图形先进行平移变换,然后进行缩放变换,最后进行旋转变换。

5.2 使用 Matrix4 进行逆变换

Matrix4 类提供了 invert 方法,可以用于计算矩阵的逆。逆变换可以用于撤销之前的变换。

  Matrix4 matrix = Matrix4.identity();
  matrix.translate(10.0, 20.0, 30.0); // 平移变换
  Matrix4 inverseMatrix = Matrix4.inverted(matrix); // 计算逆变换

这将会创建一个新的 Matrix4 对象,它表示的变换可以撤销原来的变换。我们可以将这个矩阵应用到一个图形上,使得这个图形恢复到原来的状态。

5.3 使用 Matrix4 进行透视变换

Matrix4 类提供了 setEntry 方法,可以用于设置矩阵的元素。我们可以通过设置矩阵的元素来实现透视变换。

Matrix4 matrix = Matrix4.identity();
matrix.setEntry(3, 2, 0.001); // 设置矩阵的元素,实现透视变换

这将会改变 Matrix4 对象的元素,使得它表示一个透视变换。我们可以将这个矩阵应用到一个图形上,使得这个图形产生透视效果。

6. Matrix4 在动画和交互效果中的应用

6.1 使用 Matrix4 创建动画效果

在 Flutter 中,我们可以使用 Matrix4 和动画控制器(AnimationController)一起创建动画效果。例如,我们可以创建一个动画,使得一个图形在一段时间内进行平移、缩放和旋转变换。

  AnimationController controller = AnimationController(
    duration: const Duration(seconds: 2),
    vsync: this,
  );

  Matrix4 matrix = Matrix4.identity();
  controller.addListener(() {
    matrix.translate(controller.value * 10.0, controller.value * 20.0, controller.value * 30.0);
    matrix.scale(controller.value * 2.0, controller.value * 3.0, controller.value * 4.0);
    matrix.rotateZ(controller.value * 1.0);
  });

  controller.forward();

这将会创建一个动画,使得一个图形在 2 秒内进行平移、缩放和旋转变换。

6.2 使用 Matrix4 创建交互效果

我们可以使用 Matrix4 和手势识别器(GestureRecognizer)一起创建交互效果。例如,我们可以创建一个交互效果,使得用户可以通过拖动来控制一个图形的平移变换。

  Matrix4 matrix = Matrix4.identity();
  double dx = 0.0, dy = 0.0;

  GestureDetector(
    onPanUpdate: (details) {
      dx += details.delta.dx;
      dy += details.delta.dy;
      matrix.setIdentity();
      matrix.translate(dx, dy);
    },
    child: Transform(
      transform: matrix,
      child: FlutterLogo(size: 100.0),
    ),
  );

这将会创建一个交互效果,使得用户可以通过拖动来控制一个图形的平移变换。

6.3 使用 Matrix4 创建 3D 效果

我们可以使用 Matrix4 创建 3D 效果。例如,我们可以创建一个效果,使得一个图形在 3D 空间中进行旋转。

  Matrix4 matrix = Matrix4.identity();
  matrix.setEntry(3, 2, 0.001); // 设置矩阵的元素,实现透视效果
  matrix.rotateY(1.0); // 绕 y 轴旋转

  Transform(
    transform: matrix,
    child: FlutterLogo(size: 100.0),
  );

这将会创建一个 3D 效果,使得一个图形在 3D 空间中进行旋转。

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

java回调函数

在java中是存在回调函数的&#xff0c;我们可以把回调函数理解为一个被作为参数传递的函数。 类似于&#xff0c;我可以设置一个功能给系统&#xff0c;但是只有特定时候才会触发&#xff0c;触发的时候就会把函数作为参数的形式传递到另外的函数中。一般都是使用系统中写好的…

Vue3+Vite实现工程化,插值表达式和v-text以及v-html

1、插值表达式 插值表达式最基本的数据绑定形式是文本插值&#xff0c;它使用的是"Mustache"语法&#xff0c;即 双大括号{{}} 插值表达式是将数据 渲染 到元素的指定位置的手段之一插值表达式 不绝对依赖标签&#xff0c;其位置相对自由插值表达式中支持javascript的…

NSSCTF第13页(1)

[NCTF 2018]Easy_Audit 小小代码审计 $_REQUEST:PHP的内置变量&#xff0c;是一个数组&#xff0c;保存传递的参数&#xff0c;它的特性是如果get,post一起传参&#xff0c;则会优先post传参&#xff0c;可以由此进行变量覆盖。 $_SERVER:PHP的内置变量&#xff0c;是一个数组…

unity教程

前言 伴随游戏行业的兴起&#xff0c;unity引擎的使用越来越普遍&#xff0c;本文章主要记录博主本人入门unity的相关记录大部分依赖siki学院进行整理。12 一、认识unity引擎&#xff1f; 1、Unity相关信息&#xff1a; Unity的诞生&#xff1a;https://www.jianshu.com/p/550…

如何解决swagger-editor在线接口调试时的跨域问题

文章目录 一&#xff0c;序言二&#xff0c;问题重现1. 运行swagger-editor2. 运行接口服务3. 问题重现步骤 三&#xff0c;解决问题思路1. 去除浏览器安全限制2. 服务器接口统一处理3. 委托nginx转发 四&#xff0c;完整接口代码传送 一&#xff0c;序言 在 Docker 运行swagg…

提升 Python 执行速度:Codon、C/C++、Rust、Numba(JIT)、Taichi、Nuitka、MatxScript

几种流行的 Python 性能加速方案对比&#xff1a;https://zhuanlan.zhihu.com/p/604519817 对于一般通用场景用户&#xff0c;对性能没有那么强烈的诉求&#xff0c;紧跟官方步伐&#xff0c;升级到最新版本的 Python 既可&#xff0c;或者使用 PyPy。Numba、Codon、Taichi 等这…

电子画册真的好好用,制作也简单,都快来学学!

同纸质画册相比&#xff0c;电子画册无需受时间、空间、地域等限制&#xff0c;它通过手机、电脑即可发送文件&#xff0c;轻松实现在线浏览&#xff0c;使用起来更方便。 如何制作电子画册&#xff1f;这里同大家分享一下超简单的电子画册制作教程&#xff0c;0基础也能轻松上…

机器学习的医疗乳腺癌数据的乳腺癌疾病预测

项目视频讲解:基于机器学习的医疗乳腺癌数据的乳腺癌疾病预测 完整代码数据分享_哔哩哔哩_bilibili 效果演示: 代码: #第一步!导入我们需要的工具 import numpy as np import pandas as pd import matplotlib.pyplot as plt import seaborn as sns %matplotlib inlin…

kubenetes-容器网络接口CNI

一、CNI Kubernetes 网络模型设计的基础原则是&#xff1a; 所有的Pod能够不通过NAT(网络地址转换)就能相互访问。所有的节点能够不通过NAT就能相互访问。容器内看见的IP地址和外部组件看到的容器IP是一样的。 Kubernetes的集群里&#xff0c;IP地址是以Pod为单位进行分配的…

IoC DI

Spring 的两大核心思想 : IoC 和 AOP 我们要将对象的控制权交给Spring ,我们就需要告诉 Spring 哪些对象是需要帮我们进行创建的,这里有两类注解可以实现 : 类注解(Controller Service Repository Component Configuration)和方法注解(Bean) 这五大注解都表示把这个对象交给…

2023-11-18 LeetCode每日一题(数位和相等数对的最大和)

2023-11-18每日一题 一、题目编号 2342. 数位和相等数对的最大和二、题目链接 点击跳转到题目位置 三、题目描述 给你一个下标从 0 开始的数组 nums &#xff0c;数组中的元素都是 正 整数。请你选出两个下标 i 和 j&#xff08;i ! j&#xff09;&#xff0c;且 nums[i] …

深入理解网络协议:通信世界的基石

&#x1f482; 个人网站:【 海拥】【神级代码资源网站】【办公神器】&#x1f91f; 基于Web端打造的&#xff1a;&#x1f449;轻量化工具创作平台&#x1f485; 想寻找共同学习交流的小伙伴&#xff0c;请点击【全栈技术交流群】 在当今数字化时代&#xff0c;网络协议是连接世…

Windows下安装RabbitMQ

1.安装Erlang 因为RabbitMQ是用Erlang语言编写的&#xff0c;所以在安装RabbitMQ之前需要先安装Erlang。 如果还未安装Erlang&#xff0c;官方下载安装包&#xff0c;点击Download Windows installer下载Erlang Downloads - Erlang/OTP 下载Erlang/OTP后&#xff0c;双击otp的…

JavaScript管理HTMLDOM元素(增删改查)

本文主要讲解JavaScript如何通过管理HTML上的DOM元素&#xff0c;其中包括如何查询、创建、修改以及删除具体功能和源码讲解。 增加 首先我们准备一个HTML框架和简单CSS样式&#xff0c;我对其中元素作用和关系进行一个简单说明。 <!DOCTYPE html> <html><he…

2023年道路运输企业主要负责人证考试题库及道路运输企业主要负责人试题解析

题库来源&#xff1a;安全生产模拟考试一点通公众号小程序 2023年道路运输企业主要负责人证考试题库及道路运输企业主要负责人试题解析是安全生产模拟考试一点通结合&#xff08;安监局&#xff09;特种作业人员操作证考试大纲和&#xff08;质检局&#xff09;特种设备作业人…

C#特性(Attribute)

C#特性&#xff08;Attribute&#xff09;是一种在程序中添加元数据的机制&#xff0c;它可以为代码提供额外的信息和指示。通过使用特性&#xff0c;我们可以为类、方法、属性等元素添加标记&#xff0c;以便在运行时进行更多的操作和决策。 C#特性是一种声明式编程的工具&…

计算机网络的体系结构

目录 一. 计算机体系结构的形成二. 协议与层次划分2.1 数据传输过程2.2 什么是网络协议2.3 网络协议的三要素2.4 协议有两种形式2.4 各层协议2.5 什么是复用和分用 \quad 一. 计算机体系结构的形成 \quad 计算机网络是一个非常复杂的系统, 相互通信的两个计算机系统必须高度协调…

二叉树中的深搜之二叉树的所有路径

257. 二叉树的所有路径 - 力扣&#xff08;LeetCode&#xff09; 对于二叉树的深度搜索&#xff0c;要学会从以下三个角度来去看待问题&#xff1a; 1. 全局变量&#xff0c;有时候全局变量会减少参数的个数&#xff0c;简化很多流程&#xff1b; 这道题目&#xff0c;要返回根…

linux配置固定ip(两种方法)

首先刚下载的vm&#xff0c;刚创建的虚拟机&#xff0c;肯定是需要配置ip的 其次以前我的每次都是设置自动ip&#xff0c;这样每次登录都会自动获取ip地址&#xff0c;并且每次的ip都不相同。 ~方法&#xff1a; 开机登陆后 1)Cd /etc/sysconfig/network-scripts 2)Vi ifcf…

vue3的Watch使用详解

vue官网提到&#xff1a; watch 的第一个参数可以是不同形式的“数据源”&#xff1a;它可以是一个 ref (包括计算属性)、一个响应式对象、一个 getter 函数、或多个数据源组成的数组&#xff1a; 1.监听单个Ref 2.监听一个getter函数 当然只修x或者y其中一个的值&#xff0c;…