20

Подскажите, как можно нарисовать в конце кривой Безье стрелку? Есть множество примеров как это сделать для прямой линии (1 , 2 , 3), но именно для кривой у меня не получается это сделать.

Есть такой код, но отрабатывает он как на гифке.

введите сюда описание изображения

xaml:

<Canvas>
  <Path x:Name="pathMain" Stroke="Blue" StrokeThickness="2"/>
</Canvas>

code-behind:

    public PolyLineSegment DrawArrow(Point a, Point b)
    {
        double HeadWidth = 10; // Ширина между ребрами стрелки
        double HeadHeight = 5; // Длина ребер стрелки

        double X1 = a.X;
        double Y1 = a.Y;

        double X2 = b.X;
        double Y2 = b.Y;

        double theta = Math.Atan2(Y1 - Y2, X1 - X2);
        double sint = Math.Sin(theta);
        double cost = Math.Cos(theta);

        Point pt3 = new Point(
            X2 + (HeadWidth * cost - HeadHeight * sint),
            Y2 + (HeadWidth * sint + HeadHeight * cost));

        Point pt4 = new Point(
            X2 + (HeadWidth * cost + HeadHeight * sint),
            Y2 - (HeadHeight * cost - HeadWidth * sint));

        PolyLineSegment arrow = new PolyLineSegment();
        arrow.Points.Add(b);
        arrow.Points.Add(pt3);
        arrow.Points.Add(pt4);
        arrow.Points.Add(b);

        return arrow;
    }

    private void DrawLine(MouseEventArgs e)
    {
        Point endPoint = e.GetPosition(this);

        PathFigure pathFigure = new PathFigure
        {
            StartPoint = new Point(800, 500),
            IsClosed = false
        };

        //Кривая Безье
        Vector vector = endPoint - pathFigure.StartPoint;
        Point point1 = new Point(pathFigure.StartPoint.X + vector.X / 2, pathFigure.StartPoint.Y);
        Point point2 = new Point(pathFigure.StartPoint.X + vector.X / 1.5, pathFigure.StartPoint.Y + vector.Y/ 0.95);
        BezierSegment curve = new BezierSegment(point1, point2, endPoint, true);


        PolyLineSegment arrow  = DrawArrow(pathFigure.StartPoint, endPoint);
        PathGeometry path = new PathGeometry();
        path.Figures.Add(pathFigure);
        pathFigure.Segments.Add(curve);
        pathFigure.Segments.Add(arrow);
        pathMain.Data = path;
    }

Если DrawArrow(point2, endPoint) вместо DrawArrow(pathFigure.StartPoint, endPoint);, то отрабатывает так: введите сюда описание изображения

10
  • А вы пробовали DrawArrow(point2, endPoint) вместо DrawArrow(pathFigure.StartPoint, endPoint);?
    – VladD
    20 ноя 2016 в 20:38
  • @VladD, Попробовал. Когда перемещение идет вдоль оси Y, то все выглядит более-менее, но при перемещении вдоль оси X происходит переворот стрелки. Дополнил ответ, посмотрите результат работы на гифке.
    – trydex
    20 ноя 2016 в 20:51
  • А может, так и правильно? Попробуйте ещё выводить ломаную из 4 опорных точек для наглядности.
    – VladD
    20 ноя 2016 в 23:05
  • 1
    А вы попробуйте вывести одновременно и ломанную, и кривую. (Или бросьте в меня компилируемым примером.)
    – VladD
    21 ноя 2016 в 8:10
  • 1
    Посмотрите в обновление ответа
    – VladD
    24 ноя 2016 в 7:32

1 ответ 1

22
+50

Я дорисовал опорные точки к вашей кривой (красная ломаная на анимации):

анимашка

Дело в том, что стрелка показывает правильно: направление последнего сегмента опорной линии. Стрелка и правда показывает направление касательной в крайней точке. Но ваше вычисление промежуточных точек делает слишком большой излом, поэтому видимое направление кривой слишком отличается от направления касательной.

Попробуйте поменять алгоритм выбора промежуточных точек, проблема, думаю, в нём. (Не могу предложить свой алгоритм, потому что не знаю, какая ваша задача.)


По поводу алгоритма, вот такой код ведёт себя намного лучше:

var startPoint = pathFigure.StartPoint;
//Кривая Безье
Vector vector = endPoint - startPoint;
Point point1 = new Point(startPoint.X + 3 * vector.X / 8, startPoint.Y + 1 * vector.Y / 8);
Point point2 = new Point(startPoint.X + 5 * vector.X / 8, startPoint.Y + 7 * vector.Y / 8);

ещё одна


Вот на всякий случай полный пример:

MainWindow.xaml:

<Canvas Background="Transparent"
        MouseLeftButtonDown="OnMouseLeftButtonDown"
        MouseLeftButtonUp="OnMouseLeftButtonUp"
        MouseMove="OnMouseMove">
    <Path x:Name="pathMain" Stroke="Blue" StrokeThickness="2"/>
</Canvas>

MainWindow.xaml.cs:

public partial class MainWindow : Window
{
    public MainWindow()
    {
        InitializeComponent();
    }

    public PolyLineSegment DrawArrow(Point a, Point b)
    {
        double HeadWidth = 10; // Ширина между ребрами стрелки
        double HeadHeight = 5; // Длина ребер стрелки

        double X1 = a.X;
        double Y1 = a.Y;

        double X2 = b.X;
        double Y2 = b.Y;

        double theta = Math.Atan2(Y1 - Y2, X1 - X2);
        double sint = Math.Sin(theta);
        double cost = Math.Cos(theta);

        Point pt3 = new Point(
            X2 + (HeadWidth * cost - HeadHeight * sint),
            Y2 + (HeadWidth * sint + HeadHeight * cost));

        Point pt4 = new Point(
            X2 + (HeadWidth * cost + HeadHeight * sint),
            Y2 - (HeadHeight * cost - HeadWidth * sint));

        PolyLineSegment arrow = new PolyLineSegment();
        arrow.Points.Add(b);
        arrow.Points.Add(pt3);
        arrow.Points.Add(pt4);
        arrow.Points.Add(b);

        return arrow;
    }

    private void DrawLine(MouseEventArgs e, UIElement host)
    {
        PathFigure pathFigure = ((PathGeometry)pathMain.Data).Figures[0];
        Point startPoint = pathFigure.StartPoint;
        Point endPoint = e.GetPosition(host);

        //Кривая Безье
        Vector vector = endPoint - startPoint;
        Point point1 = new Point(startPoint.X + 3 * vector.X / 8,
                                 startPoint.Y + 1 * vector.Y / 8);
        Point point2 = new Point(startPoint.X + 5 * vector.X / 8,
                                 startPoint.Y + 7 * vector.Y / 8);

        BezierSegment curve = new BezierSegment(point1, point2, endPoint, true);
        PolyLineSegment arrow  = DrawArrow(point2, endPoint);

        pathFigure.Segments.Clear();
        pathFigure.Segments.Add(curve);
        pathFigure.Segments.Add(arrow);
    }
    private UIElement currentHost;
    private void OnMouseLeftButtonDown(object sender, MouseButtonEventArgs e)
    {
        var host = (UIElement)sender;
        currentHost = host;
        Mouse.Capture(host);
        Point startPoint = e.GetPosition(host);
        PathFigure pathFigure = new PathFigure
        {
            StartPoint = startPoint,
            IsClosed = false
        };

        pathMain.Data = new PathGeometry() { Figures = { pathFigure } };
        DrawLine(e, currentHost);
    }

    private void OnMouseLeftButtonUp(object sender, MouseButtonEventArgs e)
    {
        Mouse.Capture(null);
        DrawLine(e, currentHost);
        currentHost = null;
    }

    private void OnMouseMove(object sender, MouseEventArgs e)
    {
        if (currentHost != null)
            DrawLine(e, currentHost);
    }
}
8
  • 1
    А если не использовать касательную? Просто взять конец кривой, точку на кривой на некотором расстоянии от него и по ним нарисовать треугольник?
    – Qwertiy
    22 ноя 2016 в 22:31
  • @VladD, Моя задача немногим отличается от примера. Есть кубики на канвасе, которые можно соединять такими стрелками. То есть стрелка вытягивается из кубика при Drag'n'Drop. Который день безуспешно бьюсь над этой задачей. Был бы благодарен Вам за алгоритм.
    – trydex
    23 ноя 2016 в 0:08
  • @maxwell это не объясняет зачем у вас выбираются такие странные промежуточные точки. Сделайте лучше последний сегмент тоже горизонтальным, как первый - будет намного лучше. 24 ноя 2016 в 3:13
  • @PavelMayorov, Нужна именно S-образная кривая, поэтому такие точки.
    – trydex
    24 ноя 2016 в 3:37
  • 1
    @maxwell пожалуйста, прочитайте ответ VladD еще раз 24 ноя 2016 в 5:20

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.