码迷,mamicode.com
首页 > 其他好文 > 详细

一个奇怪的绘图程序

时间:2014-10-19 21:11:13      阅读:204      评论:0      收藏:0      [点我收藏+]

标签:style   blog   io   os   ar   for   sp   div   on   

专门为了绘制BZOJ 1002的图做的= =

<!DOCTYPE html>
<html>
	<head>
		<title>draw</title>
		<style>
			textarea{
				font-family:"Consolas";
				width:800px;
				height:400px;
			}
			canvas{
				border:1px solid #39f;
			}
		</style>
	</head>
	<body>
		<canvas id="draw" height="800" width="800">
			//nothing here
		</canvas>
		<textarea id="ta">
		</textarea>
		<button onclick="console.log(draw(ta.value))">draw</button>
		<br>
<textarea id="config">
{
	"size":300
}
</textarea>
		<script>
			var a=document.getElementById(‘draw‘);
			var ctx=a.getContext(‘2d‘);
			var pi=Math.PI;
			var hpi=pi/2;
			var x,y,incx,incy,tt;
			var mid=[400,400];
			function hypot(x,y){
				return Math.sqrt(x*x+y*y);
			}
			function draw_point(p,size,fg,bg,sw){
			    fg=fg||"#333";
			    bg=bg||"#ccc";
			    sw=sw||2;
				x=p[0];
				y=p[1];
				ctx.beginPath();
				ctx.arc(x,y,size,2*pi,0);
				ctx.closePath();
				ctx.strokeStyle=fg;
				ctx.lineWidth=sw;
				ctx.fillStyle=bg;
				ctx.fill();
				ctx.stroke();
			}
			function calc_point(p,size,angle){
				angle=hpi-angle;
				x=p[0];
				y=p[1];
				incy=Math.sin(angle)*size;
				incx=Math.cos(angle)*size;
				return [(x+incx)|0,(y-incy)|0];
			}
			function dist(p1,p2){
				return hypot(p1[0]-p2[0],p1[1]-p2[1]);
			}
			function draw_mid(){
				draw_point(mid,10,"gray","#39f");
			}
			function draw_arc(p1,p2,fg,sw){
			    fg=fg||"#333";
			    sw=sw||2;
			    ctx.beginPath();
				ctx.arc(
					mid[0],
					mid[1],
					dist(
						p1,
						mid
					),
					Math.atan2(
						p1[0]-mid[0],
						mid[1]-p1[1]
					)-hpi,
					Math.atan2(
						p2[0]-mid[0],
						mid[1]-p2[1]
					)-hpi,
					false
				);
				ctx.strokeStyle=fg;
				ctx.lineWidth=sw;
				ctx.stroke();
			}
			function draw_line(p1,p2,fg,sw){
			    fg=fg||"#333";
			    sw=sw||2;
			    ctx.beginPath();
				ctx.moveTo(p1[0],p1[1]);
				ctx.lineTo(p2[0],p2[1]);
				ctx.strokeStyle=fg;
				ctx.lineWidth=sw;
				ctx.stroke();
			}
			function draw(str){
				ctx.lineCap="butt";
				var cfg=JSON.parse(config.value);
				ctx.fillStyle="white";
				ctx.fillRect(0,0,800,800);
				var ps=str.split(‘\n‘).map(function(a){
				    tt=a.split(";");
				    tt[0]=(tt[0]==‘l‘?1:(tt[0]==‘lr‘?3:(tt[0]==‘n‘?0:2)));
				    tt[1]=JSON.parse(tt[1]);
					return tt;
				});
				var n=ps.length,k=ps;
				var zz=2*pi/n,zb=0;
				cfg.size=cfg.size||300;
				cfg.radius=cfg.radius||20;
				for(var i=0;i<n;++i){
					k[i][1].size=k[i][1].size||15;
					k[i].push(
						calc_point(
							mid,
							cfg.size,
							zb
						)
					);
					k[i].push(zb);
					zb+=zz;
				}
				k.push(k[0]);
				draw_point(mid,cfg.radius,cfg.fg,cfg.bg,cfg.sw);
				for(var i=0;i<n;++i){
					draw_point(
						k[i][2],
						k[i][1].size,
						k[i][1].fg,
						k[i][1].bg,
						k[i][1].sw
					);
					if(k[i][0]&1){
						draw_line(
							calc_point(
								mid,
								cfg.radius,
								k[i][3]
							),
							calc_point(
								k[i][2],
								k[i][1].size,
								pi+k[i][3]
							),
							k[i][1].lfg,
							k[i][1].lw
						);
					}
					if(k[i][0]&2){
						draw_arc(
							calc_point(
								k[i][2],
								k[i][1].size,
								k[i][3]+hpi
							),
							calc_point(
								k[i+1][2],
								k[i+1][1].size,
								k[i+1][3]-hpi
							),
							k[i][1].lfg,
							k[i][1].lw
						);
					}
				}
				return k;
			}
		</script>
	</body>
</html>

不过不是傻瓜式的呢= =

要用还是要花费些时间研究的,效果绝对赞啦~~比PowerPoint画出来的好多啦>_<

坐标系转换坑死爹啊= . =

界面有些丑陋啊XD

有bug comment我哈0.0

一个奇怪的绘图程序

标签:style   blog   io   os   ar   for   sp   div   on   

原文地址:http://www.cnblogs.com/tmzbot/p/4035436.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!