- 浏览: 248896 次
- 性别:
- 来自: 湖南
文章分类
最新评论
-
nick.s.ni:
eclipselink JPA 没遇到这个问题,entity是 ...
JPA 无法加载独立JAR包中实体映射文件 unkonwn entity -
xiaoLee:
不错的example
freemarker 学习 -
yhjhoo:
这个是2.16的bug,升级到2.18就好了
严重: Exception starting filter struts2 -
chltkgg:
顶三楼的,谢谢了。。。。。
严重: Exception starting filter struts2 -
thebye85:
应该是BUG,把int改成long就可以了public voi ...
在配置proxool联接池时,houseKeepingSleepTime属性不能设置
因为近期,项目用到了JS画图,从网上搜了下,有用DIV一个一个联接成的直线图,那个当行数超过五百以上的时候,就会出现效率问题。
后又找到了适合IE 的 VML 不适合FIREFOX的。。但是互联网是强大的。。从高人处知道了一个 excanvas。google开源的,可以在IE中模拟出来。。也就是说一些基本的都可以模拟出来。。OK。这就是要我要的了。。
首先,当然需要下载环境了。。
现在我们再来画个简单的HTML页面,里面有一张表格,表格里面大概有几行数据。。这数据就是我们要画直线的了。。
样式:
body { margin:0px;padding:0px; } body,td,th{ font-size:12px; } div{ width:960px; } table{ color:#464646; font-family:Arial; } tr{ background:#dddffd; } td{ width:18px;height:18px;height:18px;text-align:center; } .gray{ } .blue{ background:blue } .red{ background:red } .gray_a{ background:gray; } .tdback{ background:#DBDBDB none repeat scroll 0 0; height:3px; }
HTML页面
<div> <table> <tbody> <tr><td class="blue">1</td><td class="gray">1</td><td class="gray">1</td><td class="gray">1</td><td class="gray">1</td><td class="gray">1</td><td class="gray">1</td><td class="gray">1</td><td class="gray">1</td><td class="gray">2</td><td class="gray">2</td><td class="red">2</td><td>2</td><td class="gray">2</td><td class="gray">2</td><td class="gray">2</td><td class="gray">2</td></tr> <tr><td class="blue">1</td><td class="gray">1</td><td class="gray">1</td><td class="gray">1</td><td class="gray">1</td><td class="gray">1</td><td class="gray">1</td><td class="gray">1</td><td class="gray">1</td><td class="gray">2</td><td class="gray">2</td><td class="gray" >2</td><td>2</td><td class="gray">2</td><td class="gray">2</td><td class="gray">2</td><td class="red">2</td></tr> <tr><td class="blue">1</td><td class="gray">1</td><td class="gray">1</td><td class="gray">1</td><td class="gray">1</td><td class="gray">1</td><td class="gray">1</td><td class="gray">1</td><td class="gray">1</td><td class="gray">2</td><td class="gray">2</td><td class="gray" >2</td><td>2</td><td class="gray">2</td><td class="gray">2</td><td class="gray">2</td><td class="gray">2</td></tr> <tr><td class="gray">1</td><td class="gray">1</td><td class="gray">1</td><td class="gray">1</td><td class="gray">1</td><td class="gray">1</td><td class="blue">1</td><td class="gray">1</td><td class="gray">1</td><td class="gray">2</td><td class="gray">2</td><td class="gray" >2</td><td>2</td><td class="gray">2</td><td class="gray">2</td><td class="red">2</td><td class="gray">2</td></tr> <tr class="tdback"><td colspan="17"></td></tr> <tr><td class="gray">1</td><td class="gray">1</td><td class="gray">1</td><td class="gray">1</td><td class="gray">1</td><td class="gray">1</td><td class="blue">1</td><td class="gray">1</td><td class="gray">1</td><td class="gray">2</td><td class="gray">2</td><td class="gray" >2</td><td>2</td><td class="gray">2</td><td class="gray">2</td><td class="red">2</td><td class="gray">2</td></tr> <tr><td class="blue">1</td><td class="gray">1</td><td class="gray">1</td><td class="gray">1</td><td class="gray">1</td><td class="gray">1</td><td class="gray">1</td><td class="gray">1</td><td class="gray">1</td><td class="gray">2</td><td class="gray">2</td><td class="red">2</td><td>2</td><td class="gray">2</td><td class="gray">2</td><td class="gray">2</td><td class="gray">2</td></tr> <tr><td class="gray">1</td><td class="gray">1</td><td class="gray">1</td><td class="gray">1</td><td class="blue">1</td><td class="gray">1</td><td class="gray">1</td><td class="gray">1</td><td class="gray">1</td><td class="gray">2</td><td class="gray">2</td><td class="gray" >2</td><td>2</td><td class="gray">2</td><td class="gray">2</td><td class="gray">2</td><td class="red">2</td></tr> <tr><td class="blue">1</td><td class="gray">1</td><td class="gray">1</td><td class="gray">1</td><td class="gray">1</td><td class="gray">1</td><td class="gray">1</td><td class="gray">1</td><td class="gray">1</td><td class="gray">2</td><td class="gray">2</td><td class="gray" >2</td><td>2</td><td class="gray">2</td><td class="gray">2</td><td class="gray">2</td><td class="gray">2</td></tr> <tr><td class="gray">1</td><td class="gray">1</td><td class="gray">1</td><td class="gray">1</td><td class="gray">1</td><td class="gray">1</td><td class="blue">1</td><td class="gray">1</td><td class="gray">1</td><td class="gray">2</td><td class="gray">2</td><td class="gray" >2</td><td>2</td><td class="gray">2</td><td class="gray">2</td><td class="red">2</td><td class="gray">2</td></tr> <tr class="tdback"><td colspan="17"></td></tr> <tr><td class="gray">1</td><td class="gray">1</td><td class="gray">1</td><td class="gray">1</td><td class="gray">1</td><td class="gray">1</td><td class="blue">1</td><td class="gray">1</td><td class="gray">1</td><td class="gray">2</td><td class="gray">2</td><td class="gray" >2</td><td>2</td><td class="gray">2</td><td class="gray">2</td><td class="red">2</td><td class="gray">2</td></tr> </tbody> </table> </div>
js 代码:
<script> <!-- /** 画布初始化。 以表格行总数-1 即为需要生成的画布。 id 表格需要呈现的id 或class */ function paintDiv(id){ var ary = $(id).get(); var size = $(ary).size(); var pre= null;//上一个坐标点 if(size > 1) pre = $(ary).get(0); var str ="";//定义画布字符串 var w = 20;//定义宽度20px var h = 20;//定义高度20px var curId = id; curId = id.replace(/\./g,''); for(var i=1;i<size;i++){ var next = $(ary).get(i); //得到上一X,Y坐标点。 var x0 = parseInt(pre.offsetLeft);//宽 var y0 = parseInt(pre.offsetTop);//高 var x1 = parseInt(next.offsetLeft);//宽 var y1 = parseInt(next.offsetTop);//高 //画布左上角坐标。。如果点在起点在左,那么第一个坐标的X点《第二点的X点。反之,在右,第二个坐标的X点》第一个坐标X点。 //如果是同一列,那么二者X坐标点应该是相同的。。 var w0 =0;//宽 var h0 = 0;//高 var width = 0; var height = h; var left = -1; if((x0 - x1)>0) left = -1;//第二个坐标点位于左,第一个坐标位于右。 else if((x0-x1)==0) left = 0;//第二个坐标点与第一个坐标点,在同一列。 else if((x0-x1)<0) left =1;//第二个坐标点位于右。第一个坐标位于左。 if(left == 1){ w0 = x0 +w/2 ;//宽度 2 h0 = y0+h/2;//2 width = (x1 - x0) ; height = (y1-y0); }else if(left == 0){ h0 = y0 +h/2;//2 w0 = x0; width = w; height = (y1 - y0) ; }else if(left == -1){ w0 = x1+w/2;//2 h0 = y0 +h/2;//2 width = x0 - x1 ; height = (y1-y0); } document.write("<canvas id="+curId+i+" width="+width+" height="+height+" class=n"+curId+" style='position:absolute;top:"+h0+"px;left:"+w0+"px;'></canvas>"); x0=0;y0=0;x1=0;y1=0; //把下一坐标对象赋给上一个坐标 pre = null; pre = next; } } paintDiv('.blue'); paintDiv('.red'); // //--> </script>
上面的JS代码用于根据表格中的 小格,生成多少个 canvas
下面这个才是真正用于画线的。
<script> /** x0 起点坐标 X Y0 起点坐标 Y X1 终点坐标 X Y1 终点坐标 Y ID 画布ID COLOR 线颜色 默认为 green lineWidth 线大小。默认为1 **/ function drawLine(x0,y0,x1,y1,id,color,lineWidth){ var ctxt = document.getElementById(id).getContext('2d'); ctxt.save(); ctxt.strokeStyle =color==null?"green":color; ctxt.lineWidth = lineWidth==null?1:lineWidth; ctxt.beginPath(); ctxt.moveTo(x0 , y0); ctxt.lineTo(x1, y1); ctxt.closePath(); ctxt.stroke(); ctxt.restore(); } /** 画布 */ function canvasLine(pointId){ var cavs = $(pointId).get(); //var size = $(canvasId).size();//画布 //$("#size").text(size); var ary = $(pointId).get();//坐标点样式 var size = $(ary).size(); var pre= null;//上一个坐标点 if(size > 1) pre = $(ary).get(0); var str ="";//定义画布字符串 var w = 20;//定义宽度20px var h = 20;//定义高度20px for(var i=1;i<size;i++){ var next = $(ary).get(i); //得到上一X,Y坐标点。 var x0 = parseInt(pre.offsetLeft);//宽 var y0 = parseInt(pre.offsetTop);//高 var x1 = parseInt(next.offsetLeft);//宽 var y1 = parseInt(next.offsetTop);//高 //画布左上角坐标。。如果点在起点在左,那么第一个坐标的X点《第二点的X点。反之,在右,第二个坐标的X点》第一个坐标X点。 //如果是同一列,那么二者X坐标点应该是相同的。。 var w0 =0;//宽 var h0 = 0;//高 var width = 0; var height = h; var left = -1; if((x0 - x1)>0) left = -1;//第二个坐标点位于左,第一个坐标位于右。 else if((x0-x1)==0) left = 0;//第二个坐标点与第一个坐标点,在同一列。 else if((x0-x1)<0) left =1;//第二个坐标点位于右。第一个坐标位于左。 var pontId = pointId.replace(/\./g,''); if(left == 1){ w0 = 0 ;//高度 h0 = 0; width = (x1 - x0); height = y1-y0; drawLine(w0,h0,width,height,pontId+i); }else if(left == 0){ w0 = w/2; h0 = 0 ; width = w/2; height = (y1 - y0) ; drawLine(w0,h0,width,height,pontId+i); }else if(left == -1){ w0 = x0-x1; h0 = 0 ; width = 0; height = (y1-y0); drawLine(w0,h0,width,height,pontId+i); } x0=0;y0=0;x1=0;y1=0; //把下一坐标对象赋给上一个坐标 pre = null; pre = next; } }
基本上所有的代码都在这里了。。如果哪位需要其他的代码可以与我联系. wrong1111@126.com 或者 343886028 QQ 注明 js
下面是所有的代码源码
- testcases.rar (21.8 KB)
- 描述: JS画图所用js
- 下载次数: 490
- drawline.rar (24.4 KB)
- 下载次数: 545
发表评论
-
js 谨慎JS中的陷阱
2011-04-12 12:18 772之前处理JS。。往往大意,没有太多的注意一些小细节处理问题。。 ... -
JS 另存为解决中文问题
2010-11-16 19:19 1860在项目开发中,碰到了一个最简单不过的问题,但是解决起来也很头疼 ... -
jquery checkbox children
2010-07-21 15:07 1687<table><tbody><t ... -
Frame 属性 在IE,FIREFOX中获取值方法
2009-12-13 12:20 1372IE: window.frames['framename']. ... -
WEB开发,网页可用到的浏览器属性
2009-12-09 14:31 879做个记号, 做WEB前端开发,少不了跟浏览器打交道,但 ... -
iframe 自适应高度JS代码,兼容FF ,IE
2009-08-25 14:32 2532代码: <iframe src=" ... -
js 验证在多次匹配情况下,注意出错
2009-08-12 16:28 1042自己在做一个JS验证的过程中,同一个规则,对同一个匹配对象,匹 ... -
比较完整的表单验证js
2009-07-31 15:35 2106在做WEB开发时,对于页 ... -
js 读写cookie
2009-07-31 15:18 1519//读 Cookie 有则返回,无则返回null funct ... -
提高JS文件加载速度
2009-03-04 11:27 1874开发过程中,经常发现JS加载文件出现过慢,导致页面文件很长时间 ... -
ajax开发时,出现错误,百思不得其解.
2008-03-19 14:49 28804:44:54,718 ERROR [[/EpressPubl ... -
dwr 回调方法,不理解
2008-01-09 10:47 2583代码如下 function deloption(id,name ...
相关推荐
实现DIV与DIV之间的连线,工程流程图那样.使用DIV+JS! 我封装了一个基于vml/svg画线条的跨浏览器的函数 用法: var g = new FlowGraphic(); var arrow = g.drawArrow(5,26,200,300,"red"); var arrow = g.drawArrow...
用JS实现画原型 折现 直线 扇形 曲线等图像。
基于raphael.js 实现矢量图形的绘制,兼容IE,fireFox,chrome等主流浏览器。 功能包括:画矩形,画圆,画三角形,画直线,画虚线,画大括号,画文字。 要绘制不规则曲线可以在这个基础上自己修改一下。 解压后直接...
这是一个画图的插件 很好用 可以完成 直线 圆形 一些图形的绘制
可以利用JS画出各种漂亮的地图,包括直线,曲线,柱状图,饼状图,地图等等。比较漂亮!
百度地图的网页,调用百度地图api的javaScript,这里得创建自己的工单,申请自己的密钥key(申请的是浏览器端),通过输入经度纬度、线宽、线的颜色、线的透明度,实现百度地图的标点,折线,画图(注意:这里标点输入...
一个非常简单的绘画网络应用程序,用于学习一些javascript。 特征 形状:矩形,椭圆形,圆形,直线,自由笔,文本 设置:字体大小,线宽,颜色,填充 其他:另存为(另存为json),加载(从json),新建,撤消,重做
本文件中代码为js,提供canvas中画圆圈、实心圈、直线的方法实例
本文结合计算机图形学中基本图形的扫描转换和图形变换原理与算法,如一维线框图 形直线、圆、椭圆的扫描转换问题,二维多边形的填充,字符的表示,图形的裁剪,由简 单图形生成复杂图形,二维三维图形的平移、旋转、...
ARX在线CAD画图,在鼠标按下事件和移动事件中,监听鼠标的位置,并使用 Canvas 上下文对象绘制直线。具体来说,可以记录鼠标按下时的坐标,并在鼠标移动过程中不断更新直线的终点坐标,实现“动态绘制”线条的效果。...
· DrJs是一个基于DOM和CSS的网页绘图JavaScript框架,使用它,你可以轻松地在网页上绘制直线、多面形、椭圆、扇形等图形,你还可以使用它绘制直方图、折线图、饼图等统计图形,当然,如果你愿意,你还可以用它绘制...
Js + canvas实现用户动态画图的效果,可以在canvas画布中框出自定义的识别区域和填写区域信息 后端 Spring MVC + Spring + JDBC搭建后端框架,Controller负责接收请求,Service负责主要业务逻辑,Dao负责数据库访问 ...
使用鼠标或wacom打开开始画图板。 或打印出来 翻过木板,播放,倾斜,进行更改。 不要因为太多的按钮或选项而放慢速度。 您是在这里讲故事,而不是下一个蒙娜丽莎。 在任何平板电脑,Cintiq甚至Microsoft Surface...