Question

我正在研究一个WPF项目，试图创建一个模拟时钟。我有一个时钟的图像（没有手）并将其设置为背景。我还有两只手的时钟图像，我想要旋转保持一端固定（就像它发生在时钟中）。如何旋转图像，使其一端固定在C＃.NET（WPF）中？我试过的是以下代码：

namespace AnalogWatch
{
/// <summary>
/// Interaction logic for MainWindow.xaml
/// </summary>
public partial class MainWindow : Window
{

    DispatcherTimer dispatcherTimer;
    private int degrees = 0;
    public MainWindow()
    {
        InitializeComponent();
        dispatcherTimer = new DispatcherTimer();
        dispatcherTimer.Tick += new EventHandler(dispatcherTimer_Tick);
        dispatcherTimer.Interval = new TimeSpan(0, 0, 1);
    }

    private void dispatcherTimer_Tick(object sender, EventArgs e)
    {
        degrees += 5;
        if (degrees > 360)
        {
            degrees = 0;
        }
        RotateTransform transform = new RotateTransform(degrees,StickImg.Width/2,StickImg.Height/2);
        //StickImg.RenderTransformOrigin = new System.Windows.Point(0, 0);
        StickImg.RenderTransform = transform;
    }

    private void Window_ContentRendered_1(object sender, EventArgs e)
    {
        dispatcherTimer.Start();
    }
}

}

它正在旋转图像但不保持其一端固定。这有什么问题？

XAML是：

<Window x:Class="AnalogWatch.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="MainWindow" Height="350" Width="525" ContentRendered="Window_ContentRendered_1">
<Grid>
    <Image x:Name="StickImg" HorizontalAlignment="Left" Height="100" VerticalAlignment="Top" Width="100" Margin="207,70,0,0" Source="stick.png"/>
</Grid>
</Window>

Answer 1

<强>更新

如果时钟恰好位于矩形图像的中心，则代码应该有效。 像这个 enter image description here

你可以像你一样做

RotateTransform transform =new RotateTransform(degrees, StickImg.Width/2,StickImg.Height/2);

或

RotateTransform transform = new RotateTransform(degrees);
StickImg.RenderTransformOrigin = new Point(0.5, 0.5);

Answer 2

使用元素的RenderTransformOrigin设置旋转中心。

请注意，坐标缩放为0..1 所以围绕中心旋转：

RenderTransformOrigin="0.5, 0.5"

确保手的枢轴位于元素的中心。

Answer 3

这里是我正在使用的代码，它的功能就像魅力一样...... qwr 建议的时钟指针应该正好位于矩形图像的中心

c＃code

    DispatcherTimer clock = new DispatcherTimer();
    public AnalogClock()
    {

        InitializeComponent();
        clock.Interval =TimeSpan.FromMilliseconds(100);
        clock.Tick += clock_Tick;
        clock.Start();
    }

    void clock_Tick(object sender, EventArgs e)
    {
        double milsec = DateTime.Now.Millisecond;
        double sec = DateTime.Now.Second;
        double min = DateTime.Now.Minute;
        double hr = DateTime.Now.Hour;
        seconds.LayoutTransform = new RotateTransform(((sec / 60) * 360)+((milsec/1000)*6));
        minutes.LayoutTransform = new RotateTransform((min * 360 / 60)+((sec/60)*6));
        hours.LayoutTransform = new RotateTransform((hr * 360 / 12)+(min/2));

    }

和图像的XAML代码

<Grid Margin="-100">
    <Image x:Name="clockface" RenderOptions.BitmapScalingMode="HighQuality" Source="images/panel.PNG" RenderTransformOrigin="0.5,0.5" HorizontalAlignment="Center" VerticalAlignment="Center" Height="194" Margin="100" Width="194"/>
    <Image x:Name="hours" RenderOptions.BitmapScalingMode="HighQuality" Source="images/hours.PNG" RenderTransformOrigin="0.5,0.5" VerticalAlignment="Center" HorizontalAlignment="Center" Height="194" Margin="100" Width="194"/>
    <Image x:Name="minutes" RenderOptions.BitmapScalingMode="HighQuality" Source="images/minutes.PNG" RenderTransformOrigin="0.5,0.5" VerticalAlignment="Center" HorizontalAlignment="Center" Height="194" Margin="100" Width="194"/>
    <Image x:Name="seconds" RenderOptions.BitmapScalingMode="HighQuality" Source="images/seconds.PNG" RenderTransformOrigin="0.5,0.5" HorizontalAlignment="Center" VerticalAlignment="Center" Height="194" Margin="100" Width="194"/>
</Grid>

请注意，我已将该代码用于单独的用户控件中。

只需确保时钟指针图像与包含在内的网格图像之间的边距应足以为图像旋转腾出空间，否则它会在旋转时移位..

希望这会有所帮助..！

模拟时钟，旋转手C＃WPF

3 个答案: