任意の幅を持つ2点間の矩形を描く

Question

私はユーザーがタッチスクリーン上で指をスワイプしたときに2点間の線を描こうとしています。これを行うために、前のタッチ更新のXとYと最新のタッチ更新のXとYの間のすべてのタッチ更新に四角形を描く予定です。これは、ユーザーが画面上で指をスワイプすると、連続した実線を作成するはずです。しかし、私はこの行に任意の幅を持たせたいと思います。私の質問は、どのように私は各矩形（x1、y1、x2、y2）に必要な座標を計算する必要がありますか？

- また

：誰もが、私はそれは巨大な助けになるだろう、このラインにアンチエイリアスを適用するに取り掛かることができる方法上の任意の情報を持っている場合。

Answer 1

そしてそれに垂直を計算

V.X := Point2.X - Point1.X; 
V.Y := Point2.Y - Point1.Y; 

開始点と終了点の間のベクトルを算出（単にスワップX及びY座標）

P.X := V.Y; //Use separate variable otherwise you overwrite X coordinate here 
P.Y := -V.X; //Flip the sign of either the X or Y (edit by adam.wulf) 

ノーマライズその垂直

Length = sqrt(P.X * P.X + P.Y * P.Y); //Thats length of perpendicular 
N.X = P.X/Length; 
N.Y = P.Y/Length; //Now N is normalized perpendicular 

正規化された垂線と乗算を加えて四角形を形成する4点を計算するこれら4点を用いて所望の幅

R1.X := Point1.X + N.X * Width/2; 
R1.Y := Point1.Y + N.Y * Width/2; 
R2.X := Point1.X - N.X * Width/2; 
R2.Y := Point1.Y - N.Y * Width/2; 
R3.X := Point2.X + N.X * Width/2; 
R3.Y := Point2.Y + N.Y * Width/2; 
R4.X := Point2.X - N.X * Width/2; 
R4.Y := Point2.Y - N.Y * Width/2; 

描画矩形の半分を英。

はここに絵だ：

は

EDIT：はコメントに答えるために：XとYが同じであれば、ラインが正確に対角で斜めに垂直対角線です。正規化は長さを1にする方法です。この例では、行の幅は垂線の長さに依存しません（ここでは行の長さに等しい）。

Answer 2

私が正しく理解していれば、2つの端点A（x1、y1）とB（x2、y2）があり、矩形の任意の幅はwです。私は終点が矩形の短い辺のちょうど中間にあると仮定します。最後の矩形のコーナー座標の距離がAとBにw/2になることを意味します。

行の勾配を計算できます。

S1 =（Y2 - Y1）/（X2 - X1）//×1を想定した= x2の

短辺の傾きは、S2 = -1/S1が、何もありません！。

私たちは勾配を持っています、我々は距離を持っており、我々は参照点を持っています。/（X3 - X 1 -

（Y1、Y3）：

C（X3、Y3）に近い一角について

：各コーナーポイントのための2つの方程式を導き出すことができるよりも

我々は）= S2 //傾きによって

（Y3 - Y1）^ 2 +（X3 - X1）^ 2 =（W/2）^ 2 //距離

置換（Y3で - Y1）で（x3-x1）をbで割ると

A = B * S2 //勾配方程式

// b *表S2

B^2 * S2^2 + B^2 =（W/2）^ 2 //距離によって置き換えます

B^2 =（W/2）^ 2 /（S2^2 + 1）

B = SQRTをequaiton（（W/2）^ 2 /（s2は^ 2 + 1））

wとs2を知っているので、bを計算する

Bが知られている場合は、我々はX3

×3 = B + X1

と、同様

= b *表S2

ので、Y3

Y3 =を推定することができますb * s2 + y1

私たちは1つのコーナー点C（x3、y3）を持っています。

D（X4、Y4）、勾配方程式は

（Y1 - Y4）として構成することができると言う、近いAに他のコーナー点を計算する/（X1 - X4）= S2 と計算上記のリストを適用する必要があります。

他の2つのコーナーは、ここにリストされているステップを使用して、A（x1、y1）をB（x2、y2）に置き換えて計算できます。私たちは、2つの値、x軸上のシフトとのそれぞれについて、y軸上のシフトを計算する必要が

：

Answer 3

簡単な方法（私は、「幅」、線の太さを呼ぶことにします） 4コーナー。どちらが簡単なの？

ラインの寸法は以下のとおりです。

width = x2 - x1 

height = y2 - y1 

今のxシフト（のはXS、それを呼びましょう）：

xS = (thickness * height/length of line)/2 

yS = (thickness * width/length of line)/2 

ラインの長さを確認するには、ピタゴラスの定理を使用します。

length = square_root(width * width + height * height) 

ここでは、xシフトとyシフトがあります。

First coordinate is: (x1 - xS, y1 + yS) 

Second: (x1 + xS, y1 - yS) 

Third: (x2 + xS, y2 - yS) 

Fourth: (x2 - xS, y2 + yS) 

そこに行く！ （これらの座標は反時計回りに描かれていますが、OpenGLのデフォルトです）