您的位置：首页 > 其它

一个奇怪的绘图程序

2014-10-19 20:41 169 查看
专门为了绘制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
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航