使用線斜率在線的終點繪製箭頭

Question

我正在開發一個白板應用程序，允許用戶使用箭頭繪製線（有些像帶有箭頭功能的Microsoft Word線）。我正在使用圖形屬性和lineTo（）方法來繪製一條線。現在我必須在最後一點畫一個角度箭頭。我通過連接最後點的點來繪製箭頭。由於360線可以穿過這一點，每條線可以有不同的箭頭角度。請告訴我在最後一點計算這些點的方法。

Answer 1

我一直在做自己的東西，我需要它看起來不僅僅是一個三角形更好一點，並使用相對廉價的計算（如幾個電話以儘可能的其他功能，如數學三角）。那就是：

public static function DrawArrow(ax:int, ay:int, bx:int, by:int):void 
{ 
    // a is beginning, b is the arrow tip. 

    var abx:int, aby:int, ab:int, cx:Number, cy:Number, dx:Number, dy:Number, ex:Number, ey:Number, fx:Number, fy:Number; 
    var size:Number = 8, ratio:Number = 2, fullness1:Number = 2, fullness2:Number = 3; // these can be adjusted as needed 

    abx = bx - ax; 
    aby = by - ay; 
    ab = Math.sqrt(abx * abx + aby * aby); 

    cx = bx - size * abx/ab; 
    cy = by - size * aby/ab; 
    dx = cx + (by - cy)/ratio; 
    dy = cy + (cx - bx)/ratio; 
    ex = cx - (by - cy)/ratio; 
    ey = cy - (cx - bx)/ratio; 
    fx = (fullness1 * cx + bx)/fullness2; 
    fy = (fullness1 * cy + by)/fullness2; 

    // draw lines and apply fill: a -> b -> d -> f -> e -> b 
    // replace "sprite" with the name of your sprite 
    sprite.graphics.clear(); 
    sprite.graphics.beginFill(0xffffff); 
    sprite.graphics.lineStyle(1, 0xffffff); 
    sprite.graphics.moveTo(ax, ay); 
    sprite.graphics.lineTo(bx, by); 
    sprite.graphics.lineTo(dx, dy); 
    sprite.graphics.lineTo(fx, fy); 
    sprite.graphics.lineTo(ex, ey); 
    sprite.graphics.lineTo(bx, by); 
    sprite.graphics.endFill(); 
} 

您還可以添加線條顏色和厚度參數列表，也許使它擴展雪碧的成員函數，和你有一個相當不錯的，通用的功能:)你可以也玩一些數字來獲得不同的形狀和大小（豐滿度的小變化導致瘋狂的外觀變化，所以小心:)）。只要小心不要將比例或豐滿度2設置爲零！

Answer 2

如果您存儲了該行的起點和終點，添加箭頭應該相對簡單。如果從起點座標中減去終點座標，則會得到箭頭方向矢量（我們稱之爲D）。使用此矢量，可以確定兩點之間的線上的任何點。

因此，要繪製箭頭，您需要確定一個點（P1），該點與終點具有特定距離（d1），確定一條穿過它的直線，並垂直於D.最後得到與先前確定的點具有距離（d2）的點（P2）。然後，您可以確定與P2對稱的點，相對於D.

因此，您將有一個箭頭頭d1的長度和一個2 * d2的基數。

一些額外的信息，在這裏的幾個代碼示例：http://forums.devx.com/archive/index.php/t-74981.html