Рисование прямоугольника между двумя точками с произвольной шириной

Я пытаюсь провести линию между двумя (2D) точками, когда пользователь проводит пальцем по сенсорному экрану. Для этого я планирую рисовать прямоугольник при каждом обновлении касания между X и Y предыдущего обновления касания и X и Y последнего обновления касания. Это должно создать сплошную и сплошную линию, когда пользователь проведет пальцем по экрану. Тем не менее, мне также хотелось бы, чтобы эта строка имела произвольную ширину. Мой вопрос в том, как мне приступить к вычислению координат, которые мне нужны для каждого прямоугольника (x1, y1, x2, y2)?

Также: если у кого-то есть информация о том, как я мог бы тогда применить сглаживание к этой строке, это было бы огромной помощью.

Ответ 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, так что ширина вашей строки в этом примере не будет зависеть от длины перпендикуляров (которая здесь равна длине строк).

Ответ 2

Простой способ (я назову "ширину" толщины линии):

Нам нужно рассчитать 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 shift.

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

Second: (x1 + xS, y1 - yS)

Third: (x2 + xS, y2 - yS)

Fourth: (x2 - xS, y2 + yS)

И вот ты! (Эти координаты рисуются против часовой стрелки, по умолчанию для OpenGL)

Ответ 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//уравнение наклона

//заменим a на b * s2

b ^ 2 * s2 ^ 2 + b ^ 2 = (w/2) ^ 2//расстояние equaiton

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).