2012-01-09 22 views
1

私は矢印の線で線を引くことができるホワイトボードアプリケーションを開発しています。私はlineTo()メソッドと一緒にグラフィックスプロパティを使用して線を描画しています。今私は線の最後の点に角の矢印を描く必要があります。最後の点を中心に点を結んで矢印を描いています。 360線はこの点を通過することができ、各線は異なる角度の矢印を持つことができる。最後の点を中心にこれらの点を計算する方法を提案してください。線の勾配を使用して線の終点に矢印を描く

答えて

2

私は何かを自分で行ってきた、と私はちょうど三角形よりも少し見た目が良く、かつ比較的安価な計算を使用するためにそれを必要な(数コールなどMath三角法のような可能な限り他の関数へ)。ここでは、次のとおりです。

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をゼロに設定しないように注意してください。

0

ラインの開始点と終了点を保存する場合、矢印の頭を追加するのは比較的簡単です。始点座標から終点座標を引くと、矢印方向のベクトルが得られます(Dと呼ぶ)。このベクトルを使用して、2つの点の間の線上の任意の点を決定できます。

したがって、矢印の頭を描くには、セグメント上の特定の距離(d1)を持つ点(P1)を終点から決定し、その点を通過する線を決定する必要があります最後に決定された点から距離(d2)を有する点(P2)を得る。次に、P2と対称な点をDに対して決定することができます。

したがって、矢印の長さはd1、底辺の長さは2 * d2になります。

いくつかの追加情報と、ここでいくつかのコード例:http://forums.devx.com/archive/index.php/t-74981.html

+0

romiと同じですがコードがあります。あなたの矢印のディレクトリを取得する 'var dir:Point = new point(end.x - start.x、end.y - start.y);' – divillysausages

+0

right normal: 'var normalR:Point = new Point(-dir.y 、dir.x); – divillysausages

+0

normal: 'var normalL:Point = new Point(dir.y、-dir.x);' – divillysausages