剧情提要:
[机器小伟]在[工程师阿伟]的陪同下进入了筑基初期的修炼,
这次要修炼的目标是[平面直角坐标系]。
本节到此结束,欲知后事如何,请看下回分解。
[机器小伟]在[工程师阿伟]的陪同下进入了筑基初期的修炼,
这次要修炼的目标是[平面直角坐标系]。
正剧开始:
星历2016年03月04日 11:01:10, 银河系厄尔斯星球中华帝国江南行省。
[工程师阿伟]正在和[机器小伟]一起研究[平面直角坐标系]。
在开始这次的修炼之前,[工程师阿伟]给[机器小伟]制作了一些方格纸,有了这些格子,读取坐标会变得很轻松。
首先登场的是三维的格子:
<span style="font-size:18px;">function myDraw() {
var config = new PlotConfiguration();
config.init();
config.setPreference();
config.setSector(1,1,1,1);
config.graphPaper3D(0,-1, 0, 50);
config.axis3D(0, 0, 0, 180);
}
//绘制三维方格纸
this.graphPaper3D = function(x, y, z, r) {
plot.save()
.setLineWidth(1);
var style = '#888888';
//偏移半个立方块
var offset = 0.5;
if (x > 10 || y > 10 || z > 10) {
x/=r;
y/=r;
z/=r;
}
for (var i = -30; i < 30; i++) {
for (var j = 0; j < 1; j++) {
for (var k = -30; k < 30; k++) {
if (Math.abs(i * r > 300) || Math.abs(k *r) > 300) continue;
shape.strokeCubic(offset+x+k, offset+y+j, offset+z+i, r, style);
}
}
}
plot.restore();
}
}
this.point3D = function(x0, y0, z0) {
//canvas中y轴坐标向下为正,与笛卡尔坐标系相反
//所以此处先取反
//
z0 = z0 /2;
x0 = x0 - z0*0.707;
y0 = y0 + z0*0.707;
return [x0, y0];
}
this.strokeCubic = function(x0, y0, z0, r, style) {
plot.save();
x0 *= r;
y0 *= r;
z0 *= r;
r *= 0.5;
var array = [[-r, -r], [-r, r], [r, r], [r, -r]];
var top = [];
var left = [];
var front = [];
var x, y, z;
for (var i = 0; i < 4; i++) {
x = x0+array[i][0];
y = -(y0+r);
z = z0+array[i][1];
top.push(this.point3D(x, y, z));
}
for (var i = 0; i < 4; i++) {
x = x0+r;
y = -(y0+array[i][0]);
z = z0+array[i][1];
left.push(this.point3D(x, y, z));
}
for (var i = 0; i < 4; i++) {
x = x0+array[i][0];
y = -(y0+array[i][1]);
z = z0+r;
front.push(this.point3D(x, y, z));
}
var tmp = [].concat(top);
shape.fillDraw(tmp, style);
tmp=[].concat(top);
shape.strokeDraw(tmp, 'white');
tmp = [].concat(left);
shape.strokeDraw(left, 'black');
tmp = [].concat(front);
shape.strokeDraw(front, style);
plot.restore();
}</span>
放大一点看看:
这个以后可能有用,但这次修炼用不上,所以阿伟又设计了二维方格纸:
<span style="font-size:18px;">function myDraw() {
var config = new PlotConfiguration();
config.init();
config.setPreference();
config.setSector(1,1,1,1);
config.graphPaper2D(0, 0, 10);
config.axis2D(0, 0, 180);
}
//绘制二维方格纸
this.graphPaper2D = function(x, y, r) {
plot.save()
.translate(x, -y)
.setLineWidth(1)
.setStrokeStyle('#888888');
for (var i = 0; i < 20; i++) {
for (var j = 0; j < 30; j++) {
if (Math.abs(i * r > 300) || Math.abs(j *r) > 300) continue;
plot.strokeRect(j*r, i*r, r, r);
plot.strokeRect(-j*r, -i*r, r, r);
plot.strokeRect(j*r, -i*r, r, r);
plot.strokeRect(-j*r, i*r, r, r);
}
}
plot.restore();
}</span>
放大点看看:
这个应该能用上,好,下面就该看[人叫板老师]的功法了。
[人叫板老师]现在画的图也太偷工减料了,影剧院的电影要是那样的画面,谁还愿意去看呢!
<span style="font-size:18px;">//有序数对
function myDraw() {
var config = new PlotConfiguration();
config.init();
config.setPreference();
config.setSector(1,1,1,1);
var r = 20;
config.graphPaper2D(0, 0, r);
config.axis2D(0, 0, 180);
var array = [[1,5], [2,4], [4,2], [3,3], [5,6]];
var tmp = [].concat(array);
shape.pointDraw(tmp, 'red', r);
var s = '['+array.join('], [')+']';
plot.fillText(s, 20, 50, plot.measureText(s));
}</span>
<span style="font-size:18px;">//绘出各点
function myDraw() {
var config = new PlotConfiguration();
config.init();
config.setPreference();
config.setSector(1,1,1,1);
var r = 20;
config.graphPaper2D(0, 0, r);
config.axis2D(0, 0, 180);
var array = [[4, 5], [-2,3],[-4,-1],[2.5,-2],[0,-4]];
var tmp = [].concat(array);
shape.pointDraw(tmp, 'red', r);
var s = '['+array.join('], [')+']';
plot.fillText(s, 20, 100, plot.measureText(s));
}</span>
<span style="font-size:18px;">//题3
function myDraw() {
var config = new PlotConfiguration();
config.init();
config.setPreference();
config.setSector(1,1,1,1);
var r = 20;
config.graphPaper2D(0, 0, r);
config.axis2D(0, 0, 180);
var array = [[-5,4], [-2,2],[3,4],[2,1],[5,-3],[-1,-2],[-5,-3],[-4,-1]];
var tmp = [].concat(array);
shape.pointDraw(tmp, 'red', r);
tmp = [].concat(array);
//shape.fillDraw(tmp, 'pink', r);
shape.strokeDraw(tmp, 'blue', r);
var s = '['+array.join('], [')+']';
var measure = plot.measureText(s);
plot.fillText(s, -measure/2, 100, measure);
}</span>
<span style="font-size:18px;">//题5
function myDraw() {
var config = new PlotConfiguration();
config.init();
config.setPreference();
config.setSector(1,1,1,1);
var r = 20;
config.graphPaper2D(0, 0, r);
config.axis2D(0, 0, 180);
var array = [[-4,-4],[-2,-2],[3,3],[5,5],[-3,-3],[0,0]];
var tmp = [].concat(array);
shape.pointDraw(tmp, 'red', r);
tmp = [].concat(array);
//shape.fillDraw(tmp, 'pink', r);
shape.multiLineDraw(tmp, 'blue', r);
var s = '['+array.join('], [')+']';
var measure = plot.measureText(s);
plot.fillText(s, -measure/2, 100, measure);
}
</span>
<span style="font-size:18px;">//题6
function myDraw() {
var config = new PlotConfiguration();
config.init();
config.setPreference();
/*
var array = [[-4,-4],[-2,-2],[3,3],[5,5],[-3,-3],[0,0]];
var tmp = [].concat(array);
shape.pointDraw(tmp, 'red', r);
tmp = [].concat(array);
//shape.fillDraw(tmp, 'pink', r);
shape.multiLineDraw(tmp, 'blue', r);
var s = '['+array.join('], [')+']';
var measure = plot.measureText(s);
plot.fillText(s, -measure/2, 100, measure);*/
var r = 24;
var image = new Image();
image.src = './1.jpg';
image.onload = function() {
plot.translate(300-3*r, 1.9*r);
plot.drawImage(image);
plot.setGlobalAlpha(0.5);
config.setSector(1,1,1,1);
config.graphPaper2D(0, 0, r);
config.axis2D(0, 0, 180);
}
}
</span>
<span style="font-size:18px;">//题6
function myDraw() {
var config = new PlotConfiguration();
config.init();
config.setPreference();
var r = 30;
config.setSector(1,1,1,1);
config.graphPaper2D(0, 0, r);
config.axis2D(0, 0, 180);
//三角形
var array = [[0,0],[4,0],[3,2]];
//左正方形
var array2 = [[0,0],[3,2],[1,5],[-2,3]];
//右正方形
var array3 = [[4,0],[6,1],[5,3],[3,2]];
//
var tmp2 = [].concat(array2);
shape.pointDraw(tmp2, 'red', r);
tmp2 = [].concat(array2);
shape.strokeDraw(tmp2, 'blue', r);
var s2 = '['+array2.join('], [')+']';
var measure2 = plot.measureText(s2);
plot.fillText(s2, -measure2/2, 125, measure2);
//
var tmp3 = [].concat(array3);
shape.pointDraw(tmp3, 'red', r);
tmp3 = [].concat(array3);
shape.strokeDraw(tmp3, 'blue', r);
var s3 = '['+array3.join('], [')+']';
var measure3 = plot.measureText(s3);
plot.fillText(s3, -measure3/2, 150, measure3);
//
var tmp = [].concat(array);
shape.pointDraw(tmp, 'red', r);
tmp = [].concat(array);
shape.strokeDraw(tmp, 'blue', r);
var s = '['+array.join('], [')+']';
var measure = plot.measureText(s);
plot.fillText(s, -measure/2, 100, measure);
}</span>
<span style="font-size:18px;">//题11
function myDraw() {
var config = new PlotConfiguration();
config.init();
config.setPreference();
var r = 24;
var image = new Image();
image.src = './1.jpg';
image.onload = function() {
plot.translate(300-4.6*r, 2.9*r);
plot.drawImage(image);
config.setSector(1,1,1,1);
config.graphPaper2D(0, 0, r);
config.axis2D(0, 0, 180);
}
}</span>
<span style="font-size:18px;">//题13
function myDraw() {
var config = new PlotConfiguration();
config.init();
config.setPreference();
var r = 21;
var image = new Image();
image.src = './1.jpg';
image.onload = function() {
plot.translate(300-8.7*r, 0.9*r);
plot.drawImage(image);
config.setSector(1,1,1,1);
config.graphPaper2D(0, 0, r);
config.axis2D(0, 0, 180);
}
}</span>
<span style="font-size:18px;">//题16
function myDraw() {
var config = new PlotConfiguration();
config.init();
config.setPreference();
var r = 31;
var image = new Image();
image.src = './1.jpg';
image.onload = function() {
plot.translate(300-5.6*r, 1.4*r);
plot.drawImage(image);
config.setSector(1,1,1,1);
config.graphPaper2D(0, 0, r);
config.axis2D(0, 0, 180);
}
}</span>
<span style="font-size:18px;">//题16
function myDraw() {
var config = new PlotConfiguration();
config.init();
config.setPreference();
var r = 31;
var image = new Image();
image.src = './1.jpg';
image.onload = function() {
plot.translate(300-5.6*r, 1.4*r);
plot.drawImage(image);
config.setSector(1,1,1,1);
config.graphPaper2D(0, 0, r);
config.axis2D(0, 0, 180);
var array = [[0,0],[400,0],[300,300],[0,400],[-300,200],[-500,0],
[-200,-100],[100,-300],[200,-200]];
var tmp = [].concat(array);
r/=100;
shape.pointDraw(tmp, 'red', r);
tmp = [].concat(array);
//shape.fillDraw(tmp, 'pink', r);
shape.multiLineDraw(tmp, 'blue', r);
var s = '['+array.join('], [')+']';
var measure = plot.measureText(s);
plot.fillText(s, -300, 150, 600);
}
}</span>
本节到此结束,欲知后事如何,请看下回分解。