使用线斜率在线的终点绘制箭头

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