使弧形路径跟随旋转线

时间:2015-07-09 16:16:05

标签: c# wpf animation path rotation

使用C#,WPF我完全可以使用它,除了这一行。角度是动态的。我希望在半径的外围,无论是1度还是360度,都要遵循角度弧。

我还不能发布图片。所以,如果你能想象中午的时钟(0度)。当秒针移动到12:15(90度)时,在0到90度的时钟轮廓之后有一个红色圆弧。当然,当手移动到12:30(180度)时,红线从0到180度。

我一直试图解决这个问题一个星期了。我不知道具有约束力如何,所以请温柔地解释一下!

2 个答案:

答案 0 :(得分:0)

以下是可能的解决方案的工作代码(完全没有绑定):

Rotating line

<Window x:Class="WpfApplication1.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="530" Width="943">
    <Canvas>
        <Canvas Canvas.Top="200" Canvas.Left="200">
            <Ellipse Width="100" Height="100" Stroke="Black">
                <Ellipse.RenderTransform>
                    <TranslateTransform X="-50" Y="-50" />
                </Ellipse.RenderTransform>
            </Ellipse>
            <Canvas>
                <Line X2="0" Y2="-50" Stroke="Black" StrokeDashArray="2,1" />
                <Path Stroke="Red" StrokeThickness="2">
                    <Path.Data>
                        <PathGeometry>
                            <PathFigure StartPoint="-5,-55">
                                <PolyLineSegment Points="-0,-50 -5,-45" />
                            </PathFigure>
                        </PathGeometry>
                    </Path.Data>
                </Path>
                <Canvas.RenderTransform>
                    <RotateTransform Angle="90" />
                </Canvas.RenderTransform>
            </Canvas>
            <Canvas>
                <Path Stroke="Red" StrokeThickness="2">
                    <Path.Data>
                        <PathGeometry>
                            <PathFigure StartPoint="0,-50">
                                <ArcSegment
                                    IsLargeArc="False"
                                    Size="50, 50"
                                    Point="50, 0"
                                    SweepDirection="Clockwise" />
                            </PathFigure>
                        </PathGeometry>
                    </Path.Data>
                </Path>
            </Canvas>
        </Canvas>
    </Canvas>
</Window>

说明: 画布上有4个元素: - 基本的黑色椭圆作为背景 - 红色弧线 - 红色箭头 - 当前位置的虚线黑线

为了游戏(并集成Binding,稍后再加上),你可以调整RotateTransform的角度(旋转虚线和小箭头)和ArgSegment的Point属性(“0, - 50“= 0°,”50,0“= 90°,”0,50“= 180°,” - 50,0“= 270°)。如果Angle高于180,则还需要将IsLargeArc属性设置为“True”

绑定: 您可以直接将旋转绑定到患病角度 为了设置弧的正确终点,你可以创建一个ValueConverter,将角度转换为相应的点(使用sinus / cosinus)

答案 1 :(得分:0)

感谢菲利普,正如我所说的,我做了其他一切。我不明白的是如何让xaml与用户输入的数据进行交互。我不认为你提供的东西会与我的东西一起工作。并非我的代码中的所有内容都已被使用。这是我的测试,直到我确定它为止。使用System;

     using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;
using HelixToolkit.Wpf;

namespace WpfApplication1
{
    /// <summary>
    /// Interaction logic for MainWindow.xaml
    /// </summary>
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
        }              

        public void geometry()
        {
            canvas4.Children.Clear();
            double one, two, three, four, ang, ang2, x1, x2, x3, x4, y1, y2, y3, y4, Rads;
            if (double.TryParse(txtOne.Text, out one))
                if (double.TryParse(txtTwo.Text, out two))
                    if (double.TryParse(txtThree.Text, out three))
                        if (double.TryParse(txtFour.Text, out four))
                            if (double.TryParse(txtAngle.Text, out ang))
                                if (double.TryParse(txtAngle.Text, out ang2))


            if (double.TryParse(txtAngle.Text, out ang))
                if (double.TryParse(txtAngle.Text, out ang2))
                {
                    RotateTransform ans2 = new RotateTransform();
                    ans2.Angle = ang2;
                    ans2.CenterX = 180;
                    ans2.CenterY = 180;

                    if (ang2 < 0)
                    {
                        ang2 = (360 + ang);
                    }

                    Rads = Math.PI * ang / 180;

                    x1 = Math.Sin(Rads) * 50;
                    y1 = Math.Cos(Rads) * 50;
                    x2 = Math.Sin(Rads) * 160;
                    y2 = Math.Cos(Rads) * 160;
                    x3 = Math.Sin(Rads) * 50;
                    y3 = Math.Cos(Rads) * 50;
                    x4 = Math.Sin(Rads) * 160;
                    y4 = Math.Cos(Rads) * 160;

                    Line lineW = new Line();
                    lineW.Stroke = Brushes.Black;
                    lineW.StrokeThickness = 1.5;
                    lineW.X1 = 180;
                    lineW.Y1 = 15;
                    lineW.X2 = 180;
                    lineW.Y2 = 340;
                    lineW.HorizontalAlignment = HorizontalAlignment.Center;
                    lineW.VerticalAlignment = VerticalAlignment.Center;
                    lineW.RenderTransform = ans2;
                    canvas4.Children.Add(lineW);

                    Line lineY = new Line();
                    lineY.Stroke = Brushes.Black;
                    lineY.StrokeThickness = 1.5;
                    lineY.X1 = 180;
                    lineY.Y1 = 20;
                    lineY.X2 = 180;
                    lineY.Y2 = 340;
                    lineY.HorizontalAlignment = HorizontalAlignment.Center;
                    lineY.VerticalAlignment = VerticalAlignment.Center;              
                    canvas4.Children.Add(lineY);

                    Line lineZ = new Line();
                    lineZ.Stroke = Brushes.Black;
                    lineZ.StrokeThickness = 1.5;
                    lineZ.X1 = 20;
                    lineZ.Y1 = 180;
                    lineZ.X2 = 340;
                    lineZ.Y2 = 180;
                    lineZ.HorizontalAlignment = HorizontalAlignment.Center;
                    lineZ.VerticalAlignment = VerticalAlignment.Center;                   
                    canvas4.Children.Add(lineZ);

                    Ellipse ell6 = new Ellipse();
                    ell6.Width = 10;
                    ell6.Height = 10;
                    ell6.Stroke = Brushes.Black;
                    ell6.Fill = Brushes.LimeGreen;              

                    TranslateTransform ell66 = new TranslateTransform(175+x2, 175-y2);
                    ell6.RenderTransform = ell66;                  
                    canvas4.Children.Add(ell6);

                    Ellipse ell7 = new Ellipse();
                    ell7.Width = 10;
                    ell7.Height = 10;
                    ell7.Stroke = Brushes.Black;
                    ell7.Fill = Brushes.Yellow;
                    TranslateTransform ell77 = new TranslateTransform(175 + x1,175- y1);
                    ell7.RenderTransform = ell77;
                    canvas4.Children.Add(ell7);

                    Ellipse ell8 = new Ellipse();
                    ell8.Width = 10;
                    ell8.Height = 10;
                    ell8.Stroke = Brushes.Black;
                    ell8.Fill = Brushes.Yellow;
                    TranslateTransform ell88 = new TranslateTransform(175 - x2, 175 + y2);
                    ell8.RenderTransform = ell88;
                    canvas4.Children.Add(ell8);

                    Ellipse ell9 = new Ellipse();
                    ell9.Width = 10;
                    ell9.Height = 10;
                    ell9.Stroke = Brushes.Black;
                    ell9.Fill = Brushes.Yellow;
                    TranslateTransform ell99 = new TranslateTransform(175 - x1, 175 + y1);
                    ell9.RenderTransform = ell99;
                    canvas4.Children.Add(ell9);

                    PathGeometry pathGeometry = new PathGeometry();
                    PathFigure figure = new PathFigure();
                    figure.StartPoint = new Point(180, 20);
                    figure.Segments.Add(new ArcSegment(new Point(180 + x2, 180 - y2), new Size(320, 320), ang2, false, SweepDirection.Clockwise, true));                    


                    pathGeometry.Figures.Add(figure);
                    Path path = new Path();
                    path.Data = pathGeometry;
                    //path.Fill = Brushes.Pink;
                    path.Stroke = Brushes.Red;
                    canvas4.Children.Add(path);                    
                }
        }



        private void btnTest_Click(object sender, RoutedEventArgs e)
        {           
            geometry();           
        }

        }
    }
相关问题