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

Question

Я пытаюсь создать небольшой датчик, похожий на спидометр в автомобиле, за исключением того, что он охватывает только 180 градусов.

Для визуализации элемента управления я использую два файла изображения. Первый просто фон для датчика и показывает полукруг, который идет от зеленого в 0 градусов к красному в 180 градусов. Второе изображение - это вертикальная стрелка примерно такой же высоты, как радиус полукруга, и немного меньше высоты фонового изображения.

Я использую следующую разметку для визуализации элемента управления:

<div class="gauge" id="@Model.ClientID">
    <img class="gauge" alt="" src="@Url.Content( "~/images/icons/gauge-bg.png" )" />
    <img class="arrow" alt="" src="@Url.Content( "~/images/icons/gauge-arrow.png" )" />
</div>

Изображения расположены относительно внутри div, чтобы позволить им перекрываться. Фоновое изображение имеет размер 120x63 пикселей, а изображение со стрелкой - 12x58 пикселей (WxH), но это можно изменить, если это облегчит решение проблемы. Изображение стрелки направлено вверх, прежде чем будет применено любое вращение.

У меня есть процент (от 0 до 100), который я перевожу в угол поворота для изображения стрелки (от -90 до 90), который выглядит следующим образом:

// input value for the offset calculations (see below)
public double ArrowRotationDegrees 
{
    // 0 for 0%, 90 for 50% and 180 for 100%
    get { return 180.0 * Percent / 100; }
}

// input value for the jquery rotate plugin as our base arrow points vertically up
public double ArrowRotationDegreesRelative // -90 for 0%, 0 for 50% and 90 for 100%
{
    // -90 for 0%, 0 for 50% and 90 for 100%
    get { return ArrowRotationDegrees - 90; }
}

Для выполнения поворота я использую jquery-rotate , который, кажется, всегда вращается вокруг центра изображения.

<script type="text/javascript">
    $(document).ready(function () {
        var arrow = $('#@Model.ClientID').find('img.arrow');
        arrow.rotate(@Model.ArrowRotationDegreesRelative);
        arrow.css({left: @Model.ArrowLeftShiftPixels, top: @Model.ArrowTopShiftPixels});
    });
</script>

Но как рассчитать правильные смещения для изменения положения повернутого изображения, чтобы стрелка всегда указывала точно в центр нижней части фонового изображения?

ОБНОВЛЕНИЕ - РЕШЕНИЕ

На основании ответа Эрика Дж. Я смог настроить свой код и получить рабочий результат без изменения разметки:

public int ArrowLeftShiftPixels // used to position rotated image correctly horizontally
{
    // default offset (no rotation) is left:55
    get { return 55 - GetArrowLeftShift( ArrowRotationDegrees ); }
}

public int ArrowTopShiftPixels // used to position rotated image correctly vertically
{
    // default offset (no rotation) is top:5
    // formula output is shifted (max appears where min should be); add 29 to reverse this effect
    get { return 34 - GetArrowTopShift( ArrowRotationDegrees ); }
}

public int GetArrowLeftShift( double degrees )
{
    var result = (58.0 / 2) * Math.Cos( degrees * Math.PI / 180 );
    return (int) Math.Round( result, 0 );
}

public int GetArrowTopShift( double degrees )
{
    var result = (58.0 / 2) * Math.Sin( degrees * Math.PI / 180 );
    return (int) Math.Round( result, 0 );
}

Спасибо за помощь и предложения!

Answer 1

Вы можете создать div, который примерно в два раза больше размера изображения в обоих измерениях. Затем вы должны расположить свое изображение внутри этого div, так что точка вращения изображения (нижняя часть стрелки) будет на половине высоты и ширины div. Затем вы должны перевести div в правильную область (чтобы точка поворота изображения находилась в правильной области), а затем выполнить вращение в div.

РЕДАКТИРОВАТЬ: Вот jsfiddle, чтобы объяснить это http://jsfiddle.net/pVpE7/

Answer 2

Посмотрите на этот пример . Объяснение:

Плагин поворота не позволяет указать опорную точку - он всегда вращается вокруг центра. Я просто удвоил размер стрелки, чтобы она растягивалась по ширине датчика. Вращение этой стрелки дает желаемый эффект. Добавлены незначительные изменения в CSS, чтобы держать переливающуюся часть стрелки под контролем.

Answer 3

Я не рассматривал конкретные цифры вашей проблемы в деталях (стрелка с корнем внизу направлена ​​вверх или наоборот?), Но вы, вероятно, обнаружите, что кончики стрелки смещаются влево или вправо центр изображения на (half it's length) * cos(Angle), в то время как они сдвигаются вверх или вниз на (half it's length) * sin (Angle). Обязательно укажите угол, который вы используете в радианах или градусах в зависимости от библиотеки триггеров, которую вы используете для вычисления sin и cos.

Если вы рассчитываете sin и cos на стороне сервера в C #, используйте радианы.

Вот объяснение того, как вращаться для произвольных углов (соответствует тому, что я только что объяснил, но диаграммы могут помочь). Обратите внимание, что в вашем случае начальный угол равен 0, поэтому начальные формулы

x = 0 (так как cos (0) = 0) y = r (так как r * sin (0) = r)