<![CDATA[Серый форум — HTML: пример работы с VML]]> http://forum.script-coding.com/viewtopic.php?id=1979 Sat, 19 Jul 2008 08:54:51 +0000 PunBB <![CDATA[HTML: пример работы с VML]]> http://forum.script-coding.com/viewtopic.php?pid=12717#p12717 В примере рисуется трёхмерный кубик с применением освещения. Управляется мышкой. Zoom-ить и менять цвет можно кнопками.
cube.htm

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<!-- saved from url=(0040)http://b.domaindlx.com/Xameleon/CUBE.htm -->
<HTML xmlns:v = "urn:schemas-microsoft-com:vml" xmlns:o = 
"urn:schemas-microsoft-com:office:office"><HEAD>
<META http-equiv=Content-Type content="text/html; charset=windows-1251">
<SCRIPT language=vbscript>
Dim RA,X,Y,KX,KY,TM,DRAW

Sub Document_onmousemove()
    On error resume next
    DRAW=1
    x=int(window.event.x/kx)
    y=int(window.event.y/ky)
    RA=y+90 & "," & x-90
    EXT.rotationangle=RA
End sub

Sub SC(C)
    select case C
    case "wireframe"
        EXT.render=C
        SP.color2="#ffffff"
    case else
        SP.color2="fill darken(2)"
        EXT.render="solid"
        RECT.fillcolor=C
    end select
End sub

Sub INFO
    on error resume next
    cleartimeout TM
    TM=window.settimeout("INFO",100)
    if draw then
        xb.style.width=-x/2
        yb.style.width=-y/2
        draw=false 
    End if
End sub

Sub Setup(SIZE)
    with RECT.style
    .width=SIZE & "pt"
    .height=SIZE & "pt"
    End with
    with shadow.style
    .marginleft=-size
    .width=size*3.3
    .height=size/3
    .margintop=size*2
    End with
    EXT.backdepth=SIZE
    INFO
End sub

Sub Window_onresize
    KX=-document.body.offsetwidth/180
    KY=-document.body.offsetheight/180
End sub

Sub window_onload
    On error resume next
    setup("20")
    window_onresize
End sub

Sub window_onunload
    cleartimeout TM
End sub

</SCRIPT>

<STYLE>
v\:* {
    BEHAVIOR: url(#default#VML)
}
o\:* {
    BEHAVIOR: url(#default#VML)
}
BODY {
    FONT-SIZE: 9px; FONT-FAMILY: Verdana
}
TD {
    FONT-SIZE: 9px; FONT-FAMILY: Verdana
}
INPUT {
    FONT-SIZE: 9px; FONT-FAMILY: Verdana
}
INPUT {
    BORDER-RIGHT: black 1px solid; BORDER-TOP: black 1px solid; BORDER-LEFT: black 1px solid; WIDTH: 20px; BORDER-BOTTOM: black 1px solid; HEIGHT: 16px; BACKGROUND-COLOR: #ffffff
}
</STYLE>

<META content="MSHTML 6.00.2900.2180" name=GENERATOR></HEAD>
<BODY bottomMargin=0 leftMargin=11 topMargin=0 rightMargin=11>
<TABLE height="100%" cellSpacing=0 cellPadding=2 width="100%">
  <TBODY>
  <TR>
    <TD align=middle width="100%" colSpan=2 height="100%">
    <V:RECT id=RECT style="Z-INDEX: 3; POSITION: absolute" coordsize="21600,21600"><O:EXTRUSION id="EXT" type = "perspective" on = "t" 
      lightposition2 = "0,50000" lightposition = "0,-50000" viewpoint = "0,1emu" 
      viewpointorigin = "0,0" lightlevel2 = "24000f" lightlevel = "44000f" 
      brightness = "10000f" autorotationcenter = 
      "t"></O:EXTRUSION></V:RECT><V:OVAL id="shadow" coordsize = 
      "21600,21600" stroked = "f"><V:FILL id=SP type = "gradientRadial" method = 
      "linear sigma" focussize = "0,0" focusposition = ".5,.5" color2 = 
      "fill darken(0)"></V:FILL></V:OVAL></TD></TR>
  <TR>
    <TD width="90%"></TD>
    <TD align=middle><NOBR>
      <DIV 
      style="MARGIN-TOP: -20px; MARGIN-LEFT: -31px; POSITION: absolute"><V:RECT 
      style="Z-INDEX: 1; WIDTH: 90px; POSITION: absolute; HEIGHT: 7px" coordsize 
      = "21600,21600" fillcolor = "red"><V:FILL type = "gradient" method = 
      "linear sigma" color2 = "fill darken(118)"  
      focus ="50%"></V:FILL></V:RECT><V:RECT id=xb 
      style="Z-INDEX: 2; WIDTH: 2px; POSITION: absolute; HEIGHT: 7px" coordsize 
      = "21600,21600"><V:FILL type = "gradient" method = "linear sigma" 
      color2 = "fill darken(118)"   
      focus="-50%"></V:FILL></V:RECT><BR><V:RECT 
      style="Z-INDEX: 1; WIDTH: 90px; POSITION: absolute; HEIGHT: 7px" coordsize 
      = "21600,21600" fillcolor = "red"><V:FILL type = "gradient" method = 
      "linear sigma" color2 = "fill darken(118)"  
      focus ="50%"></V:FILL></V:RECT><V:RECT id=yb 
      style="Z-INDEX: 2; WIDTH: 2px; POSITION: absolute; HEIGHT: 7px" coordsize 
      = "21600,21600"><V:FILL type = "gradient" method = "linear sigma" 
      color2 = "fill darken(118)"   
      focus="-50%"></V:FILL></V:RECT></DIV>zoom<BR>
      <INPUT onclick="setup('20')" type=button value=1x> 
<INPUT onclick="setup('40')" type=button value=2x> 
<INPUT onclick="setup('60')" type=button value=3x> 
<INPUT onclick="setup('80')" type=button value=4x> <BR>colour<BR>
<INPUT style="BACKGROUND-COLOR: #ffffff" onclick="sc('wireframe')" type=button> 
<INPUT style="BACKGROUND-COLOR: #eeeeee" onclick="sc('#ffffff')" type=button> 
<INPUT style="BACKGROUND-COLOR: #000000" onclick="sc('#888888')" type=button> 
<INPUT style="BACKGROUND-COLOR: #ff0000" onclick="sc('#ff0000')" type=button> 
      <BR><BR></NOBR></TD>
  <TR>
<TD align=right colSpan=2><B>Developed in 2004 by )(ameleon</B></TD></TR></TBODY></TABLE>
</BODY>
</HTML>

Автор примера - Xameleon.

]]> Sat, 19 Jul 2008 08:54:51 +0000 http://forum.script-coding.com/viewtopic.php?pid=12717#p12717