Press "Enter" to skip to content

向量在可视化中的运用

向量

 

概念

 

向量(英语:euclidean vector,物理、工程等也称作 矢量 、 欧几里得向量 )是 数学物理学工程科学 等多个 自然科学 中的基本概念。

 

表示

 

在可视化中,我们通常使用代数来表示向量。

 

代数表示指在指定了一个坐标系之后,用一个向量在该坐标系下的坐标来表示该向量,兼具了符号的抽象性和几何形象性,因而具有最高的实用性,被广泛采用于需要定量分析的情形。 对于自由向量,将向量的起点平移到坐标原点后,向量就可以用一个 坐标系 下的一个点来表示,该点的 坐标值 即向量的终点坐标。

 

那幺很简单的是,我们可以直接用AB来表示这条线段,那幺我们还可以用点+向量的形式来表示这条线段,如上图AB就可以表示为A+

=B,或者也可以表示为B+

 

 

=A,都是可以的。

 

定义

 

在笛卡尔坐标系中,定义一个 Vector2d 来表示向量

 

export default class Vector2d { 
  /**
   * 定义向量
   * @param x 
   * @param y 
   */  constructor(x: number, y: number) { 
    this.x = x;
    this.y = y;
  }
  // 复制向量
  copy() {
    return new Vector2d(this.x, this.y);
  }
   
  // 向量相加 
  add(v) {
    this.x += v.x;
    this.y += v.y;
    return this;
  }
    
  // 向量相减  
  sub(v) {
    this.x -= v.x;
    this.y -= v.y;
    return this;
  }
  // 向量伸缩
  scale(a) {
    this.x *= a;
    this.y *= a;
    return this;
  }
  // 转化为笛卡尔坐标系
  toPoint(): [number, number] { 
    const { x, y } = this;
    return [x, y];
  }
  // 向量旋转
  rotate(rad) {
    const c = Math.cos(rad), s = Math.sin(rad);
    const x = this.x;
    const y = this.y;
    this.x = x * c + y * -s;
    this.y = x * s + y * c;
    return this;
  }
}

 

加减法

 

向量的运算遵循平行四边形法则

 

加减法就非常形象,一张图搞定:

 

 

 

我们可以这样理解:因为OA AC,那幺向量OA与OB的和就可以视为O先移动到A,再从A移动到C,所以向量OA与OB的和就是OC。其他两个式子同理。

 

同样可以用坐标表示出来:

 

加法:a+b=(x1+x2,y1+y2),减法:a-b=(x1-x2,y1-y2)。

 

而在我们的代码中,就可以使用如下的方式

 

// y轴默认是向下,可以使用scale(1, -1)向上翻转
    ctx.scale(1, -1);
    
    const OA = new Vector2d(30, 60);
    ctx.beginPath();
    ctx.moveTo(0, 0);
    ctx.lineTo(...OA.toPoint());
    ctx.stroke();
    const OB = new Vector2d(60, 30);
    ctx.beginPath();
    ctx.moveTo(0, 0);
    ctx.lineTo(...OB.toPoint());
    ctx.stroke();
    
    const OC = OA.copy().add(OB);
    ctx.beginPath();
    ctx.moveTo(0, 0);
    ctx.lineTo(...OC.toPoint());
    ctx.stroke();

 

向量的旋转

 

对于向量 =(x1,y1),如果我们将其逆时针旋转 ,那幺旋转后的向量 的坐标怎幺表示呢?见下图:

 

 

我们令向量OA的模长为L,那幺x1= ,y1= ,x2= ,y2=

 

因为 ,所以x2= ,展开可得 ,y2同理。

 

向量绘制基础图形

 

矩形

 

多边形

 

曲线

 

 

其他图形

 

参考文献:

https://blog.csdn.net/g21glf/…

Be First to Comment

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注