[讨论]开发一套自己的JS图形框架

Navymk 2008-07-01 05:41:37
以前跟一JS高人聊天，那哥们自己开发了一套框架，并给了我几个类，让我受益匪浅。从此我也开始着迷于自己开发框架。更准确说仅仅是一个类库而已。因为当时是玩笑话，所以给自己的框架起名aJoke.......prototype/jQuery等框架我一直没有用，仅对prototype和spry的代码作了一些参考，一直是坚持自己来编写。

做了不到半年吧，除了xhr/soap等内容之外，大部分都是图形类。类似柱形图，仿dw的取色器，下拉菜单，标签卡等等，并且在工作中也起了很大的作用。我主要是做c#程序的，兼职美工，所以大多数的类都是和服务器交换数据或者图形方面的，其他方面比较欠缺。

由于水平有限，虽然有些功能实现了，但肯定不是最好的方案。

刚才看了一个"240个jQuery插件"的博文,感受了一下jQuery的一些图形类,觉得一般.更让我有冲动去写一个较为全面的图形类库.

虽然现在网上很多现成的东西都有了,但我觉得这不是重复编写,起码在写的过程中,对人的锻炼是很大的;而且,这会是中文文档的类库.

那天我发了一个自己的js“数据库”，想作为自己框架的重写的开始。不知道哪位有兴趣参与一下.

我会在以后不断将自己新写的图形类发上来.希望各位不吝赐教.在形成一定规模后,我会把整个框架发布出来.

在这个过程里,希望各位多多关注,帮我提高代码的水平,提高这个框架的质量.

先谢了.有时间的话帮我想个框架的名字.
...全文
389 21 打赏 收藏 转发到动态 举报
写回复
用AI写文章
21 条回复
切换为时间正序
请发表友善的回复…
发表回复
maxall0 2011-09-05
  • 打赏
  • 举报
 回复
LZ08年就有这想法，膜拜~现在我也不知道那些图形JS好用！
2年了，LZ的项目怎么样了？
shuihan20e 2008-07-02
  • 打赏
  • 举报
 回复
[Quote=引用 10 楼 wtcsy 的回复:]
顶起 顶起!~~
看看效果吧!
[/Quote]
tantaiyizu 2008-07-02
  • 打赏
  • 举报
 回复
进来瞻仰楼主
moreyin 2008-07-02
  • 打赏
  • 举报
 回复
我建议使用flash做一个壳，然后通过js传递参数，这样无论效率还是效果还有兼容性都是最好的，其实做flash也不难，不知道有没有人肯做了。
Navymk 2008-07-02
  • 打赏
  • 举报
 回复
[Quote=引用 9 楼 mrshelly 的回复:]
加入到 jQuery UI 开发中去. 为什么要自己拉杆大旗?
[/Quote]
不是自己拉旗 我是奇怪csdn怎么没有自己的大旗
tgl10 2008-07-02
  • 打赏
  • 举报
 回复
flash吧,学as
或者silvelight?
xingqiliudehuanghun 2008-07-02
  • 打赏
  • 举报
 回复
我也是半路出家学的js，玩js也没有几天水平有限。想参与但想想可能也做不了什么。现在网上js的类库不少
但真正有用的不多大部分是一些锦上添花的特效什么的，而象绘图等这些有用类库却很少，所以从心底里支持楼主的想法，当然我水平有限可能帮不上什么。前两天公司让座一个demo需要画折线图，从网上查了半天也没有什么好的解决方案大部分使用vml来做的，可现在已经不是ie一统天下的时代了，没办法自己写了个凑合应付，但感觉效率太低了，今后遇到这种需求考虑用flash

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>无标题文档</title>

<style type="text/css">

body{

	maring:0px 0px 0px 0px;

}



/*象素点*/

.div-point{

	position:absolute;

	height:1px;

	width:1px;

	font-size:1px;

	background:#000000;

	overflow:hidden;

	z-index:1px;

}

/*折线点*/

.div-pointNode{

	position:absolute;

	margin:0px 0px 0px 0px;

	padding:0px 0px 0px 0px;

	z-index:2;

	cursor:pointer;

}

</style>

<script>

/**

*绘制折现函数

*@param {html.div}oDivOut     画板Div

*@param {Array}arrNodes       点集合

*@param {int}nLSize           线宽

*@param {String}sLColor       线色

*@param {int}nPSize           点宽

*@param {String}sPColor       点色

**/

function drawLinePath(oDivOut,arrNodes,nLSize,sLColor,nPSize,sPColor){

	for(var i=0,nLen=arrNodes.length;i<nLen-1;i++){

		lineTo(

			oDivOut,

			arrNodes[i].x,

			arrNodes[i].y,

			arrNodes[i+1].x,

			arrNodes[i+1].y,

			nLSize,

			sLColor);



		drawPointNode(

			oDivOut,

			arrNodes[i].x,

			arrNodes[i].y,

			nPSize,

			sPColor);	

	}

	

	drawPointNode(

		oDivOut,

		arrNodes[i].x,

		arrNodes[i].y,

		nPSize,

		sPColor);

}





/**

*画线函数

*@param {html.div}oDivOut  画板div

*@param {int}x1            起始X坐标

*@param {int}y1            起始Y坐标

*@param {int}x2            终点X坐标

*@param {int}y2            终点Y坐标

*@param {int}nWidth        线宽(可选)

*@param {String}sColor     线颜色(可选)

*/

function lineTo(oDivOut,x1,y1,x2,y2,nWidth,sColor){

	var slope,diff,direct;

	direct=Math.abs(x2-x1)>Math.abs(y2-y1)?"x":"y";

	if(x1==x2){//画垂直线

		diff=x2-x1;

		var temp=y2-y1;

		if(temp>0){

			for(var i=0;i<temp;i++){

				makedot(oDivOut,x1,y1+i,nWidth,sColor);

			}

		}else{

			for(var i=0;i>temp;i--){

				makedot(oDivOut,x1,y1+i,nWidth,sColor);

			}

		}

	}else if(direct=="x"){

		slope=(y2-y1)/(x2-x1);

		diff=x2-x1;

		if(x1<x2){

			for(var i=0;i<diff;i++){

				makedot(oDivOut,x1+i,y1+slope*i,nWidth,sColor);

			}

		}else{

			for(var i=0;i>diff;i--){

				makedot(oDivOut,x1+i,y1+slope*i,nWidth,sColor);

			}

		}	

	}else if(direct=="y"){

		diff=y2-y1;

		slope=(x2-x1)/(y2-y1);

		if(y1<y2){

			for(var i=0;i<diff;i++){

				makedot(oDivOut,x1+slope*i,y1+i,nWidth,sColor);

			}

		}else{

			for(var i=0;i>diff;i--){

				makedot(oDivOut,x1+slope*i,y1+i,nWidth,sColor);

			}			

		}	

	}

}



/**

*画折线点函数

*@param {html.div}oDivOut     画板Div

*@param {int}x                x坐标

*@param {int}y                y坐标

*@param {int}nSize            点宽

*@parm  {Stirng}sColor        点色

*@param {String}sTitle        title

*@param {Object}oAttribs      其他属性

**/

function drawPointNode(oDivOut,x,y,nSize,sColor){

	var oDivNode=document.createElement("div");

	var _nSize=nSize?nSize:6;

	var _r=Math.round(_nSize/2);

	document.all?oDivNode.className="div-pointNode"

	            :oDivNode.setAttribute("class","div-pointNode");

	oDivNode.style.color=sColor?"#"+sColor:"#0000ff";

	oDivNode.style.fontSize=_nSize+"px";

	oDivNode.style.height=_nSize+"px";

	oDivNode.style.width=_nSize+"px";

	oDivNode.style.left=(x-_r)+"px";

	oDivNode.style.top=(y-_r)+"px";

	oDivNode.innerHTML="●";

	oDivOut.appendChild(oDivNode);

}



/**

*画点函数

*@param {html.div}oDivOut  画板div

*@param {int}x             X坐标

*@param {int}y             Y坐标

*@param {int}nWidth        线宽(可选)

*@param {String}sColor     线颜色(可选)

**/

function makedot(oDivOut,x,y,nWidth,sColor){

	var oDiv=document.createElement("div");

	document.all?oDiv.className="div-point":

	             oDiv.setAttribute("class","div-point");

	oDiv.style.left=x+"px";

	oDiv.style.top=y+"px";

	oDiv.style.width=nWidth?nWidth+"px":"1px";

    oDiv.style.background=sColor?"#"+sColor:"#000000";

	oDivOut.appendChild(oDiv);	 

}



function $(strId){

	return document.getElementById(strId);

}



window.onload=function(){

	var arrayNodes=[

		{x:10,y:10},

		{x:30,y:25},

		{x:50,y:40},

		{x:70,y:70},

		{x:90,y:20},

		{x:110,y:140},

		{x:130,y:67},

		{x:150,y:90},

		{x:170,y:120},

		{x:190,y:220},

		{x:210,y:150}

	];

	

	drawLinePath($("div1"),arrayNodes,2,"339966",10,"ff0000");

}

</script>

</head>

<body>

    <div id="div1" style="width:300px;height:300px;

                          border:1px solid red;

                          position:absolute;

                          left:10px;top:10px;">

    </div>

</body>

</html>

winner2050 2008-07-02
  • 打赏
  • 举报
 回复
几乎所有的Ｗｅｂ程序都不会用ＪＳ画图。
xingqiliudehuanghun 2008-07-02
  • 打赏
  • 举报
 回复
[Quote=引用 16 楼 moreyin 的回复:]
我建议使用flash做一个壳，然后通过js传递参数，这样无论效率还是效果还有兼容性都是最好的，其实做flash也不难，不知道有没有人肯做了。
[/Quote]
英雄所见略同，正准备学呢，从网上找了一个AnyChart就是那样做的很喜欢打算也按照这种模式来
YH_Random 2008-07-02
  • 打赏
  • 举报
 回复
有意，
Email:Random.Hao.Yang@Gmail.com
onepiece81 2008-07-02
  • 打赏
  • 举报
 回复
向楼主学习
wtcsy 2008-07-01
  • 打赏
  • 举报
 回复
顶起 顶起!~~
看看效果吧!
mrshelly 2008-07-01
  • 打赏
  • 举报
 回复
加入到 jQuery UI 开发中去. 为什么要自己拉杆大旗?
BlueDestiny 2008-07-01
  • 打赏
  • 举报
 回复
关于纯图形类，我更倾向于flash，不管是效率还是可用性。图形在js里，只能算是辅助~
当然，楼主能写出来就很好，也许很多象我这样想法的人会因此而改变这样的想法。最重要的是能够学习到一些东西。对自己还有以后做这行的人都有借鉴和学习的作用。
maximus_zhang 2008-07-01
  • 打赏
  • 举报
 回复
东西呢？

秀一下嘛。。。。

不要光说不练哦～～
Edwingu 2008-07-01
  • 打赏
  • 举报
 回复
不错,希望到时能分享一下.学习~
Navymk 2008-07-01
  • 打赏
  • 举报
 回复
[Quote=引用 2 楼 s_liangchao1s 的回复:]
向楼主学习 不知道是哪位高人

[/Quote]

江湖人称老白...
s_liangchao1s 2008-07-01
  • 打赏
  • 举报
 回复
相信楼主 看了楼主写的一些东西 真的很不错
Navymk 2008-07-01
  • 打赏
  • 举报
 回复
不是扯大旗做虎皮,但我有心把这个框架作为csdn.javascript的产品推出来,所以我期待这个事情,不是我一个人在战斗,这对我们这版也是有利的事情.
s_liangchao1s 2008-07-01
  • 打赏
  • 举报
 回复
向楼主学习 不知道是哪位高人
基于ThinkPHP的极速后台开发框架设计源码
本资源提供了一套基于ThinkPHP和Bootstrap的极速后台开发框架设计源码，名为FastAdmin。该框架开源且可免费商用，内置了基于Auth验证的权限管理系统，并支持一键生成CRUD功能。项目包含550个文件，其中166个LESS样式...
基于Python Django框架的库存管理系统源码
项目概述：基于Python Django的库存管理系统 本项目采用Python语言为主...本项目通过Django框架开发了一套简易的库存管理系统，它适用于中小型企业进行库存的跟踪与管理，界面友好，操作简便，助力企业高效管理库存。
casualJS本地API文档
CasualJS Framework是根据ActionScript3.0的架构开发的一套适用于HTML5 Canvas的面向对象的开发框架。目的是让你无缝的从AS3开发过渡到HTML5 Canvas开发。虽然Canvas提供了强大的绘图功能，但满足不了高级开发的需要...
利用shiny包快速搭建可视化原型系统
Shiny是R中的一种Web开发框架,使得R的使用者不必太了解css、js只需要了解一些html的知识就可以 快速完成web开发,且shiny包集成了bootstrap、jquery、ajax等特性,极大解放了作为统计语言的R的 生产力。
AtomGraphics:OpenGL，CoreGraphics，Metal，Skia实现的跨平台图形框架
作者开发AtomGraphics的初衷是基于C/C++开发一套能跨平台绘图的API，能充分利用各个平台的特性，实现高流畅度、低内存消耗的的画图SDK 工程的雏形(prototype)参考了cocos2d，有的代码来自其开源代码，后边会逐一声明...
JavaScript

87,910

社区成员

224,616

社区内容

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告
暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章