JS画图的想法经过大脑的时候,觉得有点意思,所以就实践了一番。JS画图为系列文章,本是讲点、线和面
先看样例:http://www.zhaojz.com.cn/demo/draw5.html
一、点
这里的点我们使用span标签表示
//描点,参数有点的大小,颜色,点的坐标和标签; 很明显opts参数是一个对象 function drawPoint(opts){ document.write("<span id=‘"+opts.point[0]+""+opts.point[1]+"‘ style=‘display: inline-block; width: "+opts.pw+"px; height: "+opts.ph+"px; background-color: "+opts.color+"; position: absolute "+opts.point[0]+"px; top: "+opts.point[1]+"px;‘>"+(opts.point[2]?("<div style=‘position: relative;‘><span style=‘position: absolute; left: 5px; bottom: 1px; text-align: left; width: 100px;‘>"+opts.point[2]+"</span></div>"):"")+"</span>"); }
几个参数:
opts.pw: 点的宽度
opts.ph: 点的高度, 一般与opts.pw相等
opts.color: 点的颜色
opts.point: 表示点的位置,point[0]: 水平位置, point[1]: 垂直位置point[2]为点的标签
注意:position属性,必须为absolute;
二、直线
直线是由点组成的嘛,因此我们要在两点之间描出n多个点。视觉上,它就是一条直线。
//画线 //pstart 起点 //pend 终点 //opts 参数 function drawLine(pstart, pend, opts){ var ph = 1; var pw = 1; var color = "DarkRed"; if(opts){ color = opts.color ? opts.color: color; } var slope; //斜率 var noSlope = false; //是否有斜率 var hdist = pend[0] - pstart[0]; var vdist = pend[1] - pstart[1]; if(hdist != 0){ slope = Math.abs(vdist/hdist); //计算斜率 }else{ noSlope = true; //当hdist=0时,直线没有斜率 } var gapp = pw > ph ? ph : pw; //默认相邻点(左上角的像素点)间的距离 var diagonal = Math.sqrt(Math.pow(hdist,2) + Math.pow(vdist,2)); //斜边长度 var pn = parseInt(diagonal/gapp); //计算两点之间的点的数量 if(pn < 3){pn=pn*3+1}; //如果点的数量小于3,则加大点数;为什么+1呢,是保证pn=0时至少有一个点 var vgap = Math.abs(vdist)/pn; //相邻两点间的垂直距离 var hgap = Math.abs(hdist)/pn; //相邻两点间的水平距离 for(var i = 0; i< pn ; i++){ //描点 //hgap 相邻两点间的水平距离 //vgap 相邻两点间的垂直距离 //hgap*i*(pend[0]<pstart[0]?-1:1)*(noSlope?0:1) 相对于起点的水平偏移 //vgap*i*(pend[1]<pstart[1]?-1:1) 相对于起点的垂直偏移 //(pend[0]<pstart[0]?-1:1) 水平偏移方向 //(pend[1]<pstart[1]?-1:1) 垂直偏移方向 //(noSlope?0:1) 直线没有斜率时,水平偏移为0 drawPoint({ pw: pw, ph: ph, color: color, point: [(hgap*i*(pend[0]<pstart[0]?-1:1)*(noSlope?0:1)+pstart[0]),(vgap*i*(pend[1]<pstart[1]?-1:1)+pstart[1])] }); } }
在线的基础上可以画出折线和面:
折线:
//折线形 //ps 点的一维数组 function drawPolyline(ps){ if(ps){ //画线 for(var i = 0; i<ps.length-1; i++){ drawLine(ps[i], ps[i+1]); } //描拐点 for(var i = 0; i<ps.length; i++){ drawPoint({ pw: 3, ph: 3, color: ‘RED‘, point: ps[i] }); } } }
多边形:
//多边形 //ps 点的一维数组 function drawPolygon(ps){ if(ps){ //画线 for(var i = 0; i<ps.length-1; i++){ drawLine(ps[i], ps[i+1]); } //使闭合 if(ps.length > 2){ drawLine(ps[ps.length-1], ps[0]) } //描拐点 for(var i = 0; i<ps.length; i++){ drawPoint({ pw: 3, ph: 3, color: ‘RED‘, point: ps[i] }); } } }
矩形:
//画矩形 //leftTop 左上角的点的位置 //width 宽 //high 高 function drawRectangle(leftTop, width, high){ drawPolygon([ leftTop, [leftTop[0], leftTop[1]+high], [leftTop[0]+width, leftTop[1]+high], [leftTop[0]+width, leftTop[1]] ]); //填充 //document.write("<span style=‘height: "+(high-1)+"px; width: "+(width-1)+"px; background-color: "+"Green"+"; position: absolute; left:"+(leftTop[0]+1)+"px; top: "+(leftTop[1]+1)+"‘></span>"); }
时间: 2024-10-28 17:53:53