在JS中定义和使用Vector2

于 2024-10-06 18:36:08 发布
阅读量610 收藏 14
点赞数 8
分类专栏： JavaScript 文章标签： javascript 类 Vector2
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/graypigen1990/article/details/142730210
版权

概述

Vector2是GDSCript中表示二维向量的类型，你会发现无论在任何编程语言中，只要你想很好的实现2D绘图以及几何和物理相关，Vector2是你必须要实现的一个类。我之前学C++时就写过一个C++的版本。

本篇就介绍我自己在JavaScript中定义的Vector2类型。它将是我接下来基于Canvas和SVG进行绘图的类的基础类型。

定义Vector2类型

在这里插入图片描述

// =======================================================
// Vector2
// 自定义类，Javascript版本的2D向量类型
// 巽星石
// 2024年10月6日13:18:59
// 2024年10月6日17:19:54
// 2D向量类型
// =======================================================
class Vector2{
    /*==================== 构造函数 ====================*/ 
    constructor(x,y){ // 构造函数
        this.x = x
        this.y = y
    }
    /*==================== 静态方法 ====================*/
    static ZERO(){
        return new Vector2(0,0);
    }
    static LEFT(){
        return new Vector2(-1,0);
    }
    static RIGHT(){
        return new Vector2(1,0);
    }
    static UP(){
        return new Vector2(0,-1);
    }
    static DOWN(){
        return new Vector2(0,1);
    }
    static ONE(){
        return new Vector2(1,1);
    }
    static ROTATED(deg){ //返回与X轴夹角为deg度的单位向量
        var vec = this.RIGHT();
        vec.rotated(deg);
        return vec;
    }
    static pVector2(ang,len){ // 返回极坐标点
        if(typeof(ang) == "number" && typeof(len) == "number"){
            return this.ROTATED(ang).times(len);
        }
    }
    static rad_to_deg(rad){ // 弧度转角度
        return rad * (180.0 / Math.PI) ;
    }

    static deg_to_rad(deg){ // 角度转弧度
        return deg * (Math.PI / 180.0) ;
    }

    static sin(deg){  //修正后的正弦函数
        const PI2 = Math.PI * 2    //2π
        let ang_rad = Vector2.deg_to_rad(deg);  //转为弧度
        let yu = Math.abs(ang_rad % PI2)        
        //所有正负180度或360度 + 任意圈数的sin值设为0
        return (yu != Math.PI && yu != 0) ? Math.sin(ang_rad) : 0
    }

    static cos(deg){  //修正后的余弦函数
        const PI2 = Math.PI * 2    //2π
        let ang_rad = Vector2.deg_to_rad(deg);  //转为弧度
        let yu = Math.abs(ang_rad % PI2)        
        //所有正负90度 + 任意圈数的cos值设为0
        return (yu != Math.PI/2) ? Math.cos(ang_rad) : 0
    }
    /*==================== 方法 ====================*/ 
    distance_to(b){  // 返回到b点的距离
        if(b.constructor.name == "Vector2"){
            const dx = this.x - b.x;
            const dy = this.y - b.y;
            return Math.sqrt(Math.pow(dx,2) + Math.pow(dy,2))
        }
    }
    
    direction_to(b){  // 返回到b点的方向
        if(b.constructor.name == "Vector2"){
            let vec = b.minus(this);  // AB向量 = B - A
            return vec.normalized();
        }
    }

    length(){ //返回向量的长度
        const o = new Vector2(0,0); //坐标系原点
        return this.distance_to(o)
    }

    normalized(){ // 获取归一化向量
        return this.divide(this.length());
    }

    /*==================== 角度相关 ====================*/ 
    angle(){ // 与X轴夹角（角度）
        return Vector2.rad_to_deg(Math.asin(this.normalized().y));
    }

    angle_to(b){ // 到b向量的夹角（角度）
        if(b.constructor.name == "Vector2"){
            return b.angle() - this.angle();
        }
    }
    rotated(deg){ // 旋转向量
        const r  = this.length();
        const ang = this.angle();
        
        var ang_rad = deg + ang;

        this.x = r * Vector2.cos(ang_rad);
        this.y = r * Vector2.sin(ang_rad);
    }
    /*==================== 运算 ====================*/
    plus(b){ //加法
        switch (typeof(b)) {
            case "object":
                if(b.constructor.name == "Vector2"){
                    return new Vector2(this.x + b.x,this.y + b.y)
                }
                break;
        
            default:
                break;
        }
    }

    minus(b){ //减法
        switch (typeof(b)) {
            case "object":
                if(b.constructor.name == "Vector2"){
                    return new Vector2(this.x - b.x,this.y - b.y)
                }
                break;
        
            default:
                break;
        }
    }
    
    times(b){ //乘法
        switch (typeof(b)) {
            case "number":
                return new Vector2(this.x * b,this.y * b)
                break;
            case "object":
                if(b.constructor.name == "Vector2"){
                    return new Vector2(this.x * b.x,this.y * b.y)
                }
                break;
            default:
                break;
        }
    }

    divide(b){ //除法
        switch (typeof(b)) {
            case "number":
                return new Vector2(this.x/b,this.y/b)
                break;
            case "object":
                if(b.constructor.name == "Vector2"){
                    return new Vector2(this.x / b.x,this.y / b.y)
                }
                break;
            default:
                break;
        }
    }
}

在网页中使用Vector2类型

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="1.js"></script>
</head>
<body>
    
</body>
<script>
    var a = new Vector2(100,100);
    console.log(a);
</script>
</html>

运行效果：

向量的长度

向量的长度是指到坐标系原点(0,0)的距离。

var a = new Vector2(100,100);
var b = new Vector2(200,100);
console.log(a.length());
console.log(b.length());

两点间距离

var a = new Vector2(100,100);
var b = new Vector2(200,100);
console.log(a.distance_to(b));

到点B的方向向量

var a = new Vector2(100,100);
var b = new Vector2(200,100);
console.log(a.direction_to(b));

归一化向量

var a = new Vector2(100,100);
var b = new Vector2(200,100);
console.log(a.normalized());

四则运算

加法

var a = new Vector2(100,100);
var b = new Vector2(200,100);
console.log(a.plus(b));

减法

var a = new Vector2(100,100);
var b = new Vector2(200,100);
console.log(a.minus(b));

乘法

var a = new Vector2(100,100);
var b = new Vector2(200,100);
console.log(a.times(b));   # 乘以一个Vector2
console.log(a.times(2));   # 乘以一个标量

除法

var a = new Vector2(100,100);
var b = new Vector2(200,100);
console.log(a.divide(b));   # 除以一个Vector2
console.log(a.divide(2));   # 除以一个标量

求角度

我们知道$ \sin \theta = \frac{y}{r} ，其中 r = 1 ，则 ，其中r = 1，则 ，其中r=1，则 \sin \theta = y ，则 ，则 ，则 \theta = \arcsin (y) $。

也就是我们要求一个向量与X轴的夹角θ，只需要求其归一化向量的y坐标的反正弦函数即可。

angle(){ // 与X轴夹角（角度）
  return this.rad_to_deg(Math.asin(this.normalized().y));
}

与X轴正方向的夹角

var a = new Vector2(100,100);
var b = new Vector2(200,100);
console.log(a.angle());
console.log(b.angle());

到B向量的夹角

var a = new Vector2(100,100);
var b = new Vector2(200,100);
console.log(a.angle_to(b));
console.log(b.angle_to(a));

向量旋转

var a = new Vector2(100,100);
console.log(a.length());
a.rotated(45)
console.log(a);
console.log(a.length());

常用单位向量和极坐标点

仿照GDSCript中的Vector2，设计了一些静态方法用于获取一些常用的单位向量。

static ZERO(){
    return new Vector2(0,0);
}
static LEFT(){
    return new Vector2(-1,0);
}
static RIGHT(){
    return new Vector2(1,0);
}
static UP(){
    return new Vector2(0,-1);
}
static DOWN(){
    return new Vector2(0,1);
}
static ONE(){
    return new Vector2(1,1);
}
static ROTATED(deg){ //返回与X轴夹角为deg度的单位向量
    var vec = this.RIGHT();
    vec.rotated(deg);
    return vec;
}
static pVector2(ang,len){ // 返回极坐标点
    if(typeof(ang) == "number" && typeof(len) == "number"){
        return this.ROTATED(ang).times(len);
    }
}

ROTATED()是我自己原创的，可以快速的获取与X轴夹角为deg度的单位向量。

pVector2()返回与X轴夹角为deg度，长度为len的向量。

var a = Vector2.pVector2(-90,100)
console.log(a)

角度与弧度互转

static rad_to_deg(rad){ // 弧度转角度
    return rad * (180.0 / Math.PI) ;
}

static deg_to_rad(deg){ // 角度转弧度
    return deg * (Math.PI / 180.0) ;
}

修正后的正弦和余弦函数

Math.sin(Math.PI * n)、Math.sin(Math.PI * 2 * n)以及Math.cos((Math.PI / 2) * n)返回的都不是0，而是一个极小数。这对极坐标和向量旋转来说是没法用的，所以自己在Vector2类型中定义了cos()和sin()，并做了一些修正。

static sin(deg){  //修正后的正弦函数
    const PI2 = Math.PI * 2    //2π
    let ang_rad = Vector2.deg_to_rad(deg);  //转为弧度
    let yu = Math.abs(ang_rad % PI2)        
    //所有正负180度或360度 + 任意圈数的sin值设为0
    return (yu != Math.PI && yu != 0) ? Math.sin(ang_rad) : 0
}

static cos(deg){  //修正后的余弦函数
    const PI2 = Math.PI * 2    //2π
    let ang_rad = Vector2.deg_to_rad(deg);  //转为弧度
    let yu = Math.abs(ang_rad % PI2)        
    //所有正负90度 + 任意圈数的cos值设为0
    return (yu != Math.PI/2) ? Math.cos(ang_rad) : 0
}

在HTML5 Canvas中使用

在HTML中定义canvas标签：

<body>
    <canvas id="canvas01" width="300" height="300"></canvas>
</body>

使用Vector2定义点并进行绘制：

// 获取canvas和上下文对象
let canvas = document.getElementById("canvas01");
let ctx = canvas.getContext('2d');

// 定义两点
let p1 = Vector2.ZERO()
let p2 = Vector2.pVector2(45,100)

// 绘制
ctx.beginPath()
ctx.strokeStyle = "red"; //轮廓颜色
ctx.lineWidth = 2;       //轮廓线宽
// 绘制直线
ctx.moveTo(p1.x,p1.y);
ctx.lineTo(p2.x,p2.y);
ctx.stroke();

为了方便查看画布，定义如下CSS样式：

body{
    background-color: #444;
}
canvas{
    background-color: #fff;
}

绘制效果：

总结

本文基于JavaScript编写了Vector2类型，基本实现与GDSCript内置Vector2类型相同的效果。

点积、叉积等内容后续将逐步实现和添加。

巽星石
关注
专栏目录
Vue 3/vite中使用babylon.js记录
weixin_44609842的博客
03-21 708
时，Vue 会将其中的代码转换为 Render 函数，类似于 Vue 2 中的 render() 函数。这样做的好处是可以更好地优化组件的性能。的原理是将其中的代码转换为 Render 函数，并通过自动注入变量和方法的方式简化了组件的编写和管理，提高了代码的可读性和维护性。，可以将组件的设置、响应式变量声明和方法定义都放在一个地方，使得组件逻辑更加清晰和紧凑。中的方法会被自动绑定到组件实例上，可以直接在模板中使用而无需额外的操作。中声明的变量和方法会自动注入到模板中，无需额外的导入或暴露。
2d平面在3d中展示，使用threejs
05-02
Three.js作为一款强大的JavaScript库，为开发者提供了在浏览器中实现3D图形的强大工具。本文将详细讲解如何利用Three.js将2D平面在3D环境中展示，以及如何使2D元素如按钮能够真实地显示和响应事件。 首先，我们需要...
如何在 JavaScript 中添加向量(Vector)类
迹忆客
06-06 580
因此，向量类应该实现一个函数来添加向量。函数，它使用 for 循环添加向量并返回 ES6 类的新实例。在添加向量之前，请确保将它们存储在一个数组中。然后，我们可以将它的元素添加到调用者数组中并产生一个结果。因此，第一个向量是调用者，第二个是被调用者。本篇文章将介绍如何使用不同的方法在 JavaScript 中添加两个向量。我们添加了两个向量来测试向量加法并将结果记录到 Web 浏览器的控制台。添加后，它将添加的结果传递给 ES6 类的新实例。加法函数应该起作用，以便第一个向量可以在第二个向量上调用它。
vector数组的基本定义与使用方法总结
longshaonihaoa的博客
05-26 5826
自己救自己系列， 找工作刷题做点总结。今年找工作形式这么严峻，我还能怎么办？我也很绝望啊！ vector刷题时候用的地方也太多了吧，这个要熟练掌握啊 1、定义 1）vector数组是一个能存放任意数据类型（类，结构，普通变量类型等）的动态数组！ 2）和普通数组一样可以通过下标索引来进行访问 3）与其它动态序列容器相比（deques, lists and forward_lists），vector在访问元素的时候更加高效，在末尾添加和删除元素相对高效。对于其它不...
定义和初始化vector对象
weixin_34194702的博客
05-01 147
定义vector对象的常用方法： 初始化vector对象的方法 vector<T> v1 v1是一个空vector，它潜在的元素是T类型，执行默认初始化 vector<T> v2(v1) v2中包含v1所有元素的副本 vector<T> v3(n,val) v3包含了n个重复的元素，每个元素的值都是val ...
一篇文章了解 threejs 在 vue 项目中的基本使用
热门推荐
大家好，我是+V
10-30 1万+
threejs 是运行在浏览器中的 3D 引擎，是JavaScript编写的WebGL第三方库。提供了非常多的3D显示功能。开发者可以用它创建各种三维场景，包括了摄影机、光影、材质等各种对象。可以在它的主页上看到许多精彩的演示。不过，这款引擎还处在比较不成熟的开发阶段，其不够丰富的 API 以及匮乏的文档增加了初学者的学习难度（尤其是文档的匮乏）。在讲解 threejs 的时候，我们通过一个基本的简单的案例，来实现一个小的效果，然后把常用的 API、工具、功能稍微说一下哈！
Three 二维向量（Vector2）
前端学习杂记，记录学习中的前端知识。
07-24 813
2D（二维向量）的类。一个二维向量是一对有顺序的数字（标记为x和y），可用来表示很多事物一个位于二维空间中的点（例如一个在平面上的点）。一个在平面上的方向与长度的定义。在three.js中，长度总是从(0, 0)到(x, y)的（欧几里德距离，即直线距离）， 方向也是从(0, 0)到(x, y)的方向。任意的、有顺序的一对数字。
javascript es6定义类和类的使用方法
hsg77的专栏
04-01 2974
es6定义类和类的使用方法 javascript类的使用 注意：//export {cwgisMapPanCmd}; 这个导出方法在同一个工程中使用就不能导出操作 //------------------------------------- cmToolBar = new cwgisToolBarClass(); // //import {cwgisMapFullE...
在Three.js中使用CSS3DRenderer和CSS3DSprite实现模型标签文字+指示线
前端开发工程师
05-20 1549
在`Three.js`中，使用`CSS3DRenderer`和`CSS3DSprite`可以轻松地实现模型标签文字的效果，为场景中的模型提供更直观的信息展示。本文将介绍如何使用这两个工具来实现模型标签文字，并提供相应的代码示例。
在vue中使用OpenLayers地图 01 基本引入
不染-9732
02-19 1956
在vue中使用OpenLayers地图 01 基本引入 1.开发环境 node 版本：v14.17.5 cli版本 ：3.0 2.准备工作： 创建cli项目 ===》vue create 项目名称 安装ol ===》cnpm install ol 创建用来展示地图的 .vue 文件 3.vue代码 <template> <div id="map" ref="map"></div> </template> <script> i
BasicNeuralNetwork-VectorTraining:如何使用神经网络在Brain.JS中训练向量的非常简单的示例源代码-vector source code
03-25
基本神经网络的矢量训练 关于如何使用神经网络在Brain.JS中训练向量的非常简单的示例源代码。 优先 您可以在index.js require语句下面找到首选项。... hiddenLayersSize：要在训练中使用多少个神经元。 （默认值
Mapbox-vector-tiles-basic-js-renderer:mapbox-gl-js的前叉，可让您明确控制要渲染的源图块以及在何处
05-08
Mapbox Vector Tile Basic JS渲染器 该LandInsight项目是的分支。 ， 请参阅以获取有关矢量图块，样式等的更多详细信息。 该分叉旨在与上游版本保持最新同步，并且在理想情况下（尽管目前尚不正确），它不应破坏...
three.js欧拉角和四元数的使用方法
10-15
在three.js这个强大的JavaScript 3D库中，这两种方式都被广泛用于处理物体的旋转。让我们深入探讨它们在three.js中的使用方法。 **欧拉角（Euler Angles）** 欧拉角是一种直观的方式来描述三维空间中的旋转，它通过...
vector-experiments:使用向量图块贴图和MapboxGL进行实验
05-19
8. **离线地图**：向量图块也适用于离线地图场景，实验可能探索了如何在无网络环境下使用和缓存地图数据。 这个“vector-experiments-master”压缩包很可能是项目源代码，包含HTML文件和其他资源，供开发者研究和...
knowLedge-Vue I18n 是 Vue.js 的国际化插件
2301_76671906的博客
09-30 937
Vue 2 中使用 Vue I18n 插件实现中英文切换
JavaScript ArrayBuffer的读写与类型转换
白瑕 的博客
10-01 451
所有视图的基本单位是ArrayBuffer, ArrayBuffer中只存储二进制格式的数据.ArrayBuffer不可直接读写, 必须通过视图(比如DataView)暴露的API.
沂机管理系统/data/Ajax.aspx接口存在SQL注入漏洞
2301_77012231的博客
10-01 525
沂机管理系统/data/Ajax.aspx接口存在SQL注入漏洞，攻击者可以获取服务器权限。bp 报错泄露绝对路径。sqlmap确认有漏洞。
如何使用Redisson的布隆过滤器？
最新发布
付聪
10-02 387
【代码】如何使用Redisson的布隆过滤器？
如何在编程中定义和实现一个动态数组？
09-18
在编程中，动态数组是一种允许我们在运行时动态地增加或减少元素容量的数据结构。它通常通过以下步骤定义和实现： 1. 定义：动态数组通常由两个部分组成：数组本身和一个用于存储当前元素个数的计数器。例如，在许多语言（如Python的列表、JavaScript的Array等）中，你可以直接创建一个空的动态数组。 ```python # Python 示例 dynamic_array = [] ``` 2. 初始化：大多数动态数组可以自动初始化为空数组，并且可以在需要时添加元素。 3. 添加元素（扩容）：当数组已满并且试图添加新元素时，动态数组会自动将其容量扩大一倍，然后将所有现有元素复制到新的位置，最后在尾部添加新元素。这个过程称为“扩容”。 4. 删除元素（缩容）：如果数组中有大量空位，有些动态数组（如Java的ArrayList）会在删除最后一个元素并缩小大小时进行"缩容"操作，释放掉不再使用的内存。 5. 访问元素：通过索引来获取和修改动态数组中的元素，支持常见的插入、删除、查找等操作。 6. 动态调整：实现上可能会采用链表或数组结合的方式，比如C++的std::vector就是这样一种动态数组实现。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

巽星石

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值