【问题标题】:Analog Clock, Rotate Hands C# WPF模拟时钟,旋转指针 C# WPF
【发布时间】:2014-11-16 19:44:29
【问题描述】:

我正在开发一个 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>

【问题讨论】:

  • 你能描述一下应该固定的末端的运动吗?您确定图像的旋转中心与时钟指针的末端重合吗?
  • 你的另一个问题发生了什么事,就像这个问题一样?你删了吗?如果你这样做了,它可能没问题,但是为了避免问题被禁止,编辑比删除更好(尽管你可能很难从反对票中恢复过来)。
  • 另外,您的中心似乎是错误的。您可能希望中心位于 宽度/高度,而不是中点。
  • 如果没有更完整的代码示例(XAML 在哪里?),很难知道什么是正确的,但正如 Bradley 所说,您需要将旋转的中心点设置为正确的位置。 “正确位置”取决于您首先如何定义时钟指针。另请注意,旋转原点是为了方便;您还可以平移对象,使旋转中心位于 (0,0),进行旋转,然后平移它,使旋转中心位于时钟的中心(即结合平移、旋转、然后再翻译)。
  • 向问题添加了 XAML。

标签: c# wpf


【解决方案1】:

已更新。

如果时钟指针正好位于矩形图像的中心,您的代码应该可以工作。 像这个

你可以像以前那样做

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

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

【讨论】:

    【解决方案2】:

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

    注意坐标被缩放到 0..1 所以围绕中心旋转:

    RenderTransformOrigin="0.5, 0.5"
    

    只要确保手的支点位于元素的中心即可。

    【讨论】:

      【解决方案3】:

      这是我正在使用的代码,它的工作原理就像是魅力..因为 qwr 建议时钟指针应该正好在矩形图像的中心

      c#代码

          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>
      

      请注意,我在单独的用户控件中使用了代码..

      只要确保时钟指针图像和它所包含的网格之间的边距应该足以为图像旋转腾出空间,否则它会在旋转时移位..

      希望这会有所帮助..!

      【讨论】:

        猜你喜欢
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 2016-01-15
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        相关资源
        最近更新 更多