1

私は Web アプリケーションを開発しています。基本的には、Illustrator/Flash のシンプルなバージョンです。そのため、サッカーのトレーナーは計画を立てることができます。
Photoshop のようなさまざまなツール (線ツール、長方形ツールなど) を作成しました。これらはすべて機能します。

ただし、ユーザーが二重の平行線を描画できるツールを開発する必要があります。これらの 2 行間の距離を variable で定義できるようにしたいと考えています。ステージ上の任意の 2 点間に 2 本の平行線を引く必要があります。Photoshop/Illustrator の線ツールに似ていますが、一度に 2 つの線を描画します。

基本的には次のように動作するはずです
。1) マウス ダウン:
新しいグラフィックス オブジェクトを作成し、ユーザーがクリックした X と Y を登録します。Mouse Move のリッスンを開始します。

2) マウスの移動時:
グラフィックス オブジェクトをクリアし、元のマウス位置から現在のマウス位置まで二重線を描画します。マウスを動かすたびに再描画します。

3) マウスアップ時:
イベントのリッスンを停止し、ステージに二重線を追加します。

これは1本の線を描くのに完全に機能しましたが、2本の平行線に問題があります. それらは互いに平行に保たれないか、回転が適切に機能しません。

4

1 に答える 1

2

この方法でポイントをプロットする必要があります。

90 degrees (UP from the START point)        90 degrees (UP from the END point)
|                                                                            |
START- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - END
|                                                                            |
90 degrees (DOWN from the START point)    90 degrees (DOWN from the END point)

これらの 6 つのポイント (トップラインに 2 つ、マウスの始点と終点に 2 つ、ボトムラインに 2 つ) を決定したら、トップラインとボトムラインのポイントのペアをこれを与える lineTo(...) コマンド：

------------------------------------------------------------------------------

START                                                                      END

------------------------------------------------------------------------------

START ポイントと END ポイントによって形成される現在の角度を知るには、ポイントの X 値と Y 値のデルタ (2 つの値の差) が必要です。

したがって、X2 - X1 = DeltaX、およびY2 - Y1 = DeltaYです。

次に、それらのデルタを に入れMath.atan2(y:Number, x:Number):Numberます。返される値はラジアンであると私は信じているので、度を扱うには、結果に180 / Math.PIを掛けて変換を行うことができます。

ただし、残りの計算をラジアンで再開できるため、これは実際には必要ありません。上記の値 (180/Math.PI) を変数に格納すると便利です。

ラジアンを続ける場合は、90 度をラジアンに変換することが重要です。

  • 90/radiansは、一番上の行を解決するために START および END ポイントからオフセットする数値を与えます。
  • -90/radiansは、最終的な結果を求めるために START および END ポイントからオフセットする数値を示します。

言い換えると...

これは私がすぐにテストしたソリューション全体です。100% 機能しない場合は申し訳ありません。

var startPoint:Point = new Point(10, 0); //Replace by start-mouse location
var endPoint:Point = new Point(20, 0); //Replace by end-mouse location

var mouseAngle:Number = Math.atan2( endPoint.y - startPoint.y, endPoint.x - startPoint.x );

var angle:Number;
var lineHalfGap:Number = 100 * .5; //Replace 100 by your seperation value
var radians:Number = 180 / Math.PI;
angle = 90 / radians + mouseAngle;
var topOffsetX:Number = Math.cos( angle ) * lineHalfGap;
var topOffsetY:Number = Math.sin( angle ) * lineHalfGap;
angle = -90 / radians + mouseAngle;
var bottomOffsetX:Number = Math.cos( angle ) * lineHalfGap;
var bottomOffsetY:Number = Math.sin( angle ) * lineHalfGap;

var topStart:Point = new Point(startPoint.x + topOffsetX, startPoint.y + topOffsetY);
var topEnd:Point = new Point(endPoint.x + topOffsetX, endPoint.y + topOffsetY);

var bottomStart:Point = new Point(startPoint.x + bottomOffsetX, startPoint.y + bottomOffsetY);
var bottomEnd:Point = new Point(endPoint.x + bottomOffsetX, endPoint.y + bottomOffsetY);

trace(topStart, topEnd, bottomStart, bottomEnd);

明らかに、独自のものに置き換えたり置き換えたりする必要がある変数がいくつかあります (マウスの位置やラインギャップの分離値など) が、これでうまくいくはずです。

実行例は次の場所にあります。

http://pierrechamberlain.ca/blog/2012/08/math-101-parallel-lines-two-points/

于 2012-08-03T13:44:46.267 に答える