剧情提要:
[机器小伟]在[工程师阿伟]的陪同下进入了筑基中期的修炼,
这次要修炼的目标是[平行四边形 小结与复习题]。
先试验下效果:
[机器小伟]在[工程师阿伟]的陪同下进入了筑基中期的修炼,
这次要修炼的目标是[平行四边形 小结与复习题]。
正剧开始:
星历2016年03月20日 14:04:26, 银河系厄尔斯星球中华帝国江南行省。
[工程师阿伟]正在和[机器小伟]一起研究[平行四边形 小结与复习题]。
上一节功法中,由于阿伟一时没有注意,导致四边形的数据没法进行变换,
这样,带来了很多的不便。画个图还要用手工,这可怎么行呢,
这次,阿伟就先把这个变换的工具做出来了,想必后面的题就好做了。
<span style="font-size:18px;">/**
* @usage 对点阵列数组进行平移,旋转,缩放,对称等变形
* @author mw
* @date 2016年03月20日 星期日 13:24:58
* @param 传入点阵列矩阵
* @return 输出变形后的点阵列矩阵
*
*/
function Transform() {
this.translate = function(array, xOffset, yOffset) {
var len = array.length;
if (len == 0) {
return [];
}
else {
var len1 = array[0].length;
if (len1 != 2) {
//如果不是点阵列[..., [x,y], [x1,y1], ...]的格式,暂时不加处理
return array;
}
else {
var retArray = new Array();
var x = 0, y = 0;
for (var i = 0; i < len; i++) {
x = array[i][0] + xOffset;
y = array[i][1] + yOffset;
retArray.push([x, y]);
}
}
}
return retArray;
}
this.scale = function(array, scale) {
var len = array.length;
if (len == 0) {
return [];
}
else {
var len1 = array[0].length;
if (len1 != 2) {
//如果不是点阵列[..., [x,y], [x1,y1], ...]的格式,暂时不加处理
return array;
}
else {
var retArray = new Array();
var x = 0, y = 0;
for (var i = 0; i < len; i++) {
x = array[i][0] * scale;
y = array[i][1] * scale;
retArray.push([x, y]);
}
}
}
return retArray;
}
this.rotate = function(array, angle) {
var len = array.length;
if (len == 0) {
return [];
}
else {
var len1 = array[0].length;
if (len1 != 2) {
//如果不是点阵列[..., [x,y], [x1,y1], ...]的格式,暂时不加处理
return array;
}
else {
var retArray = new Array();
var x = 0, y = 0;
var sinA, cosA;
for (var i = 0; i < len; i++) {
sinA = Math.sin(angle);
cosA = Math.cos(angle);
x = array[i][0] * cosA - array[i][1]*sinA;
y = array[i][0] * sinA + array[i][1]*cosA;
retArray.push([x, y]);
}
}
}
return retArray;
}
this.flipX = function(array) {
return this.flipImplement(array, 'X');
}
this.flipY = function(array) {
return this.flipImplement(array, 'Y');
}
//关于直线y=kx轴对称
this.flip = function(array, slope) {
//slope为斜率k
var mode = slope.toFixed(3);
return this.flipImplement(array, mode);
}
this.flipImplement = function(array, mode) {
var len = array.length;
if (len == 0) {
return [];
}
else {
var len1 = array[0].length;
if (len1 != 2) {
//如果不是点阵列[..., [x,y], [x1,y1], ...]的格式,暂时不加处理
return array;
}
else {
var retArray = new Array();
var x = 0, y = 0;
var sinA, cosA;
var m = 0, n = 0;
if (mode == 'X') {
for (var i = 0; i < len; i++) {
//关于X轴对称,
x = array[i][0];
y = -array[i][1];
retArray.push([x, y]);
}
}
else if (mode == 'Y') {
for (var i = 0; i < len; i++) {
//关于Y轴对称,
x = -array[i][0];
y = array[i][1];
retArray.push([x, y]);
}
}
else {
//模式为斜率 y = kx中k的字符串
k = parseFloat(mode);
for (var i = 0; i < len; i++) {
//可扩展
//此处先放大100倍再缩小是因为对于小尺寸
//计算误差太大,而如果尺寸太大,
//标注会占用太多地方,造成文字拥挤,无法读取
m = array[i][0]*100;
n = array[i][1]*100;
//x = (m-2*k+2*k*n-m*k*k)/(1+k*k);
x = (1-k*k)*m+2*k*(n-1)/(1+k*k);
//y = (-n+2*k*m+n*k*k)/(1+k*k);
y = (2*k*m-(1-k*k)*n)/(1+k*k);
retArray.push([x/100, y/100]);
}
}
}
}
return retArray;
}
}
</span>
先试验下效果:
<span style="font-size:18px;"> var r = 20;
config.setSector(1,1,1,1);
config.graphPaper2D(0, 0, r);
config.axis2D(0, 0,180);
var triangle = new Triangle();
var transform = new Transform();
var a = [];
var tmp = [];
/*
config.setSector(3,3,1,1);
a = triangle.know2edges([10, 8], -90);
tmp = [].concat(a);
//document.write(tmp);
shape.angleDraw(tmp, 'red', 20);
*/
config.setSector(3,3,2,2);
a = triangle.know2edges([1, 2]);
var b = [];
b = transform.flip(a, 1);
//document.write(a+'<br>');
//document.write(b);
tmp = [].concat(a);
shape.angleDraw(tmp, 'green', 80);
tmp = [].concat(b);
//document.write(tmp);
shape.angleDraw(tmp, 'red', 80, 'BCA');</span>
这是关于y=x对称的两个三角形,看得出来是正确的。这下就好办了。
<span style="font-size:18px;">//1(2)
var r = 20;
config.setSector(1,1,1,1);
config.graphPaper2D(0, 0, r);
config.axis2D(0, 0,180);
var triangle = new Triangle();
var transform = new Transform();
var a = [];
var b = [];
var tmp = [];
config.setSector(3,3,2,2);
a = triangle.know2edges([2, 1], -90);
tmp = [].concat(transform.translate(transform.flipY(a), 0, 1.5));
shape.angleDraw(tmp, 'green', 80);
a = transform.flipY(a);
tmp = [].concat(a);
shape.strokeDraw(tmp, 'green', 80);
b = shape.paraquad(0, 0, 0, -2, 2, Math.PI/6);
tmp = [].concat(b);
//document.write(tmp);
shape.angleDraw(tmp, 'red', 80);
//1(3)
var r = 20;
config.setSector(1,1,1,1);
config.graphPaper2D(0, 0, r);
config.axis2D(0, 0,180);
var triangle = new Triangle();
var transform = new Transform();
var a = [];
var b = [];
var tmp = [];
config.setSector(3,3,2,2);
a = triangle.know2edges([1, 1], 150);
tmp = [].concat(transform.translate(transform.flipY(a), 0, 1.5));
shape.angleDraw(tmp, 'green', 80);
a = transform.flipY(a);
tmp = [].concat(a);
shape.strokeDraw(tmp, 'green', 80);
b = shape.paraquad(0, 0, 0, -1, 1, Math.PI/2);
tmp = [].concat(b);
shape.angleDraw(tmp, 'red', 80);
var c = [];
c = triangle.know3edges([1, 1, 1]);
tmp = [].concat(transform.rotate(c,-Math.PI/6));
shape.strokeDraw(tmp, 'red', 80);</span>
<span style="font-size:18px;">//9(2), 9(3)
var r = 20;
config.setSector(1,1,1,1);
config.graphPaper2D(0, 0, r);
config.axis2D(0, 0,180);
var triangle = new Triangle();
var transform = new Transform();
var a = [];
var b = [];
var tmp = [];
config.setSector(3,3,2,2);
b = shape.paraquad(0, 0, 0, -1, 1, Math.PI/3);
tmp = [].concat(b);
shape.angleDraw(tmp, 'red', 100);
for (var i = 0; i < 4; i++) {
if (i == 3) {
a.push([(b[i][0]+b[0][0])/2, (b[i][1]+b[0][1])/2]);
}
else {
a.push([(b[i][0]+b[i+1][0])/2, (b[i][1]+b[i+1][1])/2]);
}
}
shape.strokeDraw([].concat(a), 'green', 100);
shape.angleDraw(transform.translate(a, 0, 1.5), 'green', 100);
</span>
<span style="font-size:18px;"> var r = 20;
config.setSector(1,1,1,1);
config.graphPaper2D(0, 0, r);
config.axis2D(0, 0,180);
var triangle = new Triangle();
var transform = new Transform();
var a = [];
var b = [];
var tmp = [];
config.setSector(3,3,1,1);
var angle = 45;
var w = 2, h = 2;
b = triangle.know2edges([w, h], angle);
tmp = [].concat(b);
shape.angleDraw(tmp, 'red', 100);
a = triangle.know2edges([-w, -h], angle);
a = transform.translate(a, w+h*Math.cos(angle/180*Math.PI), -h*Math.sin(angle/180*Math.PI));
tmp = [].concat(a);
shape.angleDraw(tmp, 'green', 100);</span>
<span style="font-size:18px;"> var r = 20;
config.setSector(1,1,1,1);
config.graphPaper2D(0, 0, r);
config.axis2D(0, 0,180);
var triangle = new Triangle();
var transform = new Transform();
var a = [];
var b = [];
var tmp = [];
config.setSector(3,3,1,1);
var angle = 90;
var w = 2, h = 2;
b = shape.paraquad(0, 0, 0, w, h, angle/180*Math.PI);
tmp = [].concat(b);
shape.strokeDraw(tmp, 'red', 100);
a = triangle.know2edges([w/2, h], angle);
a = transform.translate(transform.flipX(a), 0, -h);
tmp = [].concat(a);
shape.angleDraw(tmp, 'green', 100);
var c = triangle.know2edges([-w, -h/2], angle);
c = transform.translate(c, w*1.5, -h);
tmp = [].concat(c);
shape.angleDraw(tmp, 'orange', 100);
var d = triangle.know2edges([-1, -2.24], 26.57);
d = transform.translate(transform.flipY(d), w/2, -h);
tmp = [].concat(d);
shape.strokeDraw(tmp, 'cyan', 100);
tmp = [].concat(transform.translate(d, 0, 1.5));
shape.angleDraw(tmp, 'cyan', 100);</span>