向量在可视化中的运用

向量

概念

向量（英语：euclidean vector，物理、工程等也称作矢量、欧几里得向量）是数学、物理学和工程科学等多个自然科学中的基本概念。

表示

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

那么很简单的是，我们可以直接用AB来表示这条线段，那么我们还可以用点+向量的形式来表示这条线段，如上图AB就可以表示为A+ $overrightarrow{AB}$ =B，或者也可以表示为B+ $overrightarrow{BA}$ =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;
  }

}

加减法

向量的运算遵循平行四边形法则
加减法就非常形象，一张图搞定：

$overrightarrow{OA}+overrightarrow{OB}=overrightarrow{OC}$ ， $overrightarrow{OC}-overrightarrow{OB}=overrightarrow{BC}$ ， $overrightarrow{OB}-overrightarrow{OC}=overrightarrow{CB}$

我们可以这样理解：因为OA $parallel$ 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();