WPF Polygon rotatetransform 旋转移动方向

Question

所以我在 WPF 中构建了这个应用程序，我在其中画了一条带箭头的线。箭头是在资源字典中创建的多边形，如下所示：

<!-- This is the arrowhead of the wire -->
<Polygon x:Name="PART_arrow"
    Points="{Binding Path=ArrowPathData}" IsHitTestVisible="True"
    Stroke="{TemplateBinding Stroke}" StrokeThickness="{TemplateBinding InnerWireStrokeThickness}"
    Fill="White" RenderTransformOrigin="0,0.5" RenderTransform="{Binding ArrowRotation}">
</Polygon>

在视图模型中，我使用 pointcollection 创建箭头，其位置取决于线的最后一个关节的位置。最后箭头需要根据线的角度旋转，但这是为了以后。在这一刻，箭头被可视化并跟随线的最后一个关节。这仅在箭头的旋转为 0 时有效。当我改变旋转时，箭头的移动也会改变。所以例如当我将旋转设置为 90 度时。箭头旋转 90 度，但是当我将线向左移动时，箭头移动到顶部。我试图将 RenderTransform 设置器更改为 LayoutTransform。我使用了 Polygon.Rendertransform 并硬编码了一个角度。但没有任何效果。

public PointCollection ArrowPathData
{
    get
    {
        PointCollection arrow = new PointCollection();

        if(isArrowSelected)
            arrow = PointCollection.Parse("0,0 3,5 0,0 -3,5");
        else if (isWindowSelected)
            arrow = PointCollection.Parse("0,0 5,10 0,20 -5,10");
        else if (isRoofSelected)
            arrow = PointCollection.Parse("0,0 5,10 -5,10");

        IEnumerable<WireJoint> joints = Joints;
        if (joints.Count<WireJoint>() > 0)
        {
            WireJoint lastJoint = joints.Last();

            if (lastJoint != null)
            {
                for (int i = 0; i < arrow.Count; i++)
                {
                    arrow[i] = new Point(lastJoint.Point.X + arrow[i].X - Offset.X, lastJoint.Point.Y + arrow[i].Y - Offset.Y);
                }
            }
            return arrow;
        }
        else
            return new PointCollection();
    }
}

public RotateTransform ArrowRotation
{
    get
    {
        return new RotateTransform(45) ;
    }
}

谁能帮我解决这个问题？

编辑：在代码中添加了额外的箭头

Answer 1

您可能希望使用绑定转换器，从折线的最后两个点创建转换的几何图形：

public class ArrowHeadConverter : IValueConverter
{
    public object Convert(
        object value, Type targetType, object parameter, CultureInfo culture)
    {
        Geometry geometry = null;
        var points = value as IList<Point>;

        if (points != null && points.Count >= 2)
        {
            geometry = Geometry.Parse("M0,0 L5,10 -5,10Z").Clone();

            var lastPoint = points[points.Count - 1];
            var lastSegment = lastPoint - points[points.Count - 2];
            var angle = Vector.AngleBetween(new Vector(0, -1), lastSegment);
            var transform = Matrix.Identity;

            transform.Rotate(angle);
            transform.Translate(lastPoint.X, lastPoint.Y);

            geometry.Transform = new MatrixTransform(transform);
        }

        return geometry;
    }

    public object ConvertBack(
        object value, Type targetType, object parameter, CultureInfo culture)
    {
        throw new NotSupportedException();
    }
}

你可以像这个简单的例子一样使用转换器：

<Canvas>
    <Canvas.Resources>
        <local:ArrowHeadConverter x:Key="ArrowHeadConverter"/>
    </Canvas.Resources>

    <Polyline x:Name="polyline" Stroke="Black" StrokeThickness="2"
              Points="10,10 50,20 70,40 80,60"/>

    <Path Fill="White" Stroke="Black" StrokeThickness="2"
          Data="{Binding Points, ElementName=polyline,
                         Converter={StaticResource ArrowHeadConverter}}"/>
</Canvas>