通过键盘控制SHAPE的形态

最新推荐文章于 2022-12-30 09:33:14 发布

原创最新推荐文章于 2022-12-30 09:33:14 发布 · 817 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#behavior #path #function #url #table #html

本文介绍了一个使用VML技术实现的图形编辑器，通过键盘操作可以调整图形的位置、大小、坐标尺寸等属性，并能修改填充颜色。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<html xmlns:v="urn:schemas-microsoft-com:vml">
<script language=javascript>var GWELCOLE=1900+64;</script>
<head>
<meta http-equiv=Content-Type content="text/html; charset=gb2312">
<style>
v/:* {behavior:url(#default#VML);}
o/:* {behavior:url(#default#VML);}
x/:* {behavior:url(#default#VML);}
.shape {behavior:url(#default#VML);}

* {color:#229; font-size:12;}
table {position:absolute;top:180;}
th {background:#AAF}
td {background:#AFA}
</style>
</head>

<body topmargin="0">
1:49
q:81
shape coordsize;按下对应的键会改变其形状或颜色, Gu Laicheng, 2008.1.22<br/>
角度:2^32*1=65536=1度 5898240=90度 11796480=180度<br/>
<span id=msg></span><br/>
<table>
<tr><th>+</th><th>-</th><th>Item</th></tr>
<tr><td>1</td><td>q</td><td>Left</td></tr>
<tr><td>2</td><td>w</td><td>Top</td></tr>
<tr><td>3</td><td>e</td><td>Width</td></tr>
<tr><td>4</td><td>r</td><td>Height</td></tr>
<tr><td>5</td><td>t</td><td>Coordsize-x</td></tr>
<tr><td>6</td><td>y</td><td>Coordsize-y</td></tr>
<tr><td>7</td><td>u</td><td>Moveto-x</td></tr>
<tr><td>8</td><td>i</td><td>Moveto-y</td></tr>
<tr><td>9</td><td>o</td><td>Center-x</td></tr>
<tr><td>0</td><td>p</td><td>Center-y</td></tr>
<tr><td>s</td><td>x</td><td>Radus-x</td></tr>
<tr><td>d</td><td>c</td><td>Radus-y</td></tr>
<tr><td>f</td><td>v</td><td>Start-Angle</td></tr>
<tr><td>g</td><td>b</td><td>End-Angle</td></tr>
<tr><td>h</td><td>n</td><td>Fill-color1</td></tr>
<tr><td>j</td><td>m</td><td>Fill-color2</td></tr>
</table>
<v:shape id=GLC style="POSITION:absolute;LEFT:150;TOP:170;WIDTH:100;HEIGHT:100;Z-INDEX:1;"
coordsize="10800,10800" title="11796480" fillcolor="#d1ffd1"
strokecolor="black" path="m21600,21600 ae21600,21600,10800,10800,0,11796480 x e" adj="0,,0">
<v:fill rotate = "t" type = "gradient" color2 = "#5667FE" focus = "100%"></v:fill>
<v:stroke joinstyle = "round"></v:stroke>
<v:formulas></v:formulas>
<v:path o:connecttype = "segments"></v:path>
</v:shape>
</body>
<script>

document.onkeydown=function()
{
// alert("A:"+event.keyCode);
switch (event.keyCode)
{
case 49: //1
  GLC.style.left=parseInt(GLC.style.left)+1;break;
case 81:
  GLC.style.left=parseInt(GLC.style.left)-1;break;
case 50: //2
  GLC.style.top=parseInt(GLC.style.top)+1;break;
case 87:
  GLC.style.top=parseInt(GLC.style.top)-1;break;
case 51: //3
  GLC.style.width=parseInt(GLC.style.width)+1;break;
case 69:
  GLC.style.width=parseInt(GLC.style.width)-1;break;
case 52: //4
  GLC.style.height=parseInt(GLC.style.height)+1;break;
case 82:
  GLC.style.height=parseInt(GLC.style.height)-1;break;
case 53: //5
  GLC.Coordsize=updstr(GLC.coordsize,0,"+",1000);break;
case 84: //t
  GLC.Coordsize=updstr(GLC.coordsize,0,"-",1000);break;
case 54: //6
  GLC.Coordsize=updstr(GLC.coordsize,1,"+",1000);break;
case 89:
  GLC.Coordsize=updstr(GLC.coordsize,1,"-",1000);break;

case 55: //7
GLC.path=updstr(GLC.path,0,"+",1000);break;
case 85:
GLC.path=updstr(GLC.path,0,"-",1000);break;

case 56: //8
  GLC.path=updstr(GLC.path,1,"+",1000);break;
case 73:
  GLC.path=updstr(GLC.path,1,"-",1000);break;
case 57: //9
  GLC.path=updstr(GLC.path,2,"+",1000);break;
case 79:
  GLC.path=updstr(GLC.path,2,"-",1000);break;
case 48: //0
  GLC.path=updstr(GLC.path,3,"+",1000);break;
case 80:
  GLC.path=updstr(GLC.path,3,"-",1000);break;

case 83:
  GLC.path=updstr(GLC.path,4,"+",1000);break;
case 88:
  GLC.path=updstr(GLC.path,4,"-",1000);break;
case 68:
  GLC.path=updstr(GLC.path,5,"+",1000);break;
case 67:
  GLC.path=updstr(GLC.path,5,"-",1000);break;

case 70:
  GLC.path=updstr(GLC.path,6,"+",65536);break;
case 86:
  GLC.path=updstr(GLC.path,6,"-",65536);break;
case 71:
  GLC.path=updstr(GLC.path,7,"+",65536);break;
case 66:
  GLC.path=updstr(GLC.path,7,"-",65536);break;

GLC.style.left=parseInt(GLC.style.left)+1;break;

case 72:
  GLC.fill.color ="#"+(parseInt(GLC.fill.color.value.substring(1,7),16)+256*16).toString(16);break;
case 78:
  GLC.fill.color ="#"+(parseInt(GLC.fill.color.value.substring(1,7),16)-256*16).toString(16);break;
case 74:
  GLC.fill.color2="#"+(parseInt(GLC.fill.color2.value.substring(1,7),16)+256*16).toString(16);break;
case 77:
  GLC.fill.color2="#"+(parseInt(GLC.fill.color2.value.substring(1,7),16)-256*16).toString(16);break;

}
msg.innerText = "style.cssText:"+GLC.style.cssText+"/ncoordsize:"+GLC.coordsize+
  "/n path:"+GLC.path+
  "/n fillcolor1:"+GLC.fill.color+
  "/n fillcolor2:"+GLC.fill.color2;

}
</script>
</html>