Вопрос по math, javascript – Html5 Алгоритм преобразования холста - поиск координат объекта после применения преобразования

1

На холсте html5 я рисую объекты (прямоугольник, круг и т. Д.), Эти объекты имеют свойства преобразования, такие как масштаб, наклон, поворот и т. Д. Эти объекты могут быть вложенными.

Проблема возникает, когда после применения преобразований я хочу найти точную координату x, y данного объекта, но это происходит у меня над головой.

Всем специалистам, занимающимся интерактивной компьютерной графикой; Пожалуйста, помогите мне решить эту проблему.

Заранее спасибо.

Дубликат:stackoverflow.com/questions/3630594/… Markus Jarderot
Нет, это не дубликат, это похоже на этот вопрос (stackoverflow.com/questions/8844525/…) но не одно и то же. Я ищу аналогичный ответ на мои вопросы. Но спасибо, что ваша ссылка также помогла ... Software Enthusiastic

Ваш Ответ

1   ответ
8

Все аффинные преобразования в 2D можно выразить в виде матрицы вида:

    [ a  c  dx ]
T = [ b  d  dy ]
    [ 0  0   1 ]

Это можно выразить методомcontext.transform(a, b, c, d, dx, dy);.

Применительно к некоторой координате,(x,y)сначала нужно добавить третью координату, которая всегда1: <x, y, 1>, Затем вы можете умножить матрицу преобразования, чтобы получить результат:

[ a*x + c*y + dx ]
[ b*x + d*y + dy ]
[       1        ]

Если вы получаете что-то, кроме «1»; в последней координате вы должны разделить вектор на него.


Чтобы пойти другим путем, вы должны инвертировать матрицу:

[ d/M  -c/M  (c*dy - d*dx)/M ]
[ b/M   a/M  (b*dx - a*dy)/M ]
[  0     0          1        ]

гдеM является(a*d - b*c).


Несколько преобразований можно применять последовательно, умножая их матрицы. Порядок умножения важен.


context.translate(dx,dy) <==> context.transform( 1,  0,  0,  1, dx, dy)
context.rotate(θ)        <==> context.transform( c,  s, -s,  c,  0,  0)
context.scale(sx,sy)     <==> context.transform(sx,  0,  0, sy,  0,  0)

гдеc = Math.cos(θ) а такжеs = Math.sin(θ)


Если у вас есть координата(x,y) в объектном пространстве, и вы хотите знать, где он окажется на экране, вы применяете к нему преобразование.

Если у вас есть координата(x,y) на экране, и вы хотите знать, какая точка на объекте, который вы, вы умножаете на обратное преобразование.

@ TomLarkworthy Спасибо. Исправлена.
Спасибо большое, это помогло ... Software Enthusiastic
это несколько сбивает с толку расположение элементов матрицы, так как setTransform (a, b, c, d, e, f) в API холста выложен: [a, c, e \ nb, d, f \ n 0 0 1 ], увидетьdeveloper.mozilla.org/en-US/docs/Web/API/…

Похожие вопросы