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

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

简单方法（我称之为＆＃34;宽度＆＃34;线条的粗细）：

我们需要为4个角中的每个角计算2个值，x轴上的偏移和y轴上的偏移。这很容易。

该行的尺寸为：

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的默认值）

Answer 3

如果我理解正确，你有两个端点说A（x1，y1）和B（x2，y2），矩形的任意宽度说w。我假设终点位于矩形短边的中间，这意味着最终矩形角坐标的距离为w / 2到A和B.

您可以通过计算线的斜率;

s1 =（y2 - y1）/（x2 - x1）//假设x1！= x2

短边的斜率只是s2 = -1 / s1。

我们有坡度，我们有距离，我们有参考点。

我们可以为每个角点推导出两个方程式：

靠近A的一个角落

C（x3，y3）：

（y3-y1）/（x3-x1）= s2 //斜率

（y3 - y1）^ 2 +（x3 - x1）^ 2 =（w / 2）^ 2 //按距离

将（y3 - y1）替换为a和（x3 - x1）替换为b得到

a = b * s2 //斜率方程

//用b * s2替换a

b ^ 2 * s2 ^ 2 + b ^ 2 =（w / 2）^ 2 //距离等等

b ^ 2 =（w / 2）^ 2 /（s2 ^ 2 + 1）

b = sqrt（（w / 2）^ 2 /（s2 ^ 2 + 1））

我们知道w和s2因此计算b

如果b已知，我们可以推导出x3

x3 = b + x1

和a，以及

a = b * s2

等y3

y3 = b * s2 + y1

我们有一个角点C（x3，y3）。

要计算更靠近A的另一个角点，比如D（x4，y4），斜率方程可以构造为

（y1-y4）/（x1-x4）= s2 并且应该应用上面列出的计算。

可以使用此处列出的步骤计算其他两个角，将A（x1，y1）替换为B（x2，y2）。