Как мы можем вычислить правильные значения x и y для повернутого изображения?

Question

Картирование SVG image элемент в HTML.

Изображение в Inkscape повернуть против часовой стрелки на 50 градусов:

<image
   y="178.3712"
   x="-212.40982"
   id="image3002"
   xlink:href="..path"
   height="369"
   width="360"
   transform="matrix(0.64278761,-0.76604444,0.76604444,0.64278761,0,0)" />

Вычисление x & y, согласно этой математической логике:

      X = -212.40982, Y = 178.3712

   x = X * 0.64278761 - Y * 0.76604444;

   y = X * 0.76604444 + Y * 0.64278761;

После вычисления x и y, когда я отображаю изображение в html, оно выглядит так:

Теперь, пожалуйста, кто-нибудь может мне помочь и объяснить, что здесь происходит?

Answer 1

Вы хотите, чтобы изображение оставалось в пределах документа, правильно? Ваше текущее решение не работает, потому что изображение повернуто на 50º вокруг центра (0, 0), но ваше изображение размещено на (-212.40982, 178.3712),

Давайте рассмотрим другой алгоритм. Если изображение размещено на (0, 0)вращение будет сосредоточено вокруг верхнего левого угла изображения. Вращение приведет к тому, что часть изображения выйдет за границы. Нам нужно выяснить, сколько находится за пределами, и соответственно переместить изображение.

Величина для корректировки в направлении x может быть рассчитана с помощью этой кусочной функции:

• h × sin(θ) за 0 < θ ≤ π/2
• h × sin(θ) − w × cos(θ) за π/2 < θ ≤ π
• −w × cos(θ) за π < θ ≤ 3π/2
• 0 за 3π/2 < θ ≤ 2π

где θ угол поворота, w а также h ширина и высота изображения соответственно.

Величина для регулировки в направлении у просто сдвинута влево на π/2, Эта кусочная функция может быть реализована для всех углов, используя максимальное значение из 4 уравнений.

Чтобы проиллюстрировать этот пример, проверьте эту скрипку: http://jsfiddle.net/XMkYS/

Вы можете применить преобразование, используя rotate, а потом translate исправить положение изображения. В вашем случае <image> тег становится:

<image
   y="0"
   x="0"
   id="image3002"
   xlink:href="..path"
   height="369"
   width="360"
   transform="translate(0, 275.775999522832) rotate(-50)" />

Дополнительное чтение: http://www.w3.org/TR/SVG/coords.html