[从头学数学] 第11节 认识图形（二）

于 2015-12-21 15:03:26 发布
阅读量1.1k 收藏
点赞数 1
CC 4.0 BY-SA版权
分类专栏： 从头学数学 从头学数学
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/mwsister/article/details/50372112
通过编程方式制作并使用七巧板拼接不同图案的故事。介绍了七巧板各部件的绘制方法及几个典型图案的拼接过程。
剧情提要：
[机器小伟]在[工程师阿伟]的陪同下进入练气期二层功法的修炼，
今天要修炼的是[认识图形（二）]。

正剧开始：

星历2015年12月21日 10:55:38, 银河系厄尔斯星球中华帝国江南行省。
[工程师阿伟]正在和[机器小伟]一起观看刚从[人叫板老师]那里得到的练气期第二层的功
法。
星历2015年12月21日 10:56:38, [工程师阿伟]说：你看[人叫板老师]的良心价，这本功法
才六块六毛钱哪。[机器小伟]。


10:57:12, 小伟却被编者的话栏目吸引，这些图好有趣。


11:00:16, 小伟进入了今天的主要修炼目标：认识图形（二）


11:04:56, 小伟看到了七巧板拼图部分。


11:05:19, 小伟决定自己动手做一付七巧板。

七巧板的代码如下：

<span style="font-size:18px;">/**
* @usage   制作七巧板
* @author  mw
* @date    2015年12月21日  星期一  11:08:14 
* @param
* @return
*
*/
/*
 单词：Neves-七巧板 rightTriangle-直角三角形
		青色cyan 紫色violet 平行四边形parallelogram
*/
function Neves() {
	this.R = 100;
	
	this.init = function(r) {
		this.R = r;
	}

	this.redTriangle = function(x, y, rotate) {
		//红色大三角形
		var r = this.R;
		
		plot.save()
			.setFillStyle('red')
			.translate(x, y)
			.rotate(-rotate)
			.beginPath()
			.moveTo(0, -r/2)
			.lineTo(r/2, 0)
			.lineTo(0, r/2)
			.closePath()
			.fill()
			.restore();
	}
	
	this.yellowTriangle = function(x, y, rotate) {
		//黄色大三角形
		var r = this.R;
		
		plot.save()
			.setFillStyle('yellow')
			.translate(x, y)
			.rotate(-rotate)
			.beginPath()
			.moveTo(0, -r/2)
			.lineTo(r/2, 0)
			.lineTo(0, r/2)
			.closePath()
			.fill()
			.restore();
	}
	
	this.violetTriangle = function(x, y, rotate) {
		//紫色三角形
		var r = this.R / 1.414;
		
		plot.save()
			.setFillStyle('#CC00FF')
			.translate(x, y)
			.rotate(-rotate)
			.beginPath()
			.moveTo(0, -r/2)
			.lineTo(r/2, 0)
			.lineTo(0, r/2)
			.closePath()
			.fill()
			.restore();
	}
	
	this.pinkTriangle = function(x, y, rotate) {
		//粉色小三角形
		var r = this.R / 2;
		
		plot.save()
			.setFillStyle('pink')
			.translate(x, y)
			.rotate(-rotate)
			.beginPath()
			.moveTo(0, -r/2)
			.lineTo(r/2, 0)
			.lineTo(0, r/2)
			.closePath()
			.fill()
			.restore();
	}
	
	this.cyanTriangle = function(x, y, rotate) {
		//青色小三角形
		var r = this.R / 2;
		
		plot.save()
			.setFillStyle('cyan')
			.translate(x, y)
			.rotate(-rotate)
			.beginPath()
			.moveTo(0, -r/2)
			.lineTo(r/2, 0)
			.lineTo(0, r/2)
			.closePath()
			.fill()
			.restore();
	}
	
	this.greenSquare = function(x, y, rotate) {
		//绿色正方形
		var r = this.R / 2.828;
		
		plot.save()
			.setFillStyle('green')
			.translate(x, y)
			.rotate(-rotate)
			.beginPath()
			.moveTo(-r/2, -r/2)
			.lineTo(r/2, -r/2)
			.lineTo(r/2, r/2)
			.lineTo(-r/2, r/2)
			.closePath()
			.fill()
			.restore();
	
	}
	
	this.parallelogram = function(x, y, rotate, clip) {
		//橙色平行四边形
		var rv = this.R / 4;
		var rh = this.R / 2;

		plot.save()
			.setFillStyle('orange')
			.translate(x, y)
			.rotate(-rotate);
			if (!clip) {
			plot.beginPath()			
				.moveTo(-rh/2+rv/2, -rv/2)
				.lineTo(rh/2+rv/2, -rv/2)
				.lineTo(rh/2-rv/2, rv/2)
				.lineTo(-rh/2-rv/2, rv/2)			
				.closePath();
			} else {
			plot.beginPath()			
				.moveTo(-(-rh/2+rv/2), -rv/2)
				.lineTo(-(rh/2+rv/2), -rv/2)
				.lineTo(-(rh/2-rv/2), rv/2)
				.lineTo(-(-rh/2-rv/2), rv/2)			
				.closePath();
			
			}
			plot.fill()
				.restore();
	
	}
	
	this.total = function() {
		plot.save()
			.translate(-this.R/2,0);
		this.redTriangle(0, 0, 0);
		this.yellowTriangle(this.R/2, -this.R/2, -Math.PI/2);
		this.cyanTriangle(this.R, -this.R/4, Math.PI);
		this.violetTriangle(this.R * 0.75, this.R/4, -Math.PI/4);
		this.parallelogram(this.R * (0.5/4+0.25), this.R*(0.5-0.5/4), Math.PI);
		this.pinkTriangle(this.R/2, this.R/4, Math.PI/2);
		this.greenSquare(this.R*0.75, 0, Math.PI/4);
	
		plot.restore();
	}
	
	this.item = function(nth, x, y, rotate, clip) {
		switch(nth) {
			case 1:	this.redTriangle(x, y, rotate);break;
			case 2: this.yellowTriangle(x, y, rotate);break;
			case 3: this.violetTriangle(x, y, rotate); break;
			case 4: this.pinkTriangle(x, y, rotate); break;
			case 5: this.cyanTriangle(x, y, rotate); break;
			case 6: this.greenSquare(x, y, rotate); break;
			case 7: this.parallelogram(x, y, rotate, clip); break;
			default: break;
		
		}
	}
}</span>


有了七巧板，小伟决定验证一下：

成功了，小伟很高兴。现在就要用这副刚做出的七巧板来拼图案了。

先拼桥：

<span style="font-size:18px;">//七巧板拼图 - 桥
function picData() {
	plot.init();
	setPreference();
	setSector(1,1,1,1);
	axis(0, 0, 180);

	var r = 200;
	var neves = new Neves();
	neves.init(r);
	
	//绿色正方形
	var x1 = 0, y1 = 0;
	//左边红色三角
	var x2 = x1-1.414/8*r-1.414/4*r, y2=y1-1.414/8*r+1.414/4*r;
	//左边橙色平行四边形
	var x3 = x1-1.414/8*r-1.414/2*r, y3=y1-1.414/8*r+1.414/2*r+1/6*r;
	
	var x4 = x3+1/6*r, y4 = y3;
	//右边黄三角
	var x5 = -x2, y5 = y2;
	//右边青三角
	var x6 = x1+1.414/8*r+1.414/2*r-1.414/8*r, y6=y3;
	//右边紫三角
	var x7 = x1+1.414/8*r+1.414/2*r, y7= y6+1.414/8*r;
	
	neves.item(6, x1, y1);
	neves.item(1, x2, y2, -Math.PI/4);
	neves.item(7, x3, y3, Math.PI/4);
	neves.item(4, x4, y4, -Math.PI/4);
	neves.item(2, x5, y5, -Math.PI * 3 / 4);
	neves.item(5, x6, y6, Math.PI * 3/4);
	neves.item(3, x7, y7, Math.PI /2);
}
</span>


看一看：


再拼狗：

<span style="font-size:18px;">//七巧板拼图 - 小狗
function picData() {
	plot.init();
	setPreference();
	setSector(1,1,1,1);
	axis(0, 0, 180);

	var r = 200;
	var neves = new Neves();
	neves.init(r);
	
	var x1 = 0, y1 = 0;
	var x2 = x1 - 1/2*r, y2 = y1 + 1/2*r;
	var x3 = x1+0.707/2*r-r/4, y3 = y1 + 0.707/2*r + 1/4*r;
	var x4 = x1 + 0.707/2*r, y4=y1-0.707/2*r-1/4*r;
	var x5 = x1 + 0.707/2*r-1.414/8*r, y5 = x1-0.707/2*r-1.414/8*r;
	var x6 = x4+1/4*r, y6 = y4+1/4*r;
	var x7 = x2-1.414/4*r-r*1/4, y7=y1;
	
	neves.item(1, x1, y1, -Math.PI/4);
	neves.item(2, x2, y2, Math.PI*3/4);
	neves.item(3, x3, y3, Math.PI/4);
	neves.item(4, x4, y4, 0);
	neves.item(5, x5, y5, Math.PI/4);
	neves.item(6, x6, y6, Math.PI/4);
	neves.item(7, x7, y7, -Math.PI/4, 1);
	

}</span>


瞧一瞧：

再来一个小朋友：

//七巧板拼图 - 人物
function picData() {
	plot.init();
	setPreference();
	setSector(1,1,1,1);
	axis(0, 0, 180);

	var r = 200;
	var neves = new Neves();
	neves.init(r);
	
	//红黄紫粉青绿橙按顺序排
	//绿橙为方和平行四边形
	var x1 = 100, y1 = 50;
	var x2 = x1 - 1/2*r-r/4, y2 = y1 + 1/4*r;
	var x3 = x1-0.707/2*r, y3 = y1 -r/2;
	var x4 = x3-1.414/4*r, y4=y3-r/4;
	var x5 = x2-r/2, y5 = y1+r/2-r/4;
	var x6 = x1-1.414/8*r, y6 = y1-r/2-1.414/8*r;
	var x7 = x1-1/4*r-r/8, y7=y1+r/2-r/8;
	
	neves.item(1, x1, y1, Math.PI);
	neves.item(2, x2, y2, Math.PI/2);
	neves.item(3, x3, y3, -Math.PI/2);
	neves.item(4, x4, y4, -Math.PI/2);
	neves.item(5, x5, y5, -Math.PI/2);
	neves.item(6, x6, y6, Math.PI/8);
	neves.item(7, x7, y7, 0, 1);
	

}


出来吧：

小伟很高兴，虽然拼得还是有点辛苦。

本节到此结束，欲知后事如何，请看下回分解。

评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值