资讯专栏INFORMATION COLUMN

【JS图形学基础】平面向量的计算和运用实例

khs1994 / 942人阅读

摘要:平面向量的计算和运用实例相关概念有向线段具有方向的线段叫做有向线段,以为起点,为终点的有向线段记作或向量的模有向线段的长度叫做向量的模,记作零向量长度等于的向量叫做零向量,记作或。

平面向量的计算和运用实例 相关概念

有向线段:具有方向的线段叫做有向线段,以A为起点,B为终点的有向线段记作 或AB;

向量的模:有向线段AB的长度叫做向量的模,记作|AB|;

零向量:长度等于0的向量叫做零向量,记作 或0。(注意粗体格式,实数“0”和向量“0”是有区别的,书写时要在向量“0”上加箭头,以免混淆);

相等向量:长度相等且方向相同的向量叫做相等向量;

平行向量(共线向量):两个方向相同或相反的非零向量叫做平行向量或共线向量,-零向量与任意向量平行,即0//a;

单位向量:模等于1个单位长度的向量叫做单位向量,通常用e表示,平行于坐标轴的单位向量习惯上分别用i、j表示。

相反向量:与a长度相等,方向相反的向量,叫做a的相反向量,-(-a)=a,零向量的相反向量仍然是零向量。 [1]

几何表示

二维

任取平面上两点A(x1,y1),B(x2,y2),则向量AB=(x2-x1,y2-y1),即一个向量的坐标等于表示此向量的有向线段的终点坐标减去始点的坐标。

三维

A(x1,y1,z1),B(x2,y2,z2),向量AB=(x2-x1,y2-y1,z2-z1)

基本计算 向量相加 二维

平行四边形定则解决向量加法的方法:将两个向量平移至公共起点,以向量的两条边作平行四边形,向量的加法结果为公共起点的对角线。

向量的点乘:a * b

公式:a b = |a| |b| * cosθ
点乘又叫向量的内积、数量积,是一个向量和它在另一个向量上的投影的长度的乘积;是标量。
点乘反映着两个向量的“相似度”,两个向量越“相似”,它们的点乘越大。

向量的叉乘:a ∧ b

方向:a向量与b向量的向量积的方向与这两个向量所在平面垂直,且遵守右手定则。

右手定则:右手的四指方向指向第一个矢量,屈向叉乘矢量的夹角方向(两个矢量夹角方向取小于180°的方向),那么此时大拇指方向就是叉乘所得的新的矢量的方向.(大拇指应与食指成九十度)

在二维中,两个向量的向量积的模的绝对值等于由这两天向量组成的平行四边形的面积

二维
(x1,y1)X(x2,y2)=(x1y2-x2y1)
三维
(x1,y1,z1)X(x2,y2,z2)=(y1z2-y2z1, z1x2-z2y1, x1y2-x2y1)
实例运用
//计算向量叉乘    
var crossMul=function(v1,v2){ 
 
    return   v1.x*v2.y-v1.y*v2.x;  
}  
//javascript判断两条线段是否相交    

var checkCross=function(p1,p2,p3,p4){  
  
    var v1={x:p1.x-p3.x,y:p1.y-p3.y};  
          
    v2={x:p2.x-p3.x,y:p2.y-p3.y};  
   
    v3={x:p4.x-p3.x,y:p4.y-p3.y};  
          
    v=crossMul(v1,v3)*crossMul(v2,v3);  
 
    v1={x:p3.x-p1.x,y:p3.y-p1.y};  
      
    v2={x:p4.x-p1.x,y:p4.y-p1.y};  
  
    v3={x:p2.x-p1.x,y:p2.y-p1.y};  
      
    return (v<=0&&crossMul(v1,v3)*crossMul(v2,v3)<=0)?true:false;  
 
}  
//判断点是否在多边形内    
  
var  checkPP=function(point,polygon){  
      
    var p1,p2,p3,p4;  
  
    p1=point;  
      
    p2={x:-100,y:point.y};  
  
    var count=0;  
      
    //对每条边都和射线作对比    
  
    for(var i=0;i           
               
                                           
                       
                 

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/94103.html

相关文章

  • 光照渲染——用canvas模拟光照效果

    摘要:光照我们能看到物体,是因为光照射在物体上然后反射到我们的眼睛当中。这篇文章也是想通过这个简单的光照计算来引出,后面的文章我会用来重新实现这个效果。渲染的光照效果关于我的博客这篇文章到这里就结束了。 光照 我们能看到物体,是因为光照射在物体上然后反射到我们的眼睛当中。其中的影响因素非常多:观察者的位置、光源的位置、光的颜色、物体表面的颜色、材质和粗糙程度等等。以后我们将会详细探究如何模拟...

    jokester 评论0 收藏0
  • JS图形基础】二维图形变换

    摘要:计算机图形学中的应用非常广泛的变换是一种称为仿射变换的特殊变换,在仿射变换中的基本变换包括平移旋转缩放剪切这几种。表示缩小,表示放大错切图像错切变换在图像几何形变方面非常有用,常见的错切变换分为方向与方向的错切变换。 二维图形学的变换 使用过前端的css3,canva,svg的小伙伴应该对平移,旋转,缩放,剪切这些效果变换应该很熟悉了,但应该大部分小伙伴应该不清楚其中的原理,在二维图形...

    mozillazg 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<