VML 繪圖實戰：賽車軌跡小遊戲與座標系調整心得

VML 座標系調整關鍵

網上常說調整 CoordOrigin 可移動原點，實測無效。實際發現：

• v:shape 預設無 CoordOrigin 屬性（null）。
• 座標系調整靠 CoordSize 與 style.left/top 組合：
  CoordSize="400,-400" 表示右下角座標 (400, -400)，左上角始終 (0,0) → 得到 X 向右、Y 向上的標準數學座標系。
  繪圖內容可超出 DOM 範圍顯示，不受剪裁。

賽車軌跡完整代碼

<html xmlns="https://www.w3.org/1999/xhtml"
      xmlns:v="urn:schemas-microsoft-com:vml"
      xmlns:o="urn:schemas-microsoft-com:office:office">
<head>
<title>VML 賽車軌跡</title>
<!--[if !mso]><style>v\:*{behavior:url(#default#VML)}</style><![endif]-->
<style>body{padding:0;margin:0} #line{position:absolute;left:0;top:0;z-index:3}</style>
</head>
<body>
<v:line id="line"></v:line>
<v:polyline id="pLine" filled="false" points="0,0 0,100"></v:polyline>
<v:shape coordorigin="100,100" coordsize="200,200"></v:shape>

<script>
var line = document.getElementById("line");
line.to = "0,0"; line.from = "0,0";
with(line.stroke) { Color="#FF0000"; Weight="1px"; EndArrow="Classic"; DashStyle="LongDashDot"; }

line = document.getElementById("pLine");
line.style.position = "absolute";
with(line.stroke) { Color="#000"; Weight="1px"; EndArrow="Classic"; DashStyle="Solid"; }
line.Points.value = "10,10 100,100 200,300 400,500";

var html = "10,10", direction = 0, prePoint = [10,10], step = 5;
function Move() {
    var x = step * Math.cos(direction);
    var y = step * Math.sin(direction);
    var p = prePoint;
    p[0] += x; p[1] -= y; // Y 向上
    p[0] = Math.round(p[0]); p[1] = Math.round(p[1]);
    if (p[0] >= 0 && p[1] >= 0 && step > 0) {
        prePoint = p;
        html += " " + p[0] + "," + p[1];
        line.Points.value = html;
    }
}
window.setInterval(Move, 50);

function doc_KeyDown(e) {
    e = window.event;
    if (e.keyCode == 37) direction += 0.1;      // Left
    else if (e.keyCode == 39) direction -= 0.1; // Right
    else if (e.keyCode == 38) step = Math.min(step+1, 15); // Up
    else if (e.keyCode == 40) step = Math.max(step-1, 0);  // Down
}
document.onkeydown = doc_KeyDown;
document.body.focus();
</script>
</body></html>

操作說明

• ← / →：調整方向角（每步 ±0.1 rad）。
• ↑ / ↓：調整步長（1~15 像素）。
• 軌跡即時繪製於 <v:polyline>。

延伸思考

VML 僅 IE 支援，現代專案建議改用 SVG 或 Canvas。若需跨瀏覽器相容，可開發統一繪圖元件封裝 VML/SVG 差異（如 Raphaël、D3.js 早期版本）。