请教在浏览器中能否显示矢量图形,如果能,支持什么格式?谢谢回答!!!

lycity 2003-07-28 07:01:31

在Asp.net中用那个类来实现?

...全文

288 5 打赏收藏转发到动态举报

写回复

用AI写文章

5 条回复

切换为时间正序

请发表友善的回复…

发表回复

loulanlouzhu 2003-07-28

打赏
举报

SVG的也可以！下载插件！

greystar 2003-07-28

打赏
举报

</v:shape><v:shape id="_x0000_s2064" style='position:relative;left:379.5pt;
top:175.5pt;width:14.875pt;height:19pt' coordsize="237,304" path="m237,0l72,304,,207,237,,237,,237,0xe"
fillcolor="black" stroked="f">
<v:path arrowok="t"/>
</v:shape><v:shape id="_x0000_s2065" style='position:relative;left:359.75pt;
top:167.75pt;width:6.5pt;height:6.5pt' coordsize="105,105" path="m55,0l105,55,90,90,55,105,,55,17,17,55,,55,0xe"
fillcolor="black" stroked="f">
<v:path arrowok="t"/>
</v:shape><v:shape id="_x0000_s2066" style='position:relative;left:390.875pt;
top:172.125pt;width:6.5pt;height:6.5pt' coordsize="105,104" path="m55,0l105,55,90,89,55,104,,55,17,17,55,,55,0xe"
fillcolor="black" stroked="f">
<v:path arrowok="t"/>
</v:shape><v:shape id="_x0000_s2067" style='position:relative;left:274.25pt;
top:329.875pt;width:29.125pt;height:65.875pt' coordsize="468,1053" path="m261,0l0,1053,468,84,261,,261,,261,0xe"
fillcolor="black" stroked="f">
<v:path arrowok="t"/>
</v:shape><v:shape id="_x0000_s2068" style='position:relative;left:425.5pt;
top:318.25pt;width:22.5pt;height:66.5pt' coordsize="361,1064" path="m0,137l361,1064,249,,,137,,137,,137xe"
fillcolor="black" stroked="f">
<v:path arrowok="t"/>
</v:shape><v:shape id="_x0000_s2069" style='position:relative;left:265pt;
top:385.875pt;width:18.75pt;height:18.25pt' coordsize="298,293" path="m150,0l257,44,298,149,287,207,257,255,207,287,150,293,44,255,,149,11,90,44,44,91,10,150,,150,0xe"
fillcolor="black" stroked="f">
<v:path arrowok="t"/>
</v:shape><v:shape id="_x0000_s2070" style='position:relative;left:439pt;
top:374.875pt;width:17.375pt;height:17.375pt' coordsize="278,278" path="m141,0l236,40,278,141,267,194,236,238,141,278,40,238,,141,12,84,40,40,141,,141,0xe"
fillcolor="black" stroked="f">
<v:path arrowok="t"/>
</v:shape><v:shape id="_x0000_s2071" style='position:relative;left:362.375pt;
top:338.875pt;width:13.75pt;height:40.625pt' coordsize="221,651" path="m0,0l53,651,221,16,,,,,,0xe"
fillcolor="black" stroked="f">
<v:path arrowok="t"/>
</v:shape><v:shape id="_x0000_s2072" style='position:relative;left:359pt;
top:374.125pt;width:13pt;height:12.875pt' coordsize="207,207" path="m102,0l177,30,207,103,177,177,102,207,30,177,,103,30,30,102,,102,0xe"
fillcolor="black" stroked="f">
<v:path arrowok="t"/>
</v:shape><v:shape id="_x0000_s2073" style='position:relative;left:264.25pt;
top:244.25pt;width:30.625pt;height:32.875pt' coordsize="490,527" path="m490,37l347,,228,,62,92,,278,9,398,45,527,100,470,133,419,125,229,150,160,190,111,245,73,315,50,490,37,490,37xe"
fillcolor="black" stroked="f">
<v:path arrowok="t"/>
</v:shape><v:shape id="_x0000_s2074" style='position:relative;left:296.5pt;
top:270.625pt;width:32.625pt;height:31.625pt' coordsize="521,508" path="m230,94l87,101,2,175,,329,26,409,70,468,186,508,325,495,445,434,509,333,521,202,488,101,454,63,407,33,268,,327,84,384,198,399,308,376,354,331,384,211,388,158,322,165,211,190,151,230,94,230,94xe"
fillcolor="black" stroked="f">
<v:path arrowok="t"/>
</v:shape><v:shape id="_x0000_s2075" style='position:relative;left:353pt;
top:278.875pt;width:34.125pt;height:32.875pt' coordsize="546,524" path="m104,96l38,174,,269,19,363,83,441,179,499,285,524,391,509,485,444,546,321,534,176,496,115,447,64,382,24,314,,175,5,296,85,367,169,388,313,353,364,304,391,188,355,123,235,104,96,104,96xe"
fillcolor="black" stroked="f">
<v:path arrowok="t"/>
</v:shape><v:shape id="_x0000_s2076" style='position:relative;left:404.875pt;
top:266.25pt;width:31.25pt;height:30.875pt' coordsize="500,494" path="m237,93l59,141,,300,28,428,61,468,102,494,310,483,408,420,477,333,500,224,458,108,414,65,355,23,213,,367,158,397,259,384,308,346,354,270,395,209,395,131,308,135,179,173,124,237,93,237,93xe"
fillcolor="black" stroked="f">
<v:path arrowok="t"/>
</v:shape><v:shape id="_x0000_s2077" style='position:relative;left:436.25pt;
top:242.5pt;width:30.125pt;height:38pt' coordsize="481,606" path="m296,479l384,222,367,142,319,91,169,44,,38,159,,357,32,435,99,481,211,475,376,450,483,408,606,296,479,296,479xe"
fillcolor="black" stroked="f">
<v:path arrowok="t"/>
</v:shape> </v:group>
</div>
</td>
<td valign="top">
<button onclick="zoom(1)">放大 1倍</button><br>
<button onclick="zoom(2)">放大 2倍</button><br>
<button onclick="zoom(3)">放大 3倍</button><br>
<button onclick="zoom(4)">放大 4倍</button><br>
<button onclick="zoom(5)">放大 5倍</button><br>
<button onclick="zoom(6)">放大 6倍</button><br>
<button onclick="zoom(7)">放大 7倍</button><br>
<button onclick="zoom(8)">放大 8倍</button><br>
<button onclick="zoom(9)">放大 9倍</button><br>
<button onclick="zoom(10)">放大10倍</button><br>
</td>
</tr>
</table>
<br><br>
    是否感觉出来了，放大缩小对 VML 的画质没有改变？因为 VML 是矢量的。动态改变它的 coordsize 值就可以了，注意，减小值等于放大，增大值就等于缩小。可以参考下面的脚本：<br><br>
<div class="memo">
  var xx=6000;<br>
  var yy=6000;<br>
  function zoom(h)<br>
  {<br>
    group1.coordsize=<font color=red>xx/h+","+yy/h;</font><br>
  }<br>
</div>
<br>
    上面的 xx,yy 是指默认状态下的 coordsize 值。调用这个函数的时候使用 zoom(n) 其中 n 是要放大的倍数。<br>
    当VML中包含文字的时候，图形放大了，但文字不会自动放大。这样一来就很不对称了，有个技巧，就是文字都用一种标记包着，放大函数就需要改进一下了：<br>
<div class="memo">
  var xx=6000;<br>
  var yy=6000;<br>
  var fs=9;<br>
  function zoom(h)<br>
  {<br>
    group1.coordsize=<font color=red>xx/h+","+yy/h;</font><br>
    for(var i=0;i<document.all.tags("DIV").length;i++)<br>
      document.all.tags("DIV").item(i).style.fontSize=<font color=red>fs*h+"pt"</font>;<br>
  }<br>
</div><br>
    fs是默认状态下的文字大小。document.all.tags("DIV") 将返回页面上所有DIV元素，然后把他们的文字大小都变大。实践证明，放大后和VML的比例是不变的。
</div>
</td>
</tr>
<tr>
<td class="title">
<p align="right"><a href="javascript:self.scrollTo(0,0)">Top</a></p>
<a href="index.html">返回目录</a><br>
上一节:<a href="step21.html">脚本动态生成VML</a><br>
下一节:<a href="step23.html">给VML增加事件</a>
</td>
</tr>
</table>
</body>
</html>

greystar 2003-07-28

打赏
举报

see

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<title>Thinking in VML</title>
</head>
<STYLE>
v\:* { BEHAVIOR: url(#default#VML) }
</STYLE>
<LINK REL="stylesheet" TYPE="text/css" HREF="style.css" />
<script>
var xx=6000;
var yy=6000;
function zoom(h)
{
group1.coordsize=xx/h+","+yy/h;
group1.title="现在是"+h+"倍图";
}
var dragapproved=false;
var x=y=0;
function move()
{
if(event.button==1 && dragapproved){
var sx=group1.style.posLeft+event.clientX-x;
var sy=group1.style.posTop +event.clientY-y;
x=event.clientX;
y=event.clientY;
group1.style.posLeft=sx;
group1.style.posTop =sy;
}
return false
}
function drags()
{
if(event.button!=1) return
dragapproved=true;
x=event.clientX;
y=event.clientY;
document.onmousemove=move;
}
documentonselectstart=new Function("self.event.returnValue=false");
document.onmousedown=drags;
</script>
<body>
<table align="center">
<tr>
<td align="center" class="title"><strong>放大缩小VML</strong></td>
</tr>
<tr>
<td >
<div class="memo" style="width:700;line-height:23px">
由于VML是矢量的，放大缩小变得很容易了。我们先看一个例子，看看VML能做到什么程度。还是以前面的一个飞碟做为例子。它是用线、圆、弧等形状拼凑起来的一个图形。我增加了移动事件，当放大太多了，可以拖动图片查看。<br><br>
<table>
<tr>
<td>
<div id="oDIV" style="postition:relative;width:600;height:500;overflow:scroll" class=memo>
<v:group id="group1" style='position:relative;width:50;height:50;top:200;left:250' coordorigin="0,0" coordsize="6000,6000">
<v:shape id="_x0000_s2051"
style='position:relative;left:234.75pt;top:208.875pt;width:235.25pt;height:128.875pt'
coordsize="3765,2060" path="m1285,251l1126,469,580,1009,,1285,25,1412,93,1547,194,1673,1017,2026,2312,2060,3209,1756,3765,1388,3278,680,3059,319,2976,,1285,251,1285,251xe"
fillcolor="#bcbcd6" stroked="f">
<v:path arrowok="t"/>
</v:shape><v:shape id="_x0000_s2052" style='position:relative;left:314.625pt;
top:140.5pt;width:104pt;height:102pt' coordsize="1663,1633" path="m0,1355l177,1498,353,1582,840,1633,1378,1498,1663,1295,1545,456,1260,10,1025,,656,260,253,874,,1355,,1355xe"
fillcolor="#99ebff" stroked="f">
<v:path arrowok="t"/>
</v:shape><v:shape id="_x0000_s2053" style='position:relative;left:436.875pt;
top:243pt;width:25.875pt;height:30.5pt' coordsize="415,489" path="m0,25l186,,415,101,388,489,,25,,25xe"
fillcolor="#fff27f" stroked="f">
<v:path arrowok="t"/>
</v:shape><v:shape id="_x0000_s2054" style='position:relative;left:408.625pt;
top:268.75pt;width:24.25pt;height:27.375pt' coordsize="388,437" path="m209,0l34,101,,302,125,437,329,327,388,152,209,,209,0xe"
fillcolor="#fff27f" stroked="f">
<v:path arrowok="t"/>
</v:shape><v:shape id="_x0000_s2055" style='position:relative;left:356.625pt;
top:279.25pt;width:28.875pt;height:30pt' coordsize="462,479" path="m135,0l0,186,59,422,344,479,462,228,135,,135,0xe"
fillcolor="#fff27f" stroked="f">
<v:path arrowok="t"/>
</v:shape><v:shape id="_x0000_s2056" style='position:relative;left:302.625pt;
top:274pt;width:23pt;height:23.625pt' coordsize="369,378" path="m0,59l226,,369,186,243,378,32,363,,59,,59xe"
fillcolor="#fff27f" stroked="f">
<v:path arrowok="t"/>
</v:shape><v:shape id="_x0000_s2057" style='position:relative;left:266.25pt;
top:245.125pt;width:32.125pt;height:28.375pt' coordsize="513,454" path="m34,454l0,211,110,34,302,,513,34,34,454,34,454xe"
fillcolor="#fff27f" stroked="f">
<v:path arrowok="t"/>
</v:shape><v:shape id="_x0000_s2058" style='position:relative;left:234.75pt;
top:230.375pt;width:77pt;height:65pt' coordsize="1232,1040" path="m0,926l162,844,321,751,479,652,557,597,635,542,711,481,787,420,863,355,937,291,1086,150,1160,76,1232,,1152,122,1095,209,1027,306,951,411,867,521,780,631,686,734,593,831,498,912,403,979,312,1026,141,1040,,926,,926xe"
fillcolor="black" stroked="f">
<v:path arrowok="t"/>
</v:shape><v:shape id="_x0000_s2059" style='position:relative;left:245pt;
top:225.875pt;width:237.875pt;height:121.125pt' coordsize="3806,1937" path="m0,1372l100,1452,203,1526,313,1593,424,1655,539,1710,659,1762,906,1844,1159,1901,1422,1935,1952,1937,2479,1847,2734,1773,2977,1674,3095,1617,3209,1555,3319,1488,3426,1414,3528,1338,3625,1252,3719,1167,3806,1074,3663,937,3528,804,3405,669,3285,536,3171,401,3064,268,2962,133,2863,,2918,139,2979,277,3044,412,3114,545,3188,678,3270,808,3355,935,3449,1060,3369,1131,3285,1195,3201,1258,3114,1313,3025,1368,2931,1416,2741,1503,2543,1574,2334,1627,1901,1690,1446,1693,975,1642,490,1534,247,1460,,1372,,1372xe"
fillcolor="black" stroked="f">
<v:path arrowok="t"/>
</v:shape><v:shape id="_x0000_s2060" style='position:relative;left:314.375pt;
top:134.125pt;width:109.75pt;height:111.625pt' coordsize="1757,1787" path="m220,1624l283,1667,357,1705,528,1762,941,1787,1376,1666,1578,1544,1757,1375,1722,1069,1677,799,1620,567,1553,371,1513,289,1473,217,1430,154,1384,103,1337,61,1285,29,1177,,932,76,797,183,652,339,578,434,502,542,422,662,342,795,258,941,175,1099,87,1272,,1458,80,1316,156,1183,234,1057,308,939,378,829,451,728,521,635,587,552,654,476,717,409,781,352,840,303,956,232,1065,198,1255,248,1413,455,1534,833,1620,1384,1451,1460,1279,1525,1110,1576,935,1612,582,1647,220,1624,220,1624xe"
fillcolor="black" stroked="f">
<v:path arrowok="t"/>
</v:shape><v:shape id="_x0000_s2061" style='position:relative;left:367pt;
top:184.125pt;width:22.125pt;height:26pt' coordsize="354,416" path="m179,0l302,60,354,207,341,289,302,355,247,399,179,416,53,355,,207,13,127,53,60,109,17,179,,179,0xe"
fillcolor="black" stroked="f">
<v:path arrowok="t"/>
</v:shape><v:shape id="_x0000_s2062" style='position:relative;left:357.25pt;
top:206.125pt;width:38.25pt;height:35.125pt' coordsize="612,563" path="m0,563l55,346,128,175,169,111,211,59,301,,390,2,476,71,612,432,460,502,308,542,,563,,563xe"
fillcolor="black" stroked="f">
<v:path arrowok="t"/>
</v:shape><v:shape id="_x0000_s2063" style='position:relative;left:363.25pt;
top:171.125pt;width:12.125pt;height:24.125pt' coordsize="194,386" path="m0,0l124,386,194,291,,,,,,0xe"
fillcolor="black" stroked="f">
<v:path arrowok="t"/>

greystar 2003-07-28

打赏
举报

vml
和HTML一样的写法。也可用脚本来控制对象
see

<html xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<title>台风路径</title>
<STYLE>
v\:* {
BEHAVIOR: url(#default#VML)
}
</STYLE>
<link rel="stylesheet" type="text/css" href="lib/style/style.css">
<script language="JavaScript">
var xx=1000;
var yy=680;
function zoom(h)
{
group1.coordsize=xx/h+","+yy/h;
}
function drawLines()
{
var count=0;//画横坐标
for(var i=0;i<=25;i++){
var px=40*i;
var newLine = document.createElement("<v:line strokecolor='#babbae' from='"+px+" 0' to='"+px+" 680' style='position:absolute;z-index:4'></v:line>");
group1.insertBefore(newLine);
count++;
}
count=0; //画纵坐标
for(var i=0;i<=17;i++){
var py=40*count;
var newLine = document.createElement("<v:line strokecolor='#babbae' from='0 "+py+"' to='1000 "+py+"' style='position:absolute;z-index:4'></v:line>");
group1.insertBefore(newLine);
count++;
}
}
var dragapproved=false;
var x=y=0;
function move()
{
if(event.button==1 && dragapproved){
var sx=event.clientX-x;
var sy=event.clientY-y;
x=event.clientX;
y=event.clientY;
self.scrollBy(-sx,-sy);
}
return false
}
function drags()
{
if(event.button!=1) return
dragapproved=true;
x=event.clientX;
y=event.clientY;
document.onmousemove=move;
}
document.onselectstart=new Function("self.event.returnValue=false");
document.onmousedown=drags;
</script>

</head>

<body leftmargin=0 topmargin=0 scroll=auto bgcolor="#9CF7F7" onload="drawLines();zoom(1)">
<DIV id="oBody" align="center" style="position:absolute;left:-1;top:-1">
<v:group ID="group1" style="WIDTH:1000px;HEIGHT:680px;" coordsize = "1000,680">

<v:polyline strokecolor="#CED384" fillcolor="#CED384" style="POSITION:absolute;z-index:5" points=" 0,426 8,430 16,428 19,424 22,420 20,416 15,414 16,408 9,400 11,396 24,396 40,384 48,381 56,376 64,379 70,374 66,368 72,368 70,370 80,370 88,368 92,370 96,368 104,368 112,363 116,354 120,362 128,358 130,352 136,352 140,352 140,344 142,336 144,330 148,330 152,336 160,349 168,348 172,340 176,341 180,342 184,340 188,332 190,340 192,336 196,332 200,332 204,332 208,328 212,332 216,336 220,334 224,324 228,328 232,332 236,330 240,328 256,322 260,318 266,305 270,304 276,296 288,296 300,286 304,290 320,276 328,276 348,256 346,250 352,248 360,244 362,240 358,236 364,232 366,218 372,210 370,226 376,222 382,226 384,218 380,220 386,202 384,200 396,188 390,180 388,176 396,172 400,178 410,160 414,160 426,144 424,140 430,130 434,120 440,120 448,112 450,116 464,110 467,107 464,104 460,92 468,88 468,80 464,76 462,69 476,76 480,75 476,64 480,60 479,54 472,56 484,46 484,44 468,40 460,28 448,28 444,28 432,35 428,35 424,28 416,28 418,24 428,24 432,26 428,24 440,19 468,5 472,5 476,4 474,0 0,0 0,426">
<v:shadow on="t" type="single" color="#b3b3b3" offset="2pt,3pt"></v:shadow>
</v:polyline>

<v:polyline strokecolor="#CED384" fillcolor="#CED384" style="POSITION:absolute;z-index:5" points=" 430,368 426,360 420,344 416,340 404,320 406,300 416,280 426,260 436,256 446,240 460,232 472,234 476,240 472,260 465,280 462,320 440,340 435,360 430,368">
<v:shadow on="t" type="single" color="#b3b3b3" offset="2pt,3pt"></v:shadow>
</v:polyline>

<v:polyline strokecolor="#CED384" fillcolor="#CED384" style="POSITION:absolute;z-index:5" points=" 432,680 424,676 420,668 424,664 432,660 424,648 420,648 416,660 412,660 408,640 396,600 398,592 400,592 410,596 416,560 420,520 428,504 440,500 448,496 480,508 488,504 492,512 488,520 484,536 496,560 494,576 488,592 480,596 470,600 464,608 460,616 456,624 464,640 468,660 472,680 432,680">
<v:shadow on="t" type="single" color="#b3b3b3" offset="2pt,3pt"></v:shadow>
</v:polyline>

<v:polyline strokecolor="#CED384" fillcolor="#CED384" style="POSITION:absolute;z-index:5" points=" 710,190 712,182 716,180 714,172 720,174 730,164 734,172 716,180 718,184 710,190">
<v:shadow on="t" type="single" color="#b3b3b3" offset="2pt,3pt"></v:shadow>
</v:polyline>

coolmars 2003-07-28