Silverlight 3 - вращение прямоугольника вокруг эллипса - PullRequest
Новая
       25

Silverlight 3 - вращение прямоугольника вокруг эллипса

0 голосов
/ 16 декабря 2010

У меня есть пользовательский элемент управления Silverlight, который выглядит как компас. Я бы опубликовал изображение, но я новый пользователь и пока не могу публиковать изображения. :(.

По сути, подумайте о внешнем эллипсе, а внутри - о внутреннем эллипсе в центре с прямоугольником, который служит «рукой» компаса. Я разместил xaml ниже.

Я хочу переместить компас «рукой», когда левая кнопка мыши нажата и мышь перемещена. Я думал, что это будет относительно легко с использованием RotateTransform, но я не могу понять это.

Проблемы, с которыми я сталкиваюсь:

A. Я не могу понять, как установить свойства CenterX, CenterY и Angle моего RotationTransform. Я хочу, чтобы рука (красный прямоугольник) вращалась вокруг центрального эллипса (коричневый эллипс посередине).

B. Является ли их способ замедлить преобразование вращения? Поэтому, если кто-то крутит мышь быстро, рука движется, но не так быстро, как пользователь двигает мышь. Иными словами, это способ уменьшить чувствительность движения мыши?

Я бы опубликовал свой код, но это довольно печально. :-). Мне не нужно точное решение, просто подтолкни в правильном направлении.

Вот XAML 

<Grid Margin="20,20,0,18" HorizontalAlignment="Left" Width="180">
        <Ellipse x:Name="outerEllipse" Stroke="Black">
            <Ellipse.Fill>
                <LinearGradientBrush EndPoint="0.5,1" MappingMode="RelativeToBoundingBox" StartPoint="0.5,0">
                    <GradientStop Color="#3FF7F5F5" Offset="0.449"/>
                    <GradientStop Color="#FFF7F1F1" Offset="0.938"/>
                </LinearGradientBrush>
            </Ellipse.Fill>
        </Ellipse>
        <Ellipse x:Name="innerEllipse" Margin="16,14,16,13" Stroke="Black">
            <Ellipse.Fill>
                <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                    <GradientStop Color="#FFD8BABA" Offset="0"/>
                    <GradientStop Color="#FFF7F1F1" Offset="1"/>
                </LinearGradientBrush>
            </Ellipse.Fill>
        </Ellipse>
        <Ellipse x:Name="knobEllipse" Margin="83,75,82,74" Stroke="Black" Fill="#FFCFB53B"/>
        <TextBlock x:Name="textNorth" Height="17" Margin="83,14,83,0" TextWrapping="Wrap" Text="N" VerticalAlignment="Top" Foreground="#FFCC3131" FontSize="16" FontFamily="Book Antiqua"/>
        <TextBlock x:Name="textNorthEast" Height="21" Margin="0,34,25.666,0" TextWrapping="Wrap" Text="NE" VerticalAlignment="Top" Foreground="#FFCC3131" FontSize="16" FontFamily="Book Antiqua" RenderTransformOrigin="0.5,0.5" UseLayoutRounding="False" d:LayoutRounding="Auto" HorizontalAlignment="Right" Width="30">
            <TextBlock.RenderTransform>
                <CompositeTransform Rotation="45"/>
            </TextBlock.RenderTransform>
        </TextBlock>
        <TextBlock x:Name="textSouth" Height="17" Margin="86,0,85,13" TextWrapping="Wrap" Text="S" VerticalAlignment="Bottom" Foreground="#FFCC3131" FontSize="16" FontFamily="Book Antiqua"/>
        <TextBlock x:Name="textNorthWest" Height="21" Margin="29,31,0,0" TextWrapping="Wrap" Text="NW" VerticalAlignment="Top" Foreground="#FFCC3131" FontSize="16" FontFamily="Book Antiqua" RenderTransformOrigin="0.5,0.5" UseLayoutRounding="False" d:LayoutRounding="Auto" HorizontalAlignment="Left" Width="30">
            <TextBlock.RenderTransform>
                <CompositeTransform Rotation="315"/>
            </TextBlock.RenderTransform>
        </TextBlock>
        <TextBlock x:Name="textEast" HorizontalAlignment="Right" Margin="0,75,16,74" TextWrapping="Wrap" Text="E" Width="11" Foreground="#FFCC3131" FontSize="16" FontFamily="Book Antiqua"/>
        <TextBlock x:Name="textWest" HorizontalAlignment="Left" Margin="16,73,0,72" TextWrapping="Wrap" Text="W" Width="20" Foreground="#FFCC3131" FontSize="16" FontFamily="Book Antiqua"/>
        <TextBlock x:Name="textSouthEast" Margin="0,0,33.834,25.333" TextWrapping="Wrap" Text="SE" Foreground="#FFCC3131" FontSize="16" FontFamily="Book Antiqua" RenderTransformOrigin="0.5,0.5" UseLayoutRounding="False" d:LayoutRounding="Auto" HorizontalAlignment="Right" Height="21" VerticalAlignment="Bottom" Width="30">
            <TextBlock.RenderTransform>
                <CompositeTransform Rotation="140"/>
            </TextBlock.RenderTransform>
        </TextBlock>
        <TextBlock x:Name="textSouthWest" Margin="31.5,0,0,29.5" TextWrapping="Wrap" Text="SW" Foreground="#FFCC3131" FontSize="16" FontFamily="Book Antiqua" RenderTransformOrigin="0.5,0.5" UseLayoutRounding="False" d:LayoutRounding="Auto" HorizontalAlignment="Left" Width="30" Height="21" VerticalAlignment="Bottom">
            <TextBlock.RenderTransform>
                <CompositeTransform Rotation="220"/>
            </TextBlock.RenderTransform>
        </TextBlock>
        <Rectangle x:Name="rectanglePointer" Height="32" Margin="87,43,86,0" Stroke="Black" VerticalAlignment="Top">
            <Rectangle.Fill>
                <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                    <GradientStop Color="#FFF38989" Offset="0"/>
                    <GradientStop Color="#FF914949" Offset="1"/>
                </LinearGradientBrush>
            </Rectangle.Fill>
        </Rectangle>

    </Grid>

Спасибо за вашу помощь

1 Ответ

2 голосов
/ 16 декабря 2010

Играя с вашим XAML, следующий источник трансформации рендера примерно произведет то, что вы ищете: 

<Rectangle x:Name="rectanglePointer" Height="32" Margin="87,43,86,0" Stroke="Black" VerticalAlignment="Top"
            RenderTransformOrigin="0.5,2.8">      
  <Rectangle.RenderTransform>
      <RotateTransform Angle="180"/>
  </Rectangle.RenderTransform>
  <Rectangle.Fill>
    <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
      <GradientStop Color="#FFF38989" Offset="0"/>
      <GradientStop Color="#FF914949" Offset="1"/>
    </LinearGradientBrush>
  </Rectangle.Fill>
</Rectangle>

Смещение X на 0,5 шага поворота, положение X тоже выровнено с центром прямоугольникаи смещение Y в 2.8 смещает вращение в центр примерно на коричневом эллипсе.

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

Еще лучше, используйте столбцы / ячейки таблицы для создания нужного макета.Посмотрите на это сообщение в блоге:

http://www.scottlogic.co.uk/blog/colin/2010/08/developing-a-very-lookless-silverlight-radial-gauge-control/

Возможно, вы сможете адаптировать этот элемент управления к вашим потребностям.

Замедление движения мыши, что может быть сложно!

Я бы порекомендовал изменить ваш компас на пользовательский элемент управления и сделать угол компаса свойством зависимости.Если у вас есть свойство зависимости, вы можете анимировать его из кода.

Надеюсь, это поможет!

Колин Э.

...