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

向量

概念

向量（英语：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)，如果咱们将其逆时针旋转，那么旋转后的向量的坐标怎么示意呢？见下图：

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

向量

概念

示意

定义

加减法

向量的旋转

向量绘制根底图形

矩形

多边形

曲线

树

其余图形