Javascript图形学-线-正多边形
在前面一篇点对象的基础上，就可以组建线对象了，因为线是由点组成的。
在构造线对象之前先引入一个对象用以保存点数据的。如下
文件名称为 PointData.js
function PointData(x,y,z)
{
this.x=x;
this.y=y;
this.z=z;
this.getX=function(){return x;}
this.getY=function(){return y;}
this.getZ=function(){return z;}
this.setX=function(x0){x=x0;}
this.setY=function(y0){y=y0;}
this.setZ=function(z0){z=z0;}
this.data=function(){return x+":"+y+":"+z;}
}
线对象的构造，考虑的参数有起点坐标、终点坐标、起点颜色、终点颜色、展示容器
构造的线对象如下，文件名称为Line3D.js
function Line3D(x1,y1,z1,x2,y2,z2,parentScreen,r1,g1,b1,r2,g2,b2)
{
this.x1=x1;this.x2=x2;this.y1=y1;this.y2=y2;this.z1=z1;this.z2=z2;this.r1=r1;this.r2=r2;this.g1=g1;this.g2=g2;this.b1=b1;this.b2=b2;
var L=Math.round(Math.sqrt((x2-x1)*(x2-x1)+(y2-y1)*(y2-y1)+(z2-z1)*(z2-z1)));//求出线长度 ,同时也是点的个数
var x0=(x2-x1)/L;//求三个方向的增量
var y0=(y2-y1)/L;
var z0=(z2-z1)/L;
var r0=(r2-r1)/L;
var g0=(g2-g1)/L;
var b0=(b2-b1)/L;
var points=new Array();
var point;
for(var i=0;i<L;i++)
{
point=new Point3D(Math.round(x1+i*x0),Math.round(y1+i*y0),Math.round(z1+i*z0),"rgb("+Math.round(r1+i*r0)+","+Math.round(g1+i*g0)+","+Math.round(b1+i*b0)+")",1,parentScreen);
points.push(point);
}
this.goByAbsolute=function(x1,y1,z1,x2,y2,z2,r1,g1,b1,r2,g2,b2)
{
var x0=(x2-x1)/L;
var y0=(y2-y1)/L;
var z0=(z2-z1)/L;
var r0=(r2-r1)/L;
var g0=(g2-g1)/L;
var b0=(b2-b1)/L;
var point;
for(var i=0;i<L;i++)
{
point=points[i];
point.goByAbsolute(Math.round(x1+i*x0),Math.round(y1+i*y0),Math.round(z1+i*z0),"rgb("+Math.round(r1+i*r0)+","+Math.round(g1+i*g0)+","+Math.round(b1+i*b0)+")",1);
}
}
this.goByRelative=function(x3,y3,z3,x4,y4,z4,r3,g3,b3,r4,g4,b4)
{
var x5=(x4-x3)/L;
var y5=(y4-y3)/L;
var z5=(z4-z3)/L;
var r5=(r4-r3)/L;
var g5=(g4-g3)/L;
var b5=(b4-b3)/L;
for(var i=0;i<L;i++)
{
point=points[i];
point.goByAbsolute(Math.round(x1+x3+i*(x0+x5)),Math.round(y1+y3+i*(y0+y5)),Math.round(z1+z3+i*(z0+z5)),"rgb("+Math.round(r1+r3+i*(r0+r5))+","+Math.round(g1+g3+i*(g0+g5))+","+Math.round(b1+b3+i*(b0+b5))+")",1);
}
}
}
线对象有了，接下来需要构造一个正多边形的对象了
参数有圆心坐标、半径r、边数n、起始角度和展示容器
多边形对象文件为Ngon.js
function Ngon(x0,y0,z0,r,n,a,parentScreen)
{
var angle=360/n;
var point,points=new Array();
var color="white";
var line,lines=new Array();
for(var i=0;i<n;i++)
{
point=new PointData(x0+Math.round(r*Math.cos((a+i*angle*Math.PI)/180)),y0+Math.round(r*Math.sin((a+i*angle*Math.PI)/180)),z0);
points.push(point);
}
this.show=function()
{
for(var i=0;i<n-1;i++)
{
line=new Line3D(points[i].getX(),points[i].getY(),points[i].getZ(),points[i+1].getX(),points[i+1].getY(),points[i+1].getZ(),parentScreen,255,255,255,255,255,255);
lines.push(line);
}
line=new Line3D(points[n-1].getX(),points[n-1].getY(),points[n-1].getZ(),points[0].getX(),points[0].getY(),points[0].getZ(),parentScreen,255,255,255,255,255,255);
lines.push(line);
}
}
接下来编写一个测试的test.html如下
<html>
<head>
<script src="./entity/Point3D.js"></script>
<script src="./entity/Line3D.js"></script>
<script src="./entity/PointData.js"></script>
<script src="./entity/Ngon.js"></script>
</head>
<body>
<style>
html {overflow:hidden}
body, .screen {background:#000; overflow:hidden; width:100%; height:100%; position:absolute; margin:0; padding:0}
#screen {left:0; top:0; zoom:1}
#screen span {position:absolute; font-size:0; line-height:0; overflow:hidden}
</style>
<div id="screen" class="screen"></div>
<script>
var srcScreen=document.getElementById("screen");
var ngon=new Ngon(100,150,0,100,3,0,srcScreen);
ngon.show();
var ngon=new Ngon(320,150,0,100,4,0,srcScreen);
ngon.show();
var ngon=new Ngon(520,150,0,100,5,0,srcScreen);
ngon.show();
var ngon=new Ngon(740,150,0,100,6,0,srcScreen);
ngon.show();
</script>
</body>
</html>
展示效果如下
