在任意宽度的两个点之间绘制矩形

Question

当用户在触摸屏上滑动手指时,我试图在两个(2D)点之间画一条线.为此,我计划在上一次触摸更新的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个点

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;

使用这4个点绘制矩形.

这是图片:

编辑:回答评论:如果X和Y相同,那么线是正确的对角线,垂直于对角线是对角线.标准化是一种使长度等于1的方法,因此本例中线条的宽度不依赖于垂线长度(这里等于线条长度).

Answer 2

简单的方法(我称之为"宽度"线的粗细):

我们需要计算2个值,x轴上的偏移和y轴上的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的默认值)