• 如果您觉得本站非常有看点,那么赶紧使用Ctrl+D 收藏吧

向量在可视化中的运用

互联网 diligentman 1周前 (11-22) 5次浏览

向量

概念

向量 (英语: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/…


喜欢 (0)