大前端架构设计与疑难技术解决方案

数学（Math）解决方案

重要通知

。

基本概况

LaTeX 数学公式

$$ \log_a 1 = 0 $$

$$ x=y+1 $$

象限

象限（Quadrant），是平面直角坐标系（笛卡尔坐标系）中里的横轴和纵轴所划分的四个区域，每一个区域叫做一个象限。象限以原点为中心，x，y轴为分界线。右上的称为第一象限，左上的称为第二象限，左下的称为第三象限，右下的称为第四象限。原点和坐标轴上的点不属于任何象限。

坐标

记（x, y）是象限中的一点。

  • 第一象限中的点：x > 0, y > 0。
  • 第二象限中的点：x < 0, y > 0。
  • 第三象限中的点：x < 0, y < 0。
  • 第四象限中的点：x > 0, y < 0。

三角函数

对数

定义：对数公式是数学中的一种常见公式，如果a^x=N(a>0,且a≠1)，则x叫做以a为底N的对数,记做x=log(a)(N)，其中a叫做对数的底，N叫做真数。

度（degree）与弧度（radian）的换算

# 弧长 L

# 半径 R 

# 度 A 单位 n°

# 弧度 F 单位：rad


# 根据度计算弧度的值
F = L/R = (π/180°)*A

# 根据弧度计算度的值
A = F / (π/180°)


# 基本公式
1° = π/180° * 1rad
1rad = 180°/π

45° = π/4 * 1rad
90° = π/2 * 1rad
180° = π * 1rad

几何图形

线段

二次贝塞尔曲线

三次贝塞尔曲线

二次贝塞尔曲线需要两个点。第一个点是用于二次贝塞尔计算中的控制点，第二个点是曲线的结束点。曲线的开始点是当前路径中最后一个点。

圆弧

圆上任意两点间的部分叫做圆弧，简称弧。

圆

在一个平面内，围绕一个点并以一定长度为距离旋转一周所形成的封闭曲线叫作圆(Circle)，全称圆形。

圆弧上某点坐标计算

在计算圆弧上某点的坐标时，需要知道圆心的坐标、半径的长度以及该点所对应的弧度或角度。假设圆心的坐标为（x₀,y₀），半径的长度为r，弧度为θ。我们需要求解的点的坐标为（x,y）。

# 计算x轴坐标
x = x₀ + r * cos(θ);

# 计算y轴坐标
y = y₀ + r * sin(θ);

三角形

四边形

多边形

线性代数

数理统计

Sylvester

Sylvester 是一个用于 JavaScript 的向量、矩阵和几何库，它包括用于对任意维数的向量和矩阵进行建模，以及用于对 3 维空间中的无限线和平面进行建模的类。

  • 官网：http://sylvester.jcoglan.com/
  • 参考文档：http://sylvester.jcoglan.com/docs.html

mathlab

旨在成为 JavaScript 中最好的矩阵实验室。

  • GitHub：https://github.com/timqian/mathlab
  • NPM：https://www.npmjs.com/package/mathlab
  • API：https://timqian.com/mathlab/

代码示例

import { 
  Complex, Sparse, abs, acos, add, and, asin, atan, atan2, band, bnot, bor, bxor, ceil, clone, cos, det, diag, dim,
  div, dot, eig, epsilon, eq, exp, floor, geq, getBlock, getDiag, gt, identity, inv, leq, linspace, log, lshift, lt,
  mod, mul, neg, negtranspose, neq, norm2, norm2Squared, not, or, pointwise, pointwise2, pow, random, reciprocal, rep,
  round, rrshift, rshift, same, setBlock, sin, sqrt, sub, tan, tensor, transpose, fft, ifft 
} from 'mathlab';

基础方法列表

Math Object functions：数学对象函数

abs | acos | asin | atan | ceil | cos | exp | floor | log | round | sin | sqrt | tan

import { abs, acos, asin, atan, ceil, cos, exp, floor, log, round, sin, sqrt, tan } from 'mathlab';

Arithmetic operations：算术运算

add | sub | mul | div | neg

import { add, sub, mul, div, neg } from 'mathlab';

Linear algebra：线性代数

dot | solve | det | inv | norm2 | tensor | eig

import { dot, solve, det, inv, norm2, tensor, eig } from 'mathlab';

Fast Fourier Transforms：快速傅立叶变换

fft | ifft

import { fft, ifft } from 'mathlab';

Utility functions：实用功能

dim | same | rep | diag | identity | random | linspace

import { dim, same, rep, diag, identity, random, linspace } from 'mathlab';

Complex：复杂矩阵

import { Complex, abs } from 'mathlab'

Sparse：稀疏矩阵

import { Sparse } from 'mathlab'

glMatrix

glMatrix是一个注重速度和高性能的向量和矩阵数学库。

  • 官网：https://glmatrix.net/
  • 参考文档：https://glmatrix.net/docs/index.html
  • GitHub：https://github.com/toji/gl-matrix
  • NPM：https://www.npmjs.com/package/gl-matrix

代码示例

import { glMatrix, mat2, mat2d, mat3, mat4, quat, quat2, vec2, vec3, vec4 } from 'glMatrix';


console.log(mat2.create()); // 创建二维矩阵
console.log(mat3.create()); // 创建三维矩阵
console.log(mat4.create()); // 创建四维矩阵

console.log(vec2.create()); // 创建Array.length === 2的数组
console.log(vec3.create()); // 创建Array.length === 3的数组
console.log(vec4.create()); // 创建Array.length === 4的数组

二维矩阵

import { glMatrix, mat2, mat2d, mat3, mat4, quat, quat2, vec2, vec3, vec4 } from 'glMatrix';

三维矩阵

import { glMatrix, mat2, mat2d, mat3, mat4, quat, quat2, vec2, vec3, vec4 } from 'glMatrix';

四维矩阵

import { glMatrix, mat2, mat2d, mat3, mat4, quat, quat2, vec2, vec3, vec4 } from 'glMatrix';

mat4.create(); // 创建矩阵
mat4.clone(a);  // 拷贝矩阵
mat4.copy(out, a);

// 基础运算规则
mat4.add(out, a, b); // 加法
mat4.sub(out, a, b); // 减法 mat4.subtract(out, a, b)
mat4.mul(out, a, b); // 乘法 mat4.multiply(out, a, b)
mat4.adjoint(out, a); // 共轭
mat4.transpose(out, a); // 共轭转置
mat4.invert(out, a); // 反转

mat4.translate(out, a, v); // 平移
mat4.scale(out, a, v); // 缩放
mat4.rotate(out, a, rad, axis); // 旋转
mat4.rotateX(out, a, rad); // 
mat4.rotateY(out, a, rad); // 
mat4.rotateZ(out, a, rad); // 

mat4.fromValues(m00, m01, m02, m03, m10, m11, m12, m13, m20, m21, m22, m23, m30, m31, m32, m33); // 
mat4.set(out, m00, m01, m02, m03, m10, m11, m12, m13, m20, m21, m22, m23, m30, m31, m32, m33); // 
mat4.identity(out); // 
mat4.transpose(out, a); // 
mat4.determinant(a); // 

mat4.fromTranslation(out, v); // 
mat4.fromScaling(out, v); // 
mat4.fromRotation(out, rad, axis); // 
mat4.fromXRotation(out, rad); // 
mat4.fromYRotation(out, rad); // 
mat4.fromZRotation(out, rad); // 
mat4.fromRotationTranslation(out, q, v); // 
mat4.fromQuat2(out, a); // 
mat4.getTranslation(out, mat); // 
mat4.getScaling(out, mat); // 
mat4.getRotation(out, mat); // 
mat4.fromRotationTranslationScale(out, q, v, s); // 
mat4.fromRotationTranslationScaleOrigin(out, q, v, s, o); // 
mat4.fromQuat(out, q); // 
mat4.frustum(out, left, right, bottom, top, near, far); // 

mat4.perspectiveNO(out, fovy, aspect, near, far); // 
mat4.perspectiveZO(out, fovy, aspect, near, far); // 透视投影矩阵
mat4.perspectiveFromFieldOfView(out, fov, near, far); // 

mat4.orthoZO(out, left, right, bottom, top, near, far); // 正射投影矩阵
mat4.lookAt(out, eye, center, up); // 
mat4.targetTo(out, eye, target, up); // 

mat4.str(a); // 
mat4.frob(a); // 
mat4.multiplyScalar(out, a, b); // 
mat4.multiplyScalarAndAdd(out, a, b, scale); // 
mat4.exactEquals(a, b); // 
mat4.equals(a, b); //
Last Updated:
Contributors: 709992523