剧情提要：
[机器小伟]在[工程师阿伟]的陪同下进入了结丹初期的修炼，
这次要修炼的目标是[空间几何体]。
正剧开始：
星历2016年04月10日 09:06:46, 银河系厄尔斯星球中华帝国江南行省。
[工程师阿伟]正在和[机器小伟]一起研究[空间几何体]。
这些都是这样画出来的：
<span style="font-size:18px;">//获取椭圆上点的坐标
function ellipse(a, b) {
//a, b 分别为椭圆的长、短半轴
var retArray = new Array();
var thita = 0;
//椭圆的圆周分成的线段数量，这个值越大越精确
var N = 32;
var deltaThita = Math.PI*2/N;
var x = y = 0;
for (var i = 0; i < N; i++) {
x = a*Math.cos(thita);
y = b*Math.sin(thita);
retArray.push([x, y]);
thita += deltaThita;
}
return retArray;
}</span>
<span style="font-size:18px;">//勾勒侧面
if (1) {
var r = 20;
config.setSector(1,1,1,1);
config.graphPaper2D(0, 0, r);
config.axis2D(0, 0, 180);
var transform = new Transform();
var a = 5*r, b = 3*r;
var topFace = ellipse(a, b);
var bottomFace = transform.translate(topFace, 0, -100);
var size = topFace.length;
var vertFace = [];
for (var i = 0; i < size; i++) {
vertFace.push([topFace[i][0], topFace[i][1], bottomFace[i][0], bottomFace[i][1]]);
}
lineDraw(vertFace, 'blue', 1);
shape.strokeDraw([].concat(bottomFace), 'pink');
shape.fillDraw([].concat(topFace), 'red');
}
}
function lineDraw(array, style, scale) {
//array的格式[ [线段起点(x,y), 线段终点(x, y)], ...], 每条线段有四个元素确定
style = style ? style : 'black';
scale = scale ? scale : 1;
var newArray = new Array();
var size = array.length;
var itemSize = array[0].length;
var item = [];
//缩放步骤
for (var i = 0; i < size; i++) {
item = [];
for (var j = 0; j < itemSize; j++) {
if (j % 2 == 0) { //x坐标
item.push(array[i][j] * scale);
}
else { //y坐标
item.push(- array[i][j] * scale);
}
}
newArray.push(item);
}
//document.write(newArray.join(', '));
plot.save()
.setStrokeStyle(style);
for (var i = 0; i < size; i++) {
plot.beginPath()
.moveTo(newArray[i][0], newArray[i][1])
.lineTo(newArray[i][2], newArray[i][3])
.closePath()
.stroke();
}
plot.restore();
}</span>
各种形状的变动：
<span style="font-size:18px;"> var a = 5*r, b = 3*r; var topFace = shape.paraquad(0, 0, 0, a, b, Math.PI/3); var bottomFace = transform.translate(topFace, 0, -100);</span>
这是一个平行四边形，还有其它各种形状，就不贴出来了，大致一样。
下面小伟看一下有没有可能给侧面填上颜色。
这个有趣的图是这样得到的：
<span style="font-size:18px;"> if (1) {
var r = 20;
config.setSector(1,1,1,1);
config.graphPaper2D(0, 0, r);
config.axis2D(0, 0, 180);
var transform = new Transform();
var a = 5*r, b = 3*r;
var topFace = shape.nStar(0, 0, a, 5);
var bottomFace = transform.translate(topFace, 0, -100);
//垂直侧面的处理
var size = topFace.length;
var vertFace = [];
for (var i = 1; i < size; i+=2) {
vertFace.push([topFace[i][0], topFace[i][1], bottomFace[i][0], bottomFace[i][1]]);
}
faceDraw(vertFace, 'blue', 1);
shape.strokeDraw([].concat(bottomFace), 'pink');
shape.fillDraw([].concat(topFace), 'red');
}</span>
当然，少不了这个侧面填色工具：
<span style="font-size:18px;">function faceDraw(array, style, scale) {
//array的格式[ [线段起点(x,y), 线段终点(x, y)], ...], 每条线段有四个元素确定
style = style ? style : 'black';
scale = scale ? scale : 1;
var newArray = new Array();
var size = array.length;
var itemSize = array[0].length;
var item = [];
//缩放步骤
for (var i = 0; i < size; i++) {
item = [];
for (var j = 0; j < itemSize; j++) {
if (j % 2 == 0) { //x坐标
item.push(array[i][j] * scale);
}
else { //y坐标
item.push(- array[i][j] * scale);
}
}
newArray.push(item);
}
//document.write(newArray.join(', '));
plot.save()
.setFillStyle(style)
.setStrokeStyle('yellow')
.setLineWidth(4);
var x1 = x2 = y1 = y2 = 0,
x3 = x4 = y3 = y4 = 0;
for (var i = 0; i < size; i++) {
x1 = newArray[i][0];
y1 = newArray[i][1];
x2 = newArray[i][2];
y2 = newArray[i][3];
if (i < size - 1) {
x3 = newArray[i+1][0];
y3 = newArray[i+1][1];
x4 = newArray[i+1][2];
y4 = newArray[i+1][3];
}
else {
x3 = newArray[0][0];
y3 = newArray[0][1];
x4 = newArray[0][2];
y4 = newArray[0][3];
}
plot.beginPath()
.moveTo(x1, y1)
.lineTo(x2, y2)
.lineTo(x4, y4)
.lineTo(x3, y3)
.closePath()
.fill();
}
for (var i = 0; i < size; i++) {
x1 = newArray[i][0];
y1 = newArray[i][1];
x2 = newArray[i][2];
y2 = newArray[i][3];
plot.beginPath()
.moveTo(x1, y1)
.lineTo(x2, y2)
.closePath()
.stroke();
}
plot.restore();
}</span>
如果不用直观图的画法，画出来的就不太有立体感：
<span style="font-size:18px;"> if (1) {
var r = 20;
config.setSector(1,1,1,1);
config.graphPaper2D(0, 0, r);
config.axis2D(0, 0, 180);
var transform = new Transform();
var a = 5*r, b = 3*r;
var topFace = shape.nEdge(0, 0, b, 4);
var bottomFace = transform.scale(transform.translate(topFace, 0, -100), 1.5, 1.2);
//垂直侧面的处理
var size = topFace.length;
var vertFace = [];
for (var i = 0; i < size; i++) {
vertFace.push([topFace[i][0], topFace[i][1], bottomFace[i][0], bottomFace[i][1]]);
}
faceDraw(vertFace, 'blue', 1);
shape.strokeDraw([].concat(bottomFace), 'pink');
shape.fillDraw([].concat(topFace), 'red');
}</span>
就像这样：
好了，小伟该要好好学习一下这个斜二测画法了，要不然可画不出好看的图来。
[人叫板老师]这么一大堆的步骤，小伟真没看懂，不过，小伟有自己的方法，先看一下结果吧：
好像是一样的，是吧，这个是这样画出来的：
<span style="font-size:18px;"> if (1) {
var r = 20;
config.setSector(1,1,1,1);
config.graphPaper2D(0, 0, r);
config.axis3D(0, 0, 0, 180);
var transform = new Transform();
var a = 5*r, b = 3*r;
var topFace = shape.nEdge(0, 0, b, 6);
var size = topFace.length;
var array = [];
for (var i = 0; i < size; i++) {
array.push(shape.point3D(topFace[i][0], 0, topFace[i][1]));
}
array = transform.flipY(array);
shape.angleDraw([].concat(array), 'red', 3);
}</span>
再看一下椭圆吧：
哇哦，太酷了，这是不是传说中的[逆星盘]啊。
<span style="font-size:18px;"> if (1) {
var r = 20;
config.setSector(1,1,1,1);
config.graphPaper2D(0, 0, r);
config.axis3D(0, 0, 0, 180);
var transform = new Transform();
var a = 5*r, b = 3*r;
var topFace = ellipse(a, b);
var size = topFace.length;
var array = [];
for (var i = 0; i < size; i++) {
array.push(shape.point3D(topFace[i][0], 0, topFace[i][1]));
}
array = transform.flipY(array);
shape.angleDraw([].concat(array), 'red', 3);
}</span>
其实也就是这么个形状：
这个长方体太小了，实在不够威猛霸气。
<span style="font-size:18px;"> if (1) {
var r = 20;
config.setSector(1,1,1,1);
config.graphPaper2D(0, 0, r);
config.axis3D(0, 0, 0, 180);
var transform = new Transform();
var a = 4*r, b = 3*r, h = 2*r;
var array = shape.paraquad(0, 0, 0, a, b, Math.PI/2);
var size = array.length;
var topFace = [], bottomFace = [];
for (var i = 0; i < size; i++) {
topFace.push(shape.point3D(array[i][0], 0, array[i][1]));
bottomFace.push(shape.point3D(array[i][0], -h, array[i][1]));
}
topFace = transform.flipY(topFace);
bottomFace = transform.flipY(bottomFace);
//垂直侧面的处理
var size = topFace.length;
var vertFace = [];
for (var i = 0; i < size; i++) {
vertFace.push([topFace[i][0], topFace[i][1], bottomFace[i][0], bottomFace[i][1]]);
}
faceDraw(vertFace, 'blue', 1);
shape.strokeDraw([].concat(bottomFace), 'pink');
shape.fillDraw([].concat(topFace), 'red');
}</span>
<span style="font-size:18px;"> if (1) {
var r = 20;
config.setSector(1,1,1,1);
config.graphPaper2D(0, 0, r);
config.axis3D(0, 0, 0, 180);
var transform = new Transform();
var a = 4*r, b = a, h = 2*r;
var array = ellipse(a, a);
var size = array.length;
var topFace = [], bottomFace = [];
for (var i = 0; i < size; i++) {
topFace.push(shape.point3D(array[i][0], 0, array[i][1]));
bottomFace.push(shape.point3D(array[i][0], -h, array[i][1]));
}
topFace = transform.flipY(topFace);
bottomFace = transform.flipY(bottomFace);
//垂直侧面的处理
var size = topFace.length;
var vertFace = [];
for (var i = 0; i < size; i++) {
vertFace.push([topFace[i][0], topFace[i][1], bottomFace[i][0], bottomFace[i][1]]);
}
faceDraw(vertFace, 'blue', 1);
vertFace = [];
for (var i = 0; i < size; i++) {
vertFace.push([topFace[i][0], topFace[i][1], 0, 100]);
}
shape.strokeDraw([].concat(bottomFace), 'pink',1);
shape.fillDraw([].concat(topFace), 'red', 1);
faceDraw(vertFace, 'cyan', 1);
}</span>
这个椭圆总是不怎么正，为什么会这样呢，小伟想不明白。其它多边形都没这个问题啊。
<span style="font-size:18px;"> var a = 4*r, b = a, h = 2*r; var edges = 5; var array = shape.nEdge(0, 0, a, edges, -Math.PI);</span>
算了，调不出来，先放着吧。
本节到此结束，欲知后事如何，请看下回分解。
时间： 2024-10-10 17:28:38