Vẽ hình chữ nhật giữa hai điểm với chiều rộng tùy ý

Question

Tôi đang cố gắng vẽ một đường thẳng giữa hai điểm (2D) khi người dùng vuốt ngón tay trên màn hình cảm ứng. Để làm điều này, tôi có kế hoạch vẽ một hình chữ nhật trên mỗi lần cập nhật liên lạc giữa X và Y của bản cập nhật liên lạc trước đó và X và Y của bản cập nhật cảm ứng mới nhất. Điều này sẽ tạo ra một dòng liên tục và vững chắc khi người dùng vuốt ngón tay của họ trên màn hình. Tuy nhiên, tôi cũng muốn dòng này có chiều rộng tùy ý. Câu hỏi của tôi là, làm thế nào tôi nên đi về tính toán các tọa độ tôi cần cho mỗi hình chữ nhật (x1, y1, x2, y2)?

-

Ngoài ra: nếu có ai có bất kỳ thông tin về làm thế nào tôi sau đó có thể bắt đầu áp dụng anti-aliasing để dòng này nó sẽ là một trợ giúp lớn.

Answer 1

Tính một vectơ giữa bắt đầu và điểm kết thúc

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

Sau đó tính toán một vuông góc với nó (chỉ cần trao đổi X và Y tọa độ)

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) 

Normalize rằng vuông góc

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 

Tính 4 điểm tạo thành một hình chữ nhật bằng cách thêm bình thường hóa vuông góc và nhân ying nó bằng một nửa chiều rộng mong muốn

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; 

Vẽ hình chữ nhật bằng cách sử dụng 4 điểm này.

Dưới đây là hình ảnh:

EDIT: Để trả lời các ý kiến: Nếu X và Y đều giống nhau thì dòng chính là đường chéo và vuông góc với một đường chéo là đường chéo. Bình thường hóa là một phương pháp tạo độ dài bằng 1, sao cho chiều rộng của đường thẳng trong ví dụ này sẽ không phụ thuộc vào chiều dài perpendiculars (bằng chiều dài dòng ở đây).

Answer 2

Nếu tôi hiểu chính xác, bạn có hai điểm kết thúc là A (x1, y1) và B (x2, y2) và chiều rộng tùy ý cho hình chữ nhật nói w. Tôi cho rằng điểm cuối sẽ chỉ ở giữa các cạnh ngắn hơn của hình chữ nhật có nghĩa là khoảng cách của các tọa độ góc hình chữ nhật cuối cùng sẽ là w/2 đến A và B.

Bạn có thể tính toán độ dốc của đường;

s1 = (y2 - y1) /! (X2 - x1) // giả sử x1 = x2

Độ dốc của bên ngắn hơn là không có gì nhưng s2 = -1/s1.

Chúng tôi có độ dốc, chúng tôi có khoảng cách và chúng tôi có các điểm tham chiếu.

Chúng tôi hơn có thể lấy được hai phương trình cho mỗi điểm góc:

Đối với một góc gần gũi hơn với Một

C (x3, y3):

(y3 - y1)/(x3 - x1) = s2 // bởi độ dốc

(y3 - y1)^2 + (x3 - x1)^2 = (w/2)^2 // theo khoảng cách

thay thế (y3 - y1) bởi một và (x3 - x1) bởi b sản lượng

a = b * s2 // dốc phương trình

// thay thế một bằng b * s2

b^2 * s2^2 + b^2 = (w/2)^2 // khoảng cách equaiton

b^2 = (w/2)^2/(s2^2 + 1)

b = sqrt ((w/2)^2/(s2^2 + 1))

chúng tôi biết w và s2 và do đó tính toán b

Nếu b được biết đến, chúng ta có thể suy ra x3

x3 = b + x1

và cũng

a = b * s2

và do đó y3

y3 = b * s2 + y1

chúng tôi có một điểm góc C (x3, y3).

Để tính toán các điểm góc khác gần gũi hơn với A, nói D (x4, y4), phương trình dốc có thể được xây dựng như

(y1 - y4)/(x1 - x4) = s2 và các tính toán được liệt kê ở trên nên được áp dụng.

Hai góc khác có thể được tính toán với các bước được liệt kê ở đây thay thế A (x1, y1) bằng B (x2, y2).

Answer 3

Cách dễ dàng (tôi sẽ gọi "width" độ dày của dòng):

Chúng tôi cần phải tính toán 2 giá trị, sự thay đổi trên trục x và sự thay đổi trên trục y cho mỗi 4 góc. Đó là đủ dễ dàng.

Các kích thước của dòng là:

width = x2 - x1 

height = y2 - y1 

Bây giờ x ca (chúng ta hãy gọi nó XS):

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

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

Để tìm độ dài của dòng, sử dụng định lý Pythagoras:

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

Bây giờ bạn có thay đổi x và y.

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

Second: (x1 + xS, y1 - yS) 

Third: (x2 + xS, y2 - yS) 

Fourth: (x2 - xS, y2 + yS) 

Và ở đó bạn đi! (Những tọa độ đó được vẽ ngược chiều kim đồng hồ, mặc định cho OpenGL)