Рисование мышкой фигур на элементе wpf

#c_sharp #wpf

Можно ли реализовать отрисовку различных фигур с помощью мышки на каком-то элементе
управления, например на этом:  




Данный элемент это LiveChart. Можно ли на примере прямоугольника показать, как реализовать
отрисовку фигур мышкой? 
    

Ответы

Ответ 1

Ну вот вам пример. Учтите, что это не самый хороший пример, т. к. информация о том,
что нарисовано, не уходит на уровень данных, а остаётся лишь в UI, как в WinForms.

UI будет очень простой. Мы будем рисовать на Canvas'е, т. к. он не двигает элементы
и не производит никакого layout management'а, так что потом будет легко двигать уже
нарисованные элементы по нему.

У Canvas'а добавим Background (чтобы он реагировал на мышь) и подпишемся на нажатие/отпускание/перемещение
мыши:




Теперь code-behind. Для начала, нам понадобится флаг, который будет говорить о том,
мы в данный момент рисуем или нет.

bool isDrawing = false;


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

void DrawingMouseDown(object sender, MouseButtonEventArgs e)
{
    Mouse.Capture(DrawingTarget);
    isDrawing = true;
    StartFigure(e.GetPosition(DrawingTarget));
}


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

void DrawingMouseMove(object sender, MouseEventArgs e)
{
    if (!isDrawing)
        return;
    AddFigurePoint(e.GetPosition(DrawingTarget));
}


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

void DrawingMouseUp(object sender, MouseButtonEventArgs e)
{
    AddFigurePoint(e.GetPosition(DrawingTarget));
    EndFigure();
    isDrawing = false;
    Mouse.Capture(null);
}


Нам осталось реализовать собственно рисующие методы StartFigure, AddFigurePoint и
EndFigure. Можно рисовать по-всякому, и наверное, рисование при помощи Polyline было
бы на две строки проще. Но давайте рисовать при помощи Path для разнообразия.

Для начала немного теории. Path состоит из множества фигур (Figure). У нас будет
одна фигура. Каждая фигура, в свою очередь, состоит из множества сегментов (Segment).
Сегменты бывают разные, но мы возьмём просто линейный сегмент, соединяющий предыдущую
точку с новой. Текущую фигуру мы будем запоминать в переменной, чтобы добавлять к ней
точки.

PathFigure currentFigure;


Самый сложный код — StartFigure, нам нужно создать новую фигуру и добавить её на Canvas.

void StartFigure(Point start)
{
    currentFigure = new PathFigure() { StartPoint = start };
    var currentPath =
        new Path()
        {
            Stroke = Brushes.Red,
            StrokeThickness = 3,
            Data = new PathGeometry() { Figures = { currentFigure } }
        };
    DrawingTarget.Children.Add(currentPath);
}


Добавление новой точки делается очень просто:

void AddFigurePoint(Point point)
{
    currentFigure.Segments.Add(new LineSegment(point, isStroked: true));
}


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

void EndFigure()
{
    currentFigure = null;
}


Получаем вот такой результат:





Чтобы делать совсем правильно, вам нужно освоить MVVM и передавать информацию в VM-уровень,
например, как это реализовано тут: Drag & Drop с предпросмотром.