剧情提要:
[机器小伟]在[工程师阿伟]的陪同下进入练气期第八层功法的修炼,
这次要修炼的目标是[观察物体(二)]。
正剧开始:
星历2016年02月01日 13:20:45, 银河系厄尔斯星球中华帝国江南行省。
[工程师阿伟]正在和[机器小伟]一起观察着物体。
今天主要观察的是立方体,是要看它们的三视图:
既然立方体是属于三维的图形,那么再继续用二维的坐标系就不是那么合适了,于是阿伟就借着这个机会,新增了三维坐标系:
又新增了立方体的绘制和三视图的显示功能:
小伟画三视图可是画得非常的尽兴。
果然人生最大的乐趣还是在于画画。
接下来小伟充分开动起了脑筋:
然后又做了一个计数的题:
这下所有的功法内容可都学会了,小伟很开心。
下面,小伟就把他所做的展示出来,这些图真的是看了很心旷神怡啊。
<span style="font-size:18px;">function myDraw() { var config = new PlotConfiguration(); config.init(); config.setPreference(); config.setSector(1,1,1,1); config.axis2D(0, 0, 180); var r = 50; var dx = r*1.5, dy = r*1.5; for (var i = 0; i < 3; i++) { for (var j = 0; j < 3; j++) { drawCubic(i * dx, j * dy, r, 'yellow'); } } } /** * @usage 绘制正方体 * @author mw * @date 2016年02月01日 星期一 08:40:27 * @param * @return * */ function drawCubic(x0, y0, r, style) { plot.save() .translate(x0 + r/2, y0 - r/2); style = style ? style : 'black'; //左下角[x0, y0,边长r shape.fillDraw(shape.nEdge(0, 0,0.707*r, 4, 0), style); shape.fillDraw(shape.paraquad(-0.5*r, 0.5*r, 0, r, r/2, Math.PI/4), style); shape.strokeDraw(shape.paraquad(-0.5*r, 0.5*r, 0, r, r/2, Math.PI/4), 'white'); shape.fillDraw(shape.paraquad(0.5*r, -0.5*r, Math.PI/4, r/2, r, Math.PI/4), style); shape.strokeDraw(shape.paraquad(0.5*r, -0.5*r, Math.PI/4, r/2, r, Math.PI/4), 'white'); plot.restore(); } function myDraw() { var config = new PlotConfiguration(); config.init(); config.setPreference(); config.setSector(1,1,1,1); config.axis2D(0, 0, 180); var r = 50; var dx = r, dy = r; for (var i = 0; i < 3; i++) { for (var j = 2; j > 0; j--) { drawCubic(i * dx, (j-2) * dy, r, 'red'); } } } /** * @usage 绘制三维直角坐标系 * @author mw * @date 2016年02月01日 星期一 09:52:05 * @param * @return * */ this.axis3D = function(x, y, z, r, style) { plot.save(); style = style ? style : 'black'; y = -y; x = x-0.707*z; y = y+0.707*z; z = 0; var zxOffset = z*0.707+x; var zyOffset = z*0.707+y; var zr = r*0.707; plot.setFillStyle(style) .setStrokeStyle(style); plot.beginPath() .moveTo(x-r,y) .lineTo(x+r,y) .closePath() .stroke(); plot.beginPath() .moveTo(x,y-r) .lineTo(x,y+r) .closePath() .stroke(); plot.beginPath() .moveTo(zxOffset+zr*0.5,zyOffset-zr*0.5) .lineTo(zxOffset-zr, zyOffset + zr) .closePath() .stroke(); var r0 = 10; //x轴箭头 plot.beginPath() .moveTo(x+r- r0*Math.cos(Math.PI/3), y-r0*Math.sin(Math.PI/3)) .lineTo(x+r+r0*Math.sin(Math.PI/3), y) .lineTo(x+r -r0*Math.cos(Math.PI/3), y+r0*Math.sin(Math.PI/3)) .closePath() .fill() plot.fillText("X", x+r, y-10, 20); plot.fillText("Y", x+10, y-r+10, 20); plot.fillText("Z", zxOffset-zr-25, zyOffset+zr+25, 20); //y轴箭头 plot.beginPath() .moveTo(x+ r0*Math.sin(Math.PI/3), y-r+r0*Math.cos(Math.PI/3)) .lineTo(x, y-r-r0*Math.sin(Math.PI/3)) .lineTo(x-r0*Math.sin(Math.PI/3), y-r+r0*Math.cos(Math.PI/3)) .closePath() .fill() //z轴箭头 plot.beginPath() .moveTo(zxOffset -zr - r0*0.866*0.707, zyOffset+zr-r0*0.866*0.707) .lineTo(zxOffset-zr+r0*0.866*0.707, zyOffset+zr+r0*0.866*0.707) .lineTo(zxOffset-zr -r0*1.5*0.707, zyOffset+zr+r0*1.5*0.707) .closePath() .fill() plot.restore(); } function myDraw() { var config = new PlotConfiguration(); config.init(); config.setPreference(); config.setSector(1,1,1,1); config.axis3D(0, 0, 0, 180); config.axis3D(0, 0, 20, 180, 'red'); config.axis3D(-50, -80, 0, 180, 'blue'); /* var r = 50; var dx = r, dy = r; for (var i = 0; i < 3; i++) { for (var j = 2; j > 0; j--) { drawCubic(i * dx, (j-2) * dy, r, 'red'); } } */ } /** * @usage 绘制正方体 * @author mw * @date 2016年02月01日 星期一 08:40:27 * @param * @return * */ this.drawCubic = function(x0, y0, z0, r, style) { plot.save(); z0 = z0 /2; x0 = x0 - z0*0.707; y0 = y0 + z0*0.707; z0 = 0; plot.translate(x0 + r/2, y0 - r/2); style = style ? style : 'black'; //左下角[x0, y0,边长r shape.fillDraw(shape.nEdge(0, 0,0.707*r, 4, 0), style); shape.fillDraw(shape.paraquad(-0.5*r, 0.5*r, 0, r, r/2, Math.PI/4), style); shape.strokeDraw(shape.paraquad(-0.5*r, 0.5*r, 0, r, r/2, Math.PI/4), 'white'); shape.fillDraw(shape.paraquad(0.5*r, -0.5*r, Math.PI/4, r/2, r, Math.PI/4), style); shape.strokeDraw(shape.paraquad(0.5*r, -0.5*r, Math.PI/4, r/2, r, Math.PI/4), 'white'); plot.restore(); } function myDraw() { var config = new PlotConfiguration(); config.init(); config.setPreference(); config.setSector(1,1,1,1); config.axis3D(0, 0, 0, 180); //x, y, z坐标序列 var x1, y1, z1; //立方体序列 var cubic = new Array(); x1 = [0]; y1 = 0; z1 = 0; for (var i = 0; i < x1.length; i++) { cubic.push([x1[i], y1, z1]); } x1 = [0, 1, 2]; y1 = 0; z1 = 1; for (var i = 0; i < x1.length; i++) { cubic.push([x1[i], y1, z1]); } var r = 50; for (var i = 0; i < cubic.length; i++) { shape.drawCubic(cubic[i][0]*r, cubic[i][1]*r, cubic[i][2]*r, r, '#884422'); } } function myDraw() { var config = new PlotConfiguration(); config.init(); config.setPreference(); config.setSector(1,1,1,1); config.axis3D(0, 0, 0, 180); //x, y, z坐标序列 var x1, y1, z1; //立方体序列 var cubic = new Array(); x1 = [0]; y1 = 0; z1 = 0; for (var i = 0; i < x1.length; i++) { cubic.push([x1[i], y1, z1]); } x1 = [0, 1, 2]; y1 = 0; z1 = 1; for (var i = 0; i < x1.length; i++) { cubic.push([x1[i], y1, z1]); } var r = 50; for (var i = 0; i < cubic.length; i++) { shape.drawCubic(cubic[i][0]*r, cubic[i][1]*r, cubic[i][2]*r, r, '#884422'); } var height = 400; plot.setTransform(1, 0, 0, 1, 0, 0); plot.fillText('左视图', 20, 20, 100); plot.fillText('主视图', 20, 20+1*height/4, 100); plot.fillText('俯视图', 20, 20+2*height/4, 100); plot.setFillStyle('#884422') .setStrokeStyle('white'); //左视图 config.setSector(4,3,1,1); for (var i = 0; i < cubic.length; i++) { //y, z两坐标,z坐标变为x坐标 shape.fillRect(cubic[i][2]*r, cubic[i][1]*r, r, r); shape.strokeRect(cubic[i][2]*r, cubic[i][1]*r, r, r); } //主视图 config.setSector(4,3,2,1); for (var i = 0; i < cubic.length; i++) { //x, y两坐标 shape.fillRect(cubic[i][0]*r, cubic[i][1]*r, r, r); shape.strokeRect(cubic[i][0]*r, cubic[i][1]*r, r, r); } //俯视图 config.setSector(4,3,3,1); for (var i = 0; i < cubic.length; i++) { //x, z两坐标,z坐标变为y坐标 shape.fillRect(cubic[i][0]*r, cubic[i][2]*r, r, r); shape.strokeRect(cubic[i][0]*r, cubic[i][2]*r, r, r); } } /** * @usage 绘制正方体 * @author mw * @date 2016年02月01日 星期一 08:40:27 * @param * @return * */ this.drawCubic = function(x0, y0, z0, r, style) { plot.save(); y0 = -y0; z0 = z0 /2; x0 = x0 - z0*0.707; y0 = y0 - z0*0.707; z0 = 0; plot.translate(x0 + r/2, y0 - r/2); style = style ? style : 'black'; //左下角[x0, y0,边长r shape.fillDraw(shape.nEdge(0, 0,0.707*r, 4, 0), style); shape.fillDraw(shape.paraquad(-0.5*r, 0.5*r, 0, r, r/2, Math.PI/4), style); shape.strokeDraw(shape.paraquad(-0.5*r, 0.5*r, 0, r, r/2, Math.PI/4), 'white'); shape.fillDraw(shape.paraquad(0.5*r, -0.5*r, Math.PI/4, r/2, r, Math.PI/4), style); shape.strokeDraw(shape.paraquad(0.5*r, -0.5*r, Math.PI/4, r/2, r, Math.PI/4), 'white'); plot.restore(); } function myDraw() { var config = new PlotConfiguration(); config.init(); config.setPreference(); config.setSector(1,1,1,1); config.axis3D(0, 0, 0, 180); //x, y, z坐标序列 var x1, y1, z1; //立方体序列 var cubic = new Array(); x1 = [0,1,2]; y1 = 0; z1 = 0; for (var i = 0; i < x1.length; i++) { cubic.push([x1[i], y1, z1]); } x1 = [0]; y1 = 1; z1 = 0; for (var i = 0; i < x1.length; i++) { cubic.push([x1[i], y1, z1]); } var r = 50; var style = 'blue'; for (var i = 0; i < cubic.length; i++) { shape.drawCubic(cubic[i][0]*r, cubic[i][1]*r, cubic[i][2]*r, r, style); } var height = 400; r = r/2; plot.setTransform(1, 0, 0, 1, 0, 0); plot.fillText('左视图', 20, 20, 100); plot.fillText('主视图', 20, 20+1*height/4, 100); plot.fillText('俯视图', 20, 20+2*height/4, 100); plot.setFillStyle(style) .setStrokeStyle('white'); //左视图 config.setSector(4,3,1,1); for (var i = 0; i < cubic.length; i++) { //y, z两坐标,z坐标变为x坐标 shape.fillRect(cubic[i][2]*r, -cubic[i][1]*r, r, r); shape.strokeRect(cubic[i][2]*r, -cubic[i][1]*r, r, r); } //主视图 config.setSector(4,3,2,1); for (var i = 0; i < cubic.length; i++) { //x, y两坐标 shape.fillRect(cubic[i][0]*r, -cubic[i][1]*r, r, r); shape.strokeRect(cubic[i][0]*r, -cubic[i][1]*r, r, r); } //俯视图 config.setSector(4,3,3,1); for (var i = 0; i < cubic.length; i++) { //x, z两坐标,z坐标变为y坐标 shape.fillRect(cubic[i][0]*r, cubic[i][2]*r, r, r); shape.strokeRect(cubic[i][0]*r, cubic[i][2]*r, r, r); } } function myDraw() { var config = new PlotConfiguration(); config.init(); config.setPreference(); config.setSector(1,1,1,1); config.axis3D(0, 0, 0, 180); //x, y, z坐标序列 var x1, y1, z1; //立方体序列 var cubic = new Array(); x1 = 0; y1 = 0; z1 = 0; for (var i = 0; i <1; i++) { cubic.push([x1, y1, z1]); } x1 = 0; y1 = [0,1,2]; z1 = 1; for (var i = 0; i < y1.length; i++) { cubic.push([x1, y1[i], z1]); } x1 = 0; y1 = 0; z1 = 2; for (var i = 0; i < 1; i++) { cubic.push([x1, y1, z1]); } var r = 50; var style = '#ccaa00'; for (var i = 0; i < cubic.length; i++) { shape.drawCubic(cubic[i][0]*r, -cubic[i][1]*r, cubic[i][2]*r, r, style); } var height = 400; r = r/2; plot.setTransform(1, 0, 0, 1, 0, 0); plot.fillText('左视图', 20, 20, 100); plot.fillText('主视图', 20, 20+1*height/3, 100); plot.fillText('俯视图', 20, 20+2*height/3, 100); plot.setFillStyle(style) .setStrokeStyle('white'); //左视图 config.setSector(3,3,1,1); for (var i = 0; i < cubic.length; i++) { //y, z两坐标,z坐标变为x坐标 shape.fillRect(cubic[i][2]*r, -cubic[i][1]*r, r, r); shape.strokeRect(cubic[i][2]*r, -cubic[i][1]*r, r, r); } //主视图 config.setSector(3,3,2,1); for (var i = 0; i < cubic.length; i++) { //x, y两坐标 shape.fillRect(cubic[i][0]*r, -cubic[i][1]*r, r, r); shape.strokeRect(cubic[i][0]*r, -cubic[i][1]*r, r, r); } //俯视图 config.setSector(3,3,3,1); for (var i = 0; i < cubic.length; i++) { //x, z两坐标,z坐标变为y坐标 shape.fillRect(cubic[i][0]*r, cubic[i][2]*r, r, r); shape.strokeRect(cubic[i][0]*r, cubic[i][2]*r, r, r); } } function myDraw() { var config = new PlotConfiguration(); config.init(); config.setPreference(); config.setSector(1,1,1,1); config.axis3D(0, 0, 0, 180); //x, y, z坐标序列 var x1, y1, z1; //立方体序列 var cubic = new Array(); x1 = [0,1,2]; y1 = 0; z1 = 0; for (var i = 0; i <x1.length; i++) { cubic.push([x1[i], y1, z1]); } x1 = [2]; y1 = 1; z1 = 0; for (var i = 0; i < x1.length; i++) { cubic.push([x1[i], y1, z1]); } x1 = [2]; y1 = 2; z1 = 0; for (var i = 0; i < x1.length; i++) { cubic.push([x1[i], y1, z1]); } var r = 50; var style = '#ccaa00'; for (var i = 0; i < cubic.length; i++) { shape.drawCubic(cubic[i][0]*r, -cubic[i][1]*r, cubic[i][2]*r, r, style); } var height = 400; r = r/2; plot.setTransform(1, 0, 0, 1, 0, 0); plot.fillText('左视图', 20, 20, 100); plot.fillText('主视图', 20, 20+1*height/3, 100); plot.fillText('俯视图', 20, 20+2*height/3, 100); plot.setFillStyle(style) .setStrokeStyle('white'); //左视图 config.setSector(3,3,1,1); for (var i = 0; i < cubic.length; i++) { //y, z两坐标,z坐标变为x坐标 shape.fillRect(cubic[i][2]*r, -cubic[i][1]*r, r, r); shape.strokeRect(cubic[i][2]*r, -cubic[i][1]*r, r, r); } //主视图 config.setSector(3,3,2,1); for (var i = 0; i < cubic.length; i++) { //x, y两坐标 shape.fillRect(cubic[i][0]*r, -cubic[i][1]*r, r, r); shape.strokeRect(cubic[i][0]*r, -cubic[i][1]*r, r, r); } //俯视图 config.setSector(3,3,3,1); for (var i = 0; i < cubic.length; i++) { //x, z两坐标,z坐标变为y坐标 shape.fillRect(cubic[i][0]*r, cubic[i][2]*r, r, r); shape.strokeRect(cubic[i][0]*r, cubic[i][2]*r, r, r); } } //6 请把它摆出来 function myDraw() { var config = new PlotConfiguration(); config.init(); config.setPreference(); config.setSector(1,1,1,1); config.axis3D(0, 0, 0, 180); //立方体,按从左向右(x递增),从下向上(y递增),从后向前(z递增)的顺序压入 var cubic = new Array(); //从前面看缺少的[x,y] var notfront = [[0,1],[1,1],[3,1]]; //从上面看缺少的[x, z] var nottop = [[0,1],[1,1]]; //从左面看缺少的[z,y] var notleft = [[1,1]]; for (var z = 0; z < 2; z++) { for (var y = 0; y < 2; y++) { for (var x = 0; x < 4; x++) { /* if (elementInArray([x, y], notfront) || elementInArray([x, z], nottop) || elementInArray([z, y], notleft)) { continue; }*/ cubic.push([x,y,z]); } } } //三维图和三视图 var r = 50; var style = '#ccaa00'; for (var i = 0; i < cubic.length; i++) { shape.drawCubic(cubic[i][0]*r, cubic[i][1]*r, cubic[i][2]*r, r, style); } var height = 400; r = r/2; plot.setTransform(1, 0, 0, 1, 0, 0); plot.fillText('左视图', 20, 20, 100); plot.fillText('主视图', 20, 20+1*height/3, 100); plot.fillText('俯视图', 20, 20+2*height/3, 100); plot.setFillStyle(style) .setStrokeStyle('white'); //左视图 config.setSector(3,3,1,1); for (var i = 0; i < cubic.length; i++) { //y, z两坐标,z坐标变为x坐标 shape.fillRect(cubic[i][2]*r, -cubic[i][1]*r, r, r); shape.strokeRect(cubic[i][2]*r, -cubic[i][1]*r, r, r); } //主视图 config.setSector(3,3,2,1); for (var i = 0; i < cubic.length; i++) { //x, y两坐标 shape.fillRect(cubic[i][0]*r, -cubic[i][1]*r, r, r); shape.strokeRect(cubic[i][0]*r, -cubic[i][1]*r, r, r); } //俯视图 config.setSector(3,3,3,1); for (var i = 0; i < cubic.length; i++) { //x, z两坐标,z坐标变为y坐标 shape.fillRect(cubic[i][0]*r, cubic[i][2]*r, r, r); shape.strokeRect(cubic[i][0]*r, cubic[i][2]*r, r, r); } } function elementInArray(x, array) { var elem = new Array(x); var elemLen = elem.length; var a = new Array(array); var len = a.length; if (elemLen > 1) { for (var i = 0; i < len; i++) { for (var j = 0; j < elemLen; j++) { if (a[i][j] != x[j]) { break; } if (j >= elemLen-1) { return true; } } } } else { for (var i = 0; i < len; i++) { if (a[i] == x) { return true; } } } return false; } //6 请把它摆出来 function draw() { var config = new PlotConfiguration(); config.init(); config.setPreference(); config.setSector(1,1,1,1); config.axis3D(0, 0, 0, 180); //立方体,按从左向右(x递增),从下向上(y递增),从后向前(z递增)的顺序压入 var cubic = new Array(); //从前面看缺少的[x,y] var notfront = [[0,1],[1,1],[3,1]]; //从上面看缺少的[x, z] var nottop = [[0,0],[1,0]]; //从左面看缺少的[z,y] var notleft = [[1,1]]; for (var z = 0; z < 2; z++) { for (var y = 0; y < 2; y++) { for (var x = 0; x < 4; x++) { if (elementInArray([x, y], notfront) || elementInArray([x, z], nottop) || elementInArray([z, y], notleft)) { continue; } cubic.push([x,y,z]); } } } //三维图和三视图 var r = 50; var style = '#ccaa00'; for (var i = 0; i < cubic.length; i++) { shape.drawCubic(cubic[i][0]*r, -cubic[i][1]*r, cubic[i][2]*r, r, style); } var height = 400; r = r/2; plot.setTransform(1, 0, 0, 1, 0, 0); plot.fillText('左视图', 20, 20, 100); plot.fillText('主视图', 20, 20+1*height/3, 100); plot.fillText('俯视图', 20, 20+2*height/3, 100); plot.setFillStyle(style) .setStrokeStyle('white'); //左视图 config.setSector(3,3,1,1); for (var i = 0; i < cubic.length; i++) { //y, z两坐标,z坐标变为x坐标 shape.fillRect(cubic[i][2]*r, -cubic[i][1]*r, r, r); shape.strokeRect(cubic[i][2]*r, -cubic[i][1]*r, r, r); } //主视图 config.setSector(3,3,2,1); for (var i = 0; i < cubic.length; i++) { //x, y两坐标 shape.fillRect(cubic[i][0]*r, -cubic[i][1]*r, r, r); shape.strokeRect(cubic[i][0]*r, -cubic[i][1]*r, r, r); } //俯视图 config.setSector(3,3,3,1); for (var i = 0; i < cubic.length; i++) { //x, z两坐标,z坐标变为y坐标 shape.fillRect(cubic[i][0]*r, cubic[i][2]*r, r, r); shape.strokeRect(cubic[i][0]*r, cubic[i][2]*r, r, r); } } function elementInArray(x, array) { var elem = new Array(x); var elemLen = elem[0].length; var a = new Array(); a = array; var len = a.length; if (elemLen > 1) { for (var i = 0; i < len; i++) { var test = 1; for (var j = 0; j < elemLen; j++) { if (a[i][j] != elem[0][j]) { test = 0; } if (test == 1 && j >= elemLen-1) { return 1; } } } } else { for (var i = 0; i < len; i++) { if (a[i] == x) { return 1; } } } return 0; } //7 有多少个立方体? function draw() { var config = new PlotConfiguration(); config.init(); config.setPreference(); config.setSector(1,1,1,1); config.axis3D(0, 0, 0, 180); //立方体,按从左向右(x递增),从下向上(y递增),从后向前(z递增)的顺序压入 var cubic = new Array(); for (var z = 0; z < 4; z++) { for (var y = 3; y > -1; y--) { for (var x = 0; x < 4; x++) { if (x + z <= y) cubic.push([x,4-y,z]); } } } //三维图和三视图 var r = 40; var style = 'blue'; for (var i = 0; i < cubic.length; i++) { shape.drawCubic(cubic[i][0]*r, 100-cubic[i][1]*r, cubic[i][2]*r, r, style); } var height = 400; r = r/3; plot.setTransform(1, 0, 0, 1, 0, 0); plot.fillText('左视图', 20, 20, 100); plot.fillText('主视图', 20, 20+1*height/3, 100); plot.fillText('俯视图', 20, 20+2*height/3, 100); plot.fillText('共有'+cubic.length.toFixed(0)+'个立方体组成。', 300,350,200); plot.setFillStyle(style) .setStrokeStyle('white'); //左视图 config.setSector(3,3,1,1); for (var i = 0; i < cubic.length; i++) { //y, z两坐标,z坐标变为x坐标 shape.fillRect(cubic[i][2]*r, -cubic[i][1]*r, r, r); shape.strokeRect(cubic[i][2]*r, -cubic[i][1]*r, r, r); } //主视图 config.setSector(3,3,2,1); for (var i = 0; i < cubic.length; i++) { //x, y两坐标 shape.fillRect(cubic[i][0]*r, -cubic[i][1]*r, r, r); shape.strokeRect(cubic[i][0]*r, -cubic[i][1]*r, r, r); } //俯视图 config.setSector(3,3,3,1); for (var i = 0; i < cubic.length; i++) { //x, z两坐标,z坐标变为y坐标 shape.fillRect(cubic[i][0]*r, cubic[i][2]*r, r, r); shape.strokeRect(cubic[i][0]*r, cubic[i][2]*r, r, r); } } </span>本节到此结束,欲知后事如何,请看下回分解。