`
wrong1111
  • 浏览: 253374 次
  • 性别: Icon_minigender_1
  • 来自: 湖南
社区版块
存档分类
最新评论

js 画图--简单的直线图

IE互联网QQFirefoxGoogle 
阅读更多

因为近期，项目用到了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
1
顶
0
踩
分享到：
| webwork java.lang.reflect.InvocationTarg ...
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    Javascript画图js包

    JavaScript画图库，如标题所言的"Javascript画图js包"，是一种允许开发者在网页上绘制图形的工具。在JavaScript的世界里，这样的库通常提供了一系列API，使得开发者无需深入理解底层图形渲染机制，就能方便地创建出...

    js画图工具

    综合以上信息，我们可以推断这个js画图工具提供了一个简单易用的API，让用户能够利用jQuery轻松地在网页上绘制和交互图形。它可能包括各种图形的绘制方法，动画支持，以及与用户输入的实时交互功能。为了更好地理解...

    JSPaint一个用JS实现类似于windows的画图工具

    JS Paint，这是一个完全用JavaScript语言实现的项目，旨在复刻经典的Windows画图工具，为用户提供了在浏览器环境中进行简单绘图的功能。这个项目充分利用了JavaScript的动态特性和丰富的Web API，结合CSS技术，为...

    javascript画图

    总结一下，JavaScript画图主要依赖HTML5的Canvas API，通过创建和操作绘图环境，可以绘制各种图形，包括但不限于箭头和圆圈。熟练掌握这些技术，可以让你在网页开发中创建出丰富的交互式用户体验。在学习过程中，...

    wz_jsgraphics.js javascript 画图

    在JavaScript画图的场景中，Ajax可以用来异步地获取数据，然后将数据转化为图形显示在Canvas上，实现动态的可视化效果。 "asp"和"c#"是两种服务器端编程语言，ASP.NET（通常与C#一起使用）提供了一个强大的框架来...

    画图板--Java课程设计.doc

    在Java课程设计中，学生被要求实现一个"画图板"项目，这是一个基于Java编程语言的简单绘画应用程序。这个应用旨在模仿Windows操作系统中的画图工具，提供基本的绘图和图像处理功能。以下是该设计的主要知识点： 1. ...

    原生JS使用Canvas实现拖拽式绘图功能

    原生JS使用Canvas实现拖拽式绘图功能的知识点涵盖了Canvas API的基础应用、面向对象编程思想在Canvas绘图中的运用以及鼠标事件的处理，以下是详细解析： 1. Canvas API基础知识 - Canvas元素：HTML5新增的Canvas...

    简单画图板的设计

    "简单画图板的设计"是一个关于创建一个基本图形编辑器的话题，主要涉及到计算机图形学、用户界面设计以及可能的编程实现。在这个项目中，我们可能会遇到以下关键知识点： 1. **计算机图形学基础**：画图板应用的...

    SVG画图工具，整套源码

    4. **丰富的绘图工具**：SVG画图工具通常包含各种绘图元素，如直线、曲线、矩形、圆形、文本等，以及多种选择、变形和路径操作工具，满足设计师的基本需求。 5. **兼容性**：SVG画图工具应确保与主流浏览器的兼容性...

    页面画图ASP.NET 画图

    在ASP.NET中，可以结合JavaScript和Ajax技术实现动态画图，用户交互后立即更新画布。例如，当用户点击按钮时，服务器端生成新的绘图并返回到客户端。 8. **WebControl扩展** 如果需要自定义控件来实现更复杂的...

    js画图包及使用方法

    本文将深入探讨一个名为“wz_jsgraphics”的JS画图包及其使用方法。 **一、wz_jsgraphics介绍** wz_jsgraphics是一个专门用于在浏览器环境中进行图形绘制的JavaScript库。它提供了一系列的API，允许开发者创建复杂...

    js矢量画图，raphael.js使用案例，svg画图，web画图，b/s画图，网页画图

    基于raphael.js 实现矢量图形的绘制，兼容IE，fireFox，chrome等主流浏览器。 功能包括：画矩形，画圆，画三角形，画直线，画虚线，画大括号，画文字。 要绘制不规则曲线可以在这个基础上自己修改一下。 解压后直接...

    canvas 画图板.zip

    在网页开发中，Canvas 是一个非常重要的元素，它允许开发者通过 JavaScript 来进行动态图形绘制。这个"canvas 画图板.zip"文件包含了创建一个基本的在线画图应用程序所需的所有资源，包括 HTML、JavaScript 和 CSS ...

    javascript 画图资料

    在"新建文件夹 (2)"这个压缩包中，可能包含了使用JavaScript画图的实例代码、教程或者特定库的用法说明。通过学习和研究这些内容，开发者可以提升自己在JavaScript图形编程方面的技能，创建出更具吸引力和功能性的...

    课程设计-JAVA-画板-模拟画图工具.docx

    《JAVA-画板-模拟画图工具的设计与实现》 在计算机科学领域，模拟画图工具是一种常见的应用程序，它允许用户在屏幕上绘制各种图形。本课程设计以JAVA语言为基础，结合JavaScript技术，构建一个功能完备的画板应用，...

    一个简单的画图程序，可以画线、直线、矩形、多边形、圆、椭圆、并可以这些选中后的图形进行移动，扩大，缩小，删除等操作

    标题和描述中提到的是一个自制的简单画图程序，它具备基本的图形绘制和编辑功能。这个程序允许用户创建各种形状，包括线条、直线、矩形、多边形、圆形和椭圆。此外，它还提供了图形的选择、移动、缩放和删除功能，这...

    JS实现画图

    用JS实现画原型 折现 直线 扇形 曲线等图像。

    jsplumb实现的简易流程图画图工具

    **JSPlumb 实现的简易流程图画图工具详解** JSPlumb 是一个强大的 JavaScript 库，主要用于在网页上创建和管理动态连接（connections）和可拖动元素，它广泛应用于流程图、工作流编辑器、网络拓扑图等领域。在这个...

Magicbox
Global site tag (gtag.js) - Google Analytics