本教程透過拖曳兩個控制點，即時繪製連線並動態顯示直線的「傾斜角」與「斜率」，將抽象的解析幾何概念轉化為可視、可操作的互動演示。適用於數學教學輔助、幾何算法驗證或 Flash 幾何繪圖入門練習。

效果預覽

拖動舞台上的兩個圓點（p1、p2），連線即時更新，右側動態文本同步顯示：

• 斜率 k：保留兩位小數，垂直線顯示 Infinity
• 傾斜角 α：整數度數，範圍 0°~180°

數學原理速覽

給定兩點 A(x₁,y₁)、C(x₂,y₂)：

• 斜率 k = (y₂ - y₁) / (x₂ - x₁) = tan(α)
• 當 x₂ = x₁ 時，直線垂直於 X 軸，斜率不存在，程式中以 Infinity 表示
• 傾斜角 α = arctan(k) × (180/π)，範圍 [0°, 180°)

實作步驟與完整代碼

步驟 1：建立拖曳控制點

新建兩個影片剪輯 p1、p2（圓形即可），分別加入拖曳邏輯：

// 拖曳功能
p1.addEventListener(MouseEvent.MOUSE_DOWN, startDragFunc);
p1.addEventListener(MouseEvent.MOUSE_UP, stopDragFunc);
p2.addEventListener(MouseEvent.MOUSE_DOWN, startDragFunc);
p2.addEventListener(MouseEvent.MOUSE_UP, stopDragFunc);

function startDragFunc(e:MouseEvent):void {
    e.target.startDrag();
    e.updateAfterEvent();
}
function stopDragFunc(e:MouseEvent):void {
    e.target.stopDrag();
}

步驟 2：主邏輯幀循環

新增圖層 as，在第一幀輸入：

include "Math2.as"; // 含 angleToRadian, sinD, cosD, atan2D, drawArrow 等

var A:Point = new Point();
var B:Point = new Point();
var arrow_shape:Shape = new Shape();
addChild(arrow_shape);

stage.addEventListener(Event.ENTER_FRAME, loop);

function loop(e:Event):void {
    arrow_shape.graphics.clear();
    // 繪製帶箭頭的連線
    drawArrow(arrow_shape.graphics, p1.x, p1.y, p2.x, p2.y);
    
    // 更新幾何點
    A.x = p1.x; A.y = p1.y;
    B.x = p2.x; B.y = p2.y;
    
    // 建立直線物件（內含斜率、角度計算）
    var line:Line = new Line(A, B);
    
    // 顯示結果
    k_txt.text = line.K.toFixed(2);   // 斜率
    a_txt.text = line.angle.toFixed(); // 傾斜角
}

步驟 3：Line 類別封裝幾何計算

建立 Line.as（或置於時間軸框架代碼中）：

class Line {
    public var K:Number;    // 斜率
    public var angle:Number; // 傾斜角(度)
    
    public function Line(p1:Point, p2:Point) {
        if (p1.x == p2.x) {
            K = Infinity;
            angle = 90;
        } else {
            K = (p2.y - p1.y) / (p2.x - p1.x);
            angle = atan2D(p2.y - p1.y, p2.x - p1.x); // 利用 Math2.as
            if (angle < 0) angle += 180; // 修正至 [0,180)
        }
    }
}

步驟 4：Math2.as 核心函數（含箭頭繪製）

// 角度/弧度轉換
function angleToRadian(a:Number):Number { return a * Math.PI / 180; }
function radianToAngle(r:Number):Number { return r * 180 / Math.PI; }
function sinD(a:Number):Number { return Math.sin(angleToRadian(a)); }
function cosD(a:Number):Number { return Math.cos(angleToRadian(a)); }
function atan2D(y:Number, x:Number):Number { return radianToAngle(Math.atan2(y, x)); }

// 繪製帶箭頭的線段
function drawArrow(g:Graphics, x1:Number, y1:Number, x2:Number, y2:Number):void {
    var angle:Number = Math.atan2(y2 - y1, x2 - x1);
    var len:Number = Math.sqrt((x2-x1)*(x2-x1) + (y2-y1)*(y2-y1));
    var headLen:Number = 10;
    
    g.lineStyle(2, 0xFFFFFF);
    g.moveTo(x1, y1);
    g.lineTo(x2, y2);
    
    // 箭頭兩翼
    g.moveTo(x2, y2);
    g.lineTo(x2 - headLen * Math.cos(angle - Math.PI/6), y2 - headLen * Math.sin(angle - Math.PI/6));
    g.moveTo(x2, y2);
    g.lineTo(x2 - headLen * Math.cos(angle + Math.PI/6), y2 - headLen * Math.sin(angle + Math.PI/6));
}

進階擴展方向

• 顯示直線方程式：在介面增加 y = kx + b 或 x = c 動態文本。
• 加入垂直/平行輔助線：滑鼠懸停顯示過點垂直於座標軸的虛線。
• 多點擬合：擴展為三點決定拋物線，展示二次函數係數變化。
• 觸控裝置適配：將 MOUSE_DOWN/UP 改為 TOUCH_BEGIN/END，支援平板教學。

常見錯誤與修正

錯誤現象	原因	修正
斜率顯示 NaN	兩點重疊導致分母為 0	在 Line 建構子加入 if (p1.x==p2.x && p1.y==p2.y) K=NaN 判斷
傾斜角跳躍 180°	atan2 回傳 [-180,180]，未正規化	加入 if (angle<0) angle+=180; 修正至 [0,180)
箭頭方向反向	drawArrow 參數順序顛倒	確認呼叫 drawArrow(g, p1.x, p1.y, p2.x, p2.y) 起點在前

總結

這個小專案展示了 Flash AS3 結合 Point、Graphics、ENTER_FRAME 幀循環，快速構建數學視覺化工具的典型流程。核心在於將幾何計算封裝為可複用類別（Line、Math2），並善用 Graphics 即時繪圖呈現動態結果。同樣架構可輕鬆延伸至向量運算、三角測量、物理模擬等更豐富的互動教學內容。