使用JScript如何绘制图形???
编写asp.net的程序,请问如何从后台获取数据,在前台使用JScript进行图形的绘制。
不用JScript也行,但重要的是后台只获取数据并传到客户端,而在前台使用JScript进行绘制。
请注意是编写asp.net的程序。
问题点数:100、回复次数:21Top
1 楼Sunmast(速马@Redmond, WA)回复于 2005-01-24 10:51:36 得分 2
似乎只有用ActiveX或者Java AppletTop
2 楼LoveCherry(论成败,人生豪迈;大不了,重头再来!^_^)回复于 2005-01-24 10:53:06 得分 2
用applet吧
也可以交互Top
3 楼nstorm(网の风)回复于 2005-01-24 11:11:10 得分 2
用js调用aspx页面呀,或者你自己做一个Activex控件或者AppletTop
4 楼webfactory(jack)回复于 2005-01-24 11:24:29 得分 2
VML+javascriptTop
5 楼mooddecode1980(心情解码)回复于 2005-01-24 11:28:08 得分 1
:)
--Top
6 楼very2773029()回复于 2005-01-24 11:30:45 得分 0
没有ActiveX和Applet的经验,哪位能指个路,俺好入个门。
如果是做成.net 的WebControl是不是也行,但WebControl只能是从后绘制好图形再传到客户端了。
但我是刚开始接触Web方面的东西,还请借绍俺入个门。Top
7 楼mooddecode1980(心情解码)回复于 2005-01-24 11:34:42 得分 1
:)
==Top
8 楼liulxmooo(娃娃)回复于 2005-01-24 11:35:08 得分 1
upTop
9 楼xinbuzailiulei()回复于 2005-01-24 12:33:09 得分 2
为什么不用gdi呢
也可以用jscript+vmlTop
10 楼lovelxj(伊斯人,吾谁与归)回复于 2005-01-25 17:33:58 得分 2
如果是矢量图形,则用 js +vml
如果是 复杂的图象 那用GDI 或者APPLET吧。Top
11 楼Seeko0(阿 枫(终点又回到起点,到现在我才发现))回复于 2005-01-25 17:35:35 得分 2
看你需要绘制哪类图形,一般的柱装统计图使用Js产生DIV然后加上颜色即可满足,
复杂的可以考虑使用vml,我也没有用过,
当然也可以使用GDI+在服务器端绘图保存,然后返回路径提供访问。Top
12 楼goody9807(http://goody9807.cnblogs.com)回复于 2005-01-25 17:44:56 得分 1
js +vml
<HTML xmlns:v>
<HEAD>
<title>Draw</title>
<META http-equiv="Content-Type" content="text/html; Charset=gb2312">
<STYLE>v\:* { BEHAVIOR: url(#default#VML) }
A { COLOR: white; TEXT-DECORATION: none }
A:hover { COLOR: yellow; TEXT-DECORATION: underline }
TD { FONT-SIZE: 12px; COLOR: white }
.bon1 { BORDER-RIGHT: #eeeeee 1px solid; BORDER-TOP: gray 1px solid; BORDER-LEFT: gray 1px solid; WIDTH: 80px; COLOR: yellow; BORDER-BOTTOM: #eeeeee 1px solid; BACKGROUND-COLOR: #619ce7 }
.bon2 { BORDER-RIGHT: gray 1px solid; BORDER-TOP: #eeeeee 1px solid; BORDER-LEFT: #eeeeee 1px solid; WIDTH: 80px; COLOR: white; BORDER-BOTTOM: gray 1px solid; BACKGROUND-COLOR: #619ce7 }
</STYLE>
</HEAD>
<BODY oncontextmenu="return false" onselectstart='if(event.srcElement.tagName!="TEXTAREA"&&event.srcElement.tagName!="INPUT")return false'
style="MARGIN: 1px; CURSOR: default" onhelp='if(help.style.display=="none"){bangzhu.click()}else{guanbibangzhu.click()};return false'
vLink="#3732cd" link="#3732cd">
<v:line id="line1" style="DISPLAY: none; Z-INDEX: 2000; POSITION: absolute" from="0,0" to="0,0">
<v:stroke dashstyle="shortDash"></v:stroke>
</v:line><v:arc id="arc1" style="DISPLAY: none; Z-INDEX: 2000; POSITION: absolute" startangle="-200"
endangle="30" coordsize="21600,21600" adj=",,5400"><v:stroke joinstyle="miter" dashstyle="shortDash"></v:stroke>
</v:arc><v:oval id="oval1" style="DISPLAY: none; Z-INDEX: 2000; POSITION: absolute" coordsize="21600,21600"><v:stroke dashstyle="shortDash"></v:stroke>
</v:oval><v:rect id="rect1" style="DISPLAY: none; Z-INDEX: 2000; POSITION: absolute" coordsize="21600,21600"><v:stroke dashstyle="shortDash"></v:stroke>
</v:rect><v:roundrect id="roundrect1" style="DISPLAY: none; Z-INDEX: 2000; POSITION: absolute" arcsize="4321f"
coordsize="21600,21600"><v:stroke dashstyle="shortDash"></v:stroke>
</v:roundrect><span id="wenzi1" style="DISPLAY: none; FONT-SIZE: 14px; Z-INDEX: 2000; WIDTH: 303px; FONT-FAMILY: Verdana; POSITION: absolute; HEIGHT: 161px; BACKGROUND-COLOR: silver"><textarea id="txt1" style="BORDER-RIGHT: black 1px solid; BORDER-TOP: black 1px solid; BORDER-LEFT: black 1px solid; WIDTH: 300px; BORDER-BOTTOM: black 1px solid; HEIGHT: 61px"
rows="3" cols="34"></textarea><br>
<center>Font Name:
<select id="wenziziti" style="WIDTH: 100px" onchange="gengxinwenzi.click()">
<option selected>Arial</option>
<option>Arial Black</option>
<option>Courier</option>
<option>Roman</option>
<option>Tahoma</option>
<option>Verdana</option>
</select>Size:
<select id="wenzidaxiao" style="WIDTH: 50px" onchange="gengxinwenzi.click()">
<option selected>12
<script>for(i=0;i<101;i++)document.write("<option>"+i)</script>
</option>
</select><br>
Color:<input onmousemove="gengxinwenzi.click()" onmousedown="colortab.style.left=event.x-50;colortab.style.top=event.y+this.offsetHeight;rndcolor(this.id)"
id="wenziyanse" style="BORDER-RIGHT: black 1px solid; BORDER-TOP: black 1px solid; BORDER-LEFT: black 1px solid; WIDTH: 74px; BORDER-BOTTOM: black 1px solid; HEIGHT: 20px"
type="text" size="7" value="#000000"> Background:<input onmousemove="gengxinwenzi.click()" onmousedown="colortab.style.left=event.x-50;colortab.style.top=event.y+this.offsetHeight;rndcolor(this.id)"
id="wenzibeijing" style="BORDER-RIGHT: black 1px solid; BORDER-TOP: black 1px solid; BORDER-LEFT: black 1px solid; WIDTH: 85px; BORDER-BOTTOM: black 1px solid; HEIGHT: 19px"
type="text" size="8" value="#FFFFFF">
<br>
With Edge<input id="wenzibiankuang" type="checkbox"><br>
<input class="bon2" id="gengxinwenzi" style="WIDTH: 129px; HEIGHT: 28px" onclick="txt1.style.color=wenziyanse.value;txt1.style.backgroundColor=wenzibeijing.value;txt1.style.fontSize=wenzidaxiao.options[wenzidaxiao.selectedIndex].text;txt1.style.fontFamily=wenziziti.options[wenziziti.selectedIndex].text;"
type="button" value="Browser Update"> <input class="bon2" onclick="charuwenzi()" type="button" value="Insert">
<input class="bon2" onclick="wenzi1.style.display='none'" type="button" value="Cancel">
</span><span id="tupian1" style="DISPLAY: none; FONT-SIZE: 14px; Z-INDEX: 2000; FONT-FAMILY: Verdana; POSITION: absolute; BACKGROUND-COLOR: silver"><input id="file1" style="WIDTH: 400px" type="file"><br>
<center><select id="duibi">
<option selected>Default Contrast
<script>for(i=0;i<101;i++)document.write("<option>"+i)</script>
</option>
</select>
<select id="secai">
<option selected>Default Color
<script>for(i=0;i<9.9;i+=0.1)document.write("<option>"+new Number(i).toFixed(1))</script>
<option>10</option>
</select>
<br>
<select id="liangdu">
<option selected>Default Brightness
<script>for(i=-0.5;i<0.6;i+=0.1)document.write("<option>"+new Number(i).toFixed(1))</script>
</option>
</select>
<input id="heibai" onclick="duibi.disabled=this.checked;secai.disabled=this.checked;liangdu.disabled=this.checked"
type="checkbox">
<label for="heibai">Grayscale</label><br>
<input class="bon2" onclick="charutupian()" type="button" value="Insert">Top
13 楼goody9807(http://goody9807.cnblogs.com)回复于 2005-01-25 17:45:25 得分 2
<script language="jscript">
var bi=4 //
var color1='#000000',color2='#000000',size1=0 //
var xx=0,yy=0,zz=1000 //
var isok=false //
var moveobj=null,ckleft=0,cktop=0,ckwid=0,ckhei=0,ckto="" //
var poly1=null,oldvalue="",oldx=0,oldy=0 //
var gaojiobj=null //
var thisobj=null //
var zz2=1000 //
var huxingtixing=false //
var chexiao=new Array(),youbiao=0,fanchexiao1=2 //
//var pathline=""
var ids=0
var free
var pl
function div1.onmousedown()
{
div1.setCapture();
color1=huabiyanse.value;
color2=huabibeijing.value;
isok=true;
size1=bibiancudu.options[bibiancudu.selectedIndex].text
xx=event.x;
yy=event.y;
zz+=1;
for(i=0;i<huabi.length;i++)
{
if(huabi[i].className=="bon1")
{ bi=i+1;break }
}
line1.strokecolor=color1;
line1.strokeweight=size1;
oval1.strokeweight=size1;
oval1.strokecolor=color1;
oval1.fillcolor=color2;
rect1.strokeweight=size1;
rect1.strokecolor=color1;
rect1.fillcolor=color2;
roundrect1.strokeweight=size1;
roundrect1.strokecolor=color1;
roundrect1.fillcolor=color2;
arc1.strokeweight=size1;
arc1.strokecolor=color1;
arc1.fillcolor=color2;
if(event.button==1)
{
switch(bi)
{
case 1: //
if(event.srcElement.parentElement.id=="div1")
{
moveobj=event.srcElement;
ckleft=xx-parseInt(moveobj.style.left);
cktop=yy-parseInt(moveobj.style.top)
}
break;
case 2: //
if(event.srcElement.parentElement.id=="div1")
{
moveobj=event.srcElement;
ckleft=parseInt(moveobj.style.left);
cktop=parseInt(moveobj.style.top);
ckwid=moveobj.offsetWidth;
ckhei=moveobj.offsetHeight
}
break;
case 3: //
arc1.style.left=event.x;
arc1.style.top=event.y;
arc1.style.width=0;
arc1.style.height=0;
arc1.style.display="";
break;
case 4: //
line1.style.left=event.x;
line1.style.top=event.y;
line1.to="0,0";
line1.style.display=""
break;
case 6: //
oval1.style.left=event.x;
oval1.style.top=event.y;
oval1.style.width=0;
oval1.style.height=0;
oval1.style.display=""
break;
case 7: //
rect1.style.left=event.x;
rect1.style.top=event.y;
rect1.style.width=0;
rect1.style.height=0;
rect1.style.display=""
break;
case 8: //
roundrect1.style.left=event.x;
roundrect1.style.top=event.y;
roundrect1.style.width=0;
roundrect1.style.height=0;
roundrect1.style.display=""
break;
case 9: //
wenzi1.style.left=event.x;
wenzi1.style.top=event.y;
wenzi1.style.display=""
break;
case 10: //
tupian1.style.left=event.x;
tupian1.style.top=event.y;
tupian1.style.display=""
break;
case 5: //
ids++;
//free = "<v:shape id='line"+ ids +"' style='position: absolute;z-index:"+zz+"; left: 0px; top: 0px; width: " + document.body.clientWidth + "px; height: " + document.body.clientHeight + "px;' coordsize='" + document.body.clientWidth + "," + document.body.clientHeight + "'strokecolor='"+color1+"' strokeweight='"+size1+"'><v: path v='m " + event.clientX + "," +event.clientY + " l " + event.clientX + "," + event.clientY + " e'/></v:shape>";
free = "<v:shape id='lines"+ ids +"' filled='false' style='position: absolute;z-index:"+zz+"; left: 0px; top: 0px; width: " + document.body.clientWidth + "px; height: " + document.body.clientHeight + "px;' coordsize='" + document.body.clientWidth + "," + document.body.clientHeight + "'strokecolor='"+color1+"' strokeweight='"+size1+"' path='m " + event.clientX + "," +event.clientY + " l " + event.clientX + "," + event.clientY + " e'></v:shape>";
pl="'m " + event.clientX + "," +event.clientY + " l " ;
div1.appendChild(document.createElement(free));
break;
}//switch
}//if
}//function div1.onmousedown()Top
14 楼ybh2002(冰鸿)回复于 2005-01-31 09:45:55 得分 2
用VML,这有个例子,是ASP的,现已做成.net了,即将发布www.code21cn.comTop
15 楼zhsng3(大头)回复于 2005-01-31 11:06:53 得分 2
我现在也在用ASP.NET的图形功能,我用的是GDI+这个类的。Top
16 楼njuzgj(罐子)回复于 2005-01-31 11:21:38 得分 1
顶Top
17 楼minghui000(沉迷网络游戏)回复于 2005-01-31 12:20:56 得分 2
好象不行吧 用FLASH可以Top
18 楼AllenTing(今天你GC了吗???)回复于 2005-01-31 13:22:04 得分 2
用flash啊,很简单的,只要把flash嵌入到页面中即可Top
19 楼hedonister(冰戈)回复于 2005-01-31 14:28:51 得分 1
好帖Top
20 楼net_lover(【孟子E章】)回复于 2005-02-01 10:08:38 得分 35
JavaScript图形库
http://www.hjsv.com/games/js-paint/js-draw.htmlTop
21 楼net_lover(【孟子E章】)回复于 2005-02-01 10:09:19 得分 35
这个是
http://www.walterzorn.com/jsgraphics/jsgraphics_e.htmTop




