此回复为自动发出,仅用于显示而已,并无任何其他特殊作用
楼主【Navymk】截止到2008-07-01 17:41:48的历史汇总数据(不包括此帖):
发帖数:18 发帖分:1418
结贴数:11 结贴分:746
未结数:7 未结分:672
结贴率:61.11 % 结分率:52.61 %
楼主加油
楼主【Navymk】截止到2008-07-01 17:41:48的历史汇总数据(不包括此帖):
发帖数:18 发帖分:1418
结贴数:11 结贴分:746
未结数:7 未结分:672
结贴率:61.11 % 结分率:52.61 %
楼主加油
当然,楼主能写出来就很好,也许很多象我这样想法的人会因此而改变这样的想法。最重要的是能够学习到一些东西。对自己还有以后做这行的人都有借鉴和学习的作用。
但真正有用的不多大部分是一些锦上添花的特效什么的,而象绘图等这些有用类库却很少,所以从心底里支持楼主的想法,当然我水平有限可能帮不上什么。前两天公司让座一个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>
或者silvelight?
Email:[email protected]
2年了,LZ的项目怎么样了?