CODEWITHSUNDEEP
actionscript-3
Govind Singh
Govind Singh

Reputation: 68

Drawing an arrow at the end point of the line using line slope

I am developing a white board application which allows the user to draw line with arrow head (some like Microsoft Word line with arrow feature). I am using graphics property along with lineTo() method to draw a line. Now i have to draw a angular arrow on the last point of line. I am drawing the arrow by connecting the points around last points. As 360 line can pass through this point and each line can have a different angle of arrow. Please suggest me the way to calculating these point around the last point.

Upvotes: 2

Views: 2627

Answers (2)

mtosic
mtosic

Reputation: 156

I've been doing something myself, and I needed it to look a bit nicer than just a triangle, and use relatively inexpensive calculations (as few calls to other functions as possible, like Math trigonometry). Here it is:

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();
}

You can also add the line color and thickness to the argument list, and maybe make it a member function of an extended Sprite, and you have a pretty nice, versatile function :) You can also play a bit with the numbers to get different shapes and sizes (small changes of fullness cause crazy changes in look, so careful :)). Just be careful not to set ratio or fullness2 to zero!

Upvotes: 3

Romi Halasz
Romi Halasz

Reputation: 2009

If you store the start and end point of the line, adding the arrow head should be relatively simple. If you subtract the end point coordinates from the start point coordinates, you will get the arrow direction vector (let's call it D). With this vector, you can determine any point on the line between the two points.

So, to draw the arrow head, you would need to determine a point (P1) on the segment that has a specific distance (d1) from the end point, determine a line that passes through it, and is perpendicular to D. And finally get a point (P2) that has a distance (d2) from the previously determined point. You can then determine the point that is symmetrical to P2, relative to D.

You will thus have an arrow head the length of d1 and a base with of 2 * d2.

Some additional information and a few code examples here: http://forums.devx.com/archive/index.php/t-74981.html

Upvotes: 0

Related Questions