多边形面积

一，三角形的面积公式

1.平行四边形的面积s =底*高

2.三角形可以视之为平行四边形的一半。因此：

三角形的面积 =底*高/2

二，不知高底，知其点位，求三角形的面积

1.案例：已知三角形ABC，ABC 的三点为 A(0,0)， B(cx,cy)， C(bx,by)，求三角形面积

解：
① 获取三角形的矩形边界：
上边界=cy
右边界=bx
下边界=0
左边界=0

② 绘制边界，得到D 点和三个三角形t1,t2,t3

③ 由上图可知：

● 矩形面积
=bx*cy

● t1 面积
=(cx*cy)/2

● t2 面积
=(bx-cx)*(cy-by)/2
=(bx*cy - bx*by - cx*cy + cx*by)/2

● t3 面积
= bx*by/2

● 三角形ABC 的面积
= 矩形面积 - t1 面积 - t2 面积 - t3 面积
= bx*cy - (cx*cy)/2 - (bx*cy - bx*by - cx*cy + cx*by)/2 - (bx*by)/2
= (2*bx*cy - cx*cy - (bx*cy - bx*by - cx*cy + cx*by) - bx*by)/2
= (2*bx*cy - cx*cy - bx*cy + bx*by + cx*cy - cx*by - bx*by)/2
= (2*bx*cy - bx*cy - cx*by)/2
= (bx*cy - cx*by)/2

2.三角形还有一种画法，如图

做辅助线：

● 大三角形ABD 的面积
=cx*cy/2

● t1 面积
=(cx-bx)*(cy-by)/2
=(cx*cy-cx*by-bx*cy+bx*by)/2
=(cx*cy-cx*by-bx*cy+bx*by)/2

● t2 面积
=(cx-bx)*by
=cx*by-bx*by

● t3 面积
= bx*by/2

● 三角形ABC 的面积
= 大三角形ABD 的面积 - t1 面积 - t2 面积 - t3 面积
= (cx*cy - (cx*cy-cx*by-bx*cy+bx*by) - (2*cx*by-2bx*by) - bx*by)/2
= (cx*cy - cx*cy+cx*by+bx*cy-bx*by - 2*cx*by+2bx*by - bx*by)/2
= (bx*cy-cx*by)/2

对比一下上一种三角形的面积公式：(bx*cy - cx*by)/2，两个公式是一样的，所以这个就是求一顶点在原点的三角形面积的公式了。

3.再来一画法，跟三角形耗上了

● 矩形面积
=bx*(cy-by)
=bx*cy-bx*by

● t1 面积
=(cx*cy)/2

● t2 面积
=(bx-cx)*(cy-by)/2
=(bx*cy - bx*by - cx*cy + cx*by)/2

● t3 面积
= -bx*by/2

● 三角形ABC 的面积
= 矩形面积 - t1 面积 - t2 面积 - t3 面积
= bx*cy-bx*by - (cx*cy)/2 - (bx*cy - bx*by - cx*cy + cx*by)/2 - (-bx*by/2)
= (2*bx*cy-2*bx*by - cx*cy - bx*cy + bx*by + cx*cy - cx*by + bx*by)/2
= (bx*cy - cx*by)/2

还是一样的公式 (bx*cy - cx*by)/2，所以这就是三角形面积的计算公式

三，进入多边形

1.多边形里，有一种游戏规则，叫做连点成面，如图：

● 这叫扇形面，在WebGl 里叫TRIANGLE_FAN，从A 到G 逆时针绘制，所有面都有一个共同的顶点A。

● 在平面中计算，扇形面的面积 = (bx*cy - cx*by)/2 + (cx*dy - dx*cy)/2 + ... + (fx*gy - gx*fy)/2

2.多边形里还有一种另类的叫：异形。

如图：

● 连一下线：

有种想哭的节奏(┬＿┬)

3.先观察一下异形的规律

异性都存在存在逆折点。
逆折的判断条件：默认逆时针连点，若基点到下一个点（如C）的角度小于基点到上一个点（如B）的角度，即存在顺时针连点，那么此图形就存在逆折。
逆折点：发生逆折的点，如点B，点D

四，复杂的异形简化

1.理解ABC 的面积的计算原理是关键。

(bx*cy - cx*by)/2 公式是基于逆时针定义的

2.我们在连点绘制多边形时，会有如下规则：

按照顶点在集合中的顺序，依次连接，而不会考虑连接的方向。
在计算面积时，依旧会按照点的顺序计算。

3.我们在按照一种方向的时针公式计算以不同方向绘制的三角形时，便会出现面积为负数的三角形。如：

三角形ABC 的真正面积是：(cx*by - bx*cy)/2，即-(bx*cy - cx*by)/2，因此我们依旧以(bx*cy - cx*by)/2 计算得到的面积就是负数

4.计算异形 ABCD 的面积

ABCD 的面积
=ABC 面积 + ACD 面积
=(bx*cy - cx*by)/2 + (cx*dy - dx*cy)/2

因为ABC 面积为负数，异形 ABCD 的面积正好是：大三角形ACD 面积 - ABC 的真正面积

5.总结
在异形面积的计算中，正常扇形的计算公式依旧是适用，即：
多边形面积 = (bx*cy - cx*by)/2 + (cx*dy - dx*cy)/2 + ... + (fx*gy - gx*fy)/2

五，多边形面积的计算

1.程序方法

● 这图形是一个玄关+客厅的组合，求其面积，可以口算出来：
多边形面积
=大矩形-右下角的小矩形
=2*3-1*1=5

● 我们用程序方法来验证

const points=[
    {x:1,y:0},
    {x:1,y:1},
    {x:2,y:1},
    {x:2,y:3},
    {x:0,y:3},
];
class Polly{
    constructor(points){
        this.points=points;
    }
    getTriangleArea(B,C){
        const [bx,by,cx,cy]=[B.x,B.y,C.x,C.y];
        return (bx*cy - cx*by)/2;
    }
    getArea(points=this.points){
        const len=points.length;
        let area=0;
        for(let i=0;i<len-1;i++){
            area+=this.getTriangleArea(points[i],points[i+1]);
        }
        return area;
    }
}
let polly=new Polly(points);
console.log(polly.getArea()); //5

注：在上面的顶点计算中是不包括起点A的

2.实际中，多边形的起点或者其它某个顶点可能并不在原点，如：

● 这样我们就需要将起点A 归0，
● 基点归0的方式很简单：

将其余的点减去A 点
也可以用基点A 减去其余的点，只是这样得到的图形，是和原图水平垂直镜像的。不过，只要形状没变，就不影响面积计算。如图：

● 优化一下算法，为Polly 对象传入带有起点的完整顶点集合，然后在为其做归零处理，获取面积

const points=[
    {x:1,y:1},
    {x:2,y:1},
    {x:2,y:2},
    {x:3,y:2},
    {x:3,y:4},
    {x:1,y:4},
];
class Polly{
    constructor(points){
        this.points=points;
    }
    getPoints0(points){
        const {x,y}=points[0];
        return points.map((p,i)=>{
            return {x:p.x-x,y:p.y-y};
        })
    }
    getTriangleArea(B,C){
        const [bx,by,cx,cy]=[B.x,B.y,C.x,C.y];
        return (bx*cy - cx*by)/2;
    }
    getArea(points=this.points){
        const points0=this.getPoints0(points);
        const len=points0.length;
        let area=0;
        for(let i=0;i<len-1;i++){
            area+=this.getTriangleArea(points0[i],points0[i+1]);
        }
        return area;
    }
}
let polly=new Polly(points);
console.log(polly.getArea()); //5

六，进入三维世界

1.在三维世界中，我们看一个三角形，若这个三角形所处的平面和我们视锥体的端面不平行，那我们我们就无法通过单一视图获取三角形所有信息。

2.我们通过三个视图观察三角形，便可以获取其全部信息

顶视图，y 轴方向，可获取 x z 信息
前视图，z 轴方向，可获取 x y 信息
左视图，x 轴方向，可获取 y z 信息

七，求空间三角形ABC 的面积

1.我们可以先求三个视图中三角形的面积

x 轴方向：(by * cz - bz * cy)/2
y 轴方向：(bz * cx - bx * cz)/2
z 轴方向：(bx * cy - by * cx)/2

2.在此，我们需要知道一个非常著名的概念：向量积，向量积又叫叉积、叉乘，它是两个向量中，数据的交叉相乘。

● 两个向量的叉积的坐标的计算公式为：

a=[a1，a2，a3]=a1i+a2j+a3k；
b=[b1，b2，b3]=b1i+b2j+b3k；
a×b=[a2b3-a3b2，a3b1-a1b3，a1b2-a2b1]。

● 对比三个视图中求三角形的面积的公式，会发现，将每个三角形面积都去掉“/2”,就是在求一个叉积坐标

叉积坐标 P ={
x : by * cz - bz * cy,
y : bz * cx - bx * cz,
z : bx * cy - by * cx,
}

3.接下来，我们就可以根据向量积 P，求三角形ABC 的面积：
三角形ABC 的面积
= Math.sqrt( P.x *P.x +P.y *P.y +P.z *P.z )/2