乐趣区

关于可视化:向量在可视化中的运用

jiezi

向量

概念

向量 （英语：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;
  }

}

加减法

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

，，

咱们能够这样了解：因为 OAAC，那么向量 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/…

退出移动版