в технологии пользовательского интерфейса,Рисование – это тема, которую невозможно обойти. WPF предоставляет разнообразные возможности обработки 2D-графики и изображений, которые можно оптимизировать в соответствии с требованиями приложения.,В том числе кисти (Brush), Форма, Геометрия, Рисунок и трансформация (Transform) и т.д. Среди них Форма, Геометрия и Рисунок берут на себя основные функции рисования.,Форма проста в использовании,Но это требует относительно больше ресурсов,Геометрия и Рисунок светлее.

Что такое фигуры, геометрические фигуры и картинки?

В WPF,Форма — это примитив рисования, специально используемый для изображения линий, эллипсов, прямоугольников и многоугольников.,Может быть нарисован на окне или элементе управления. Геометрия определяет такие детали, как координаты и размеры формы (это можно понимать только как контур линии).,Невозможно нарисовать непосредственно в окнах и элементах управления. Рисунок добавляет штрихи, стили обводки и детали заливки для рисования графики на основе геометрических фигур.,Его также нельзя отобразить непосредственно в окнах и элементах управления.

Форма

Все формы в WPF являются производными от FrameworkElement.,Так что это тоже элемент пользовательского интерфейса,Предоставляет практические функции, такие как макет и обработка событий.,Может поддерживать события, как и другие элементы,Может реагировать на фокус, события клавиатуры и мыши. Форма добрый – это абстрактный добрый.,Он не может выполнять какую-либо работу сам по себе.,Но он определяет свойства, связанные с кистью для рисования контуров и заливки фона.,включатьFill、Stroke、StrokeThickness、StrokeStartLineCap、StrokeDashArray、StrokeLineJoinждать。Конкретная чертежная работа состоит из следующих подразделов:добрый Заканчивать：

• Line Рисовать прямолинейные элементы,Линии — простейшие графические элементы.,Используйте два атрибута X1 и Y1 в качестве координат начальной точки.,X2、Два атрибута Y2 служат координатами конечной точки. Атрибут Stroke задает кисть для рисования прямых линий (Brush), Свойство Fill, унаследованное от базы, добрый(Shape) не работает

<Line Stroke="#0000ff" StrokeThickness="3" X1="30" X2="70" Y1="150" Y2="150" />

• Rectangle рисоватьпрямоугольникэлементы,Нарисуйте прямоугольную рамку обводкой (Stroke),Используйте «Заливку», чтобы нарисовать цвет фона.,Должно быть установлено хотя бы одно из этих двух свойств.,В противном случае прямоугольник не будет нарисован. Свойства Width и Height, унаследованные от FrameworkElement, определяют ширину и высоту.,Значение по умолчанию — «Авто», которое заполняет доступную ширину или высоту. Rectangleдобрый добавляет два атрибута: RadiusX и RadiusY.,Эти два свойства можно использовать для установки закругленных углов.,Вы даже можете нарисовать эффект эллипса. Так как прямоугольник — замкнутая фигура,Таким образом, свойства StrokeStartLineCap и StrokeEndLineCap, унаследованные от базового доброго(Shape), не действуют.

<Rectangle Width="80" Height="60" Fill="AliceBlue"/>

• Ellipse Нарисуйте эллипс. Использование такое же, как и у прямоугольника. Эллипс одинаковой длины и ширины представляет собой круг.

<Ellipse Width="80" Height="60" Fill="AliceBlue"/>

• Polyline Нарисуйте полилинию, состоящую из нескольких отрезков прямых, соединенных концами. Укажите последовательность координат X и Y с помощью свойства Points. Хотя Полилиния является незамкнутой фигурой, если установлено свойство Заливка, замкнутый интервал, образованный невидимым сегментом виртуальной линии, образованным последней точкой соединения и начальной точкой в ​​свойстве Точки, и полилиния, нарисованная Полилинией, также будет заполненный.

<Polyline Fill="red" FillRule="Nonzero" Points="10,10 10,100 100,100 150,50" Stroke="Blue" StrokeThickness="3"/>

• Polygon Нарисуйте многоугольник, похожий на полилинию, с несколькими сегментами прямых линий, образующими замкнутую область. Единственное отличие от Polyline заключается в том, что Polygon соединит последнюю точку соединения в свойстве Points с начальной точкой.

<Polygon Fill="red" FillRule="Nonzero" Points="10,10 10,100 100,100 150,50" Stroke="Blue" />

• Path рисовать路径,это самый гибкий график,Он может состоять из одной или нескольких прямых линий, дуг и кривых Безье. Pathдобрый определяет нарисованную фигуру через свойство Data. Добрый тип свойства Data — Геометриядобрый.,Это Геометрия, о которой я расскажу дальше.

Геометрия

Как упоминалось ранее, Геометрия определяет координаты и размеры фигуры.,Но его нельзя нарисовать непосредственно в окнах и элементах управления.,Атрибут Data элемента формы Path — Geometrydobry.,Это верно,Геометрия используется в сочетании с формой пути.из。 Как и класс Shape, класс Geometry также является абстрактным классом, и определение конкретных фигур реализуется через его подклассы. Подклассы класса Geometry включают:

• LineGeometry Геометрическая фигура прямой линии, эквивалентная форме линии.
• RectangleGeometry Прямоугольная геометрия, как и форма «Прямоугольник», может иметь закругленные углы.
• EllipseGeometry Геометрия эллипса, эквивалентная форме эллипса.
• GeometryGroup Группа геометрических фигур образуется путем объединения нескольких Геометрия.,Реализация добавления любого количества Геометрий в один путь (Path),Вы можете использовать правила заполнения EvenOdd или NonZero, чтобы определить область, подлежащую заполнению.,Правило заполнения по умолчанию — EvenOdd.
• CombinedGeometry Объедините две геометрии в одну фигуру. Вы можете выбрать способ объединения двух геометрий с помощью свойства JointMode.
• PathGeometry Представляет более сложную графику, состоящую из дуг, кривых и сегментов прямых линий, и может быть замкнутой или незамкнутой.
• StreamGeometry ЭквивалентноPathGeometryиз只读轻量级добрый。StreamGeometryиз优点是可к节省内存,Потому что он не держит в памяти все отдельные сегменты пути. Недостаток заключается в том, что однажды созданный файл невозможно изменить.,И он не поддерживает привязку, анимацию и другие функции.

LineGeometry、RectangleGeometry、EllipseGeometryи前边介绍изLine、Rectangle、EllipseФорма соответствия,Он также прост в использовании. Возьмите прямоугольник в качестве примера,описание xaml с использованием прямоугольника:

<Rectangle Width="80" Height="60" Fill="AliceBlue"/>

Описание xaml использования Path в сочетании с RectangleGeometry:

<Path Fill="AliceBlue">
    <Path.Data>
        <RectangleGeometry Rect="0,0 80,60"/>
    </Path.Data>
</Path>

GeometryGroup

Кажется, что использовать Геометрию для рисования и написания кода более громоздко.,Геометрия, упомянутая в начале, легче.,占用资源更少из优点并没有体现出来。接下来要介绍изGeometryGroup则能很好из体现出Геометрия Преимущество в том, что он легче。 Например, чтобы нарисовать медную монету с кругом снаружи и квадратом внутри, используйте xaml-описание Форма:

<Grid>
    <Ellipse Width="50" Height="50" Fill="AliceBlue" Stroke="Blue"/>
    <Rectangle Width="20" Height="20" Stroke="Blue" Fill="Transparent"/>
</Grid>

использоватьGeometryGroupизxamlописывать：

<Path Stroke="Blue" Fill="AliceBlue">
    <Path.Data>
        <GeometryGroup>
            <EllipseGeometry Center="25 25" RadiusX="25" RadiusY="25" />
            <RectangleGeometry Rect="15 15 20 20"/>
        </GeometryGroup>
    </Path.Data>
</Path>

Два вышеуказанных метода позволяют достичьдобрыйпохожийиз视觉效果。第一种方法использовать了EllipseиRectangleдваUIэлемент,Второй вариант использует только одинPathэлемент,Это означает сокращение накладных расходов на элемент пользовательского интерфейса. в целом,один содержитNиндивидуальный Геометрияиз Форма СравниватьNиндивидуальный Форма直接进行рисовать图案из性能要好。потому что Форма Получено изFrameworkElementдобрый,Требуются накладные расходы на поддержание макета, событий и других функций.,Геометрия не требуется. Эта разница не очевидна в окне, состоящем всего из нескольких десятков фигур.,Но для окон, требующих сотен или тысяч форм,Эту разницу в производительности стоит учитывать.

GeometryGroupсуществовать性能上优于多индивидуальный Формаиз组合,Но нет возможности задать обводку, заливку и регистрацию событий для каждой Геометрии.,Менее гибкий.

CombinedGeometry

GeometryGroup可к Пучок多индивидуальный Геометрия组合成复杂из图形,Однако когда границы нескольких графических изображений перекрываются,可能无法得到预期из效果。这индивидуальный时候可киспользоватьCombinedGeometryПриходите и разберитесь с этим。CombinedGeometry用于Пучокдва重叠существовать一起из Геометрия合并成一индивидуальный,проходитьGeometry1иGeometry2свойство提供需要合并из Геометрия,хотяCombinedGeometry只能合并два Геометрия,Но вы можете объединить Геометрию, полученную после слияния, с третьей.,с этимдобрый推可к实现多индивидуальный几何图形из合并。GeometryCombineModeсвойство定义了合并из方式,GeometryCombineMode枚举有к下四индивидуальный值:

Используя концепцию множеств в математике, объединения, пересечения и исключения можно понимать как множества объединения, пересечения и разности. На следующем рисунке показана разница между четырьмя методами слияния (объединенное изображение заполняется отступами, обозначающими область, включенную после слияния).

image

PathGeometry

Все предыдущие методы используют встроенный рисунок или комбинацию Геометрия WPF для определения фигур.,PathGeometry则提供更小粒度изрисоватьэлементPathSegment,PathSegment可к表示几何图形中из一段直线、дуга или кривая Безье,PathSegment是一индивидуальный抽象добрый,Конкретный рисунок реализуется его производным добрым.

использоватьPathGeometryСоздать путь легко,кLineSegmentНапример。существоватьPathGeometryизPathFigureУстановить в свойствахStartPointв качестве отправной точки,并增加一индивидуальныйLineSegment,ЧтоPointсвойство表示Должен条线段из结束点к及下一条线段из起点。

<Path Stroke="Blue">
    <Path.Data>
        <PathGeometry>
            <PathFigure StartPoint="50 100">
                <LineSegment Point="100 100"/>
                <LineSegment Point="100 50"/>
            </PathFigure>
        </PathGeometry>
    </Path.Data>
</Path>

Если вы хотите нарисовать несколько прерывистых сегментов линий,则использоватьPathFiguresсвойство,существовать Что中添加多индивидуальныйPathFiguresВот и все。

<Path Stroke="Blue">
    <Path.Data>
        <PathGeometry>
            <PathGeometry.Figures>
            <PathFigure StartPoint="50 100">
                <LineSegment Point="100 100"/>
                <LineSegment Point="100 50"/>
            </PathFigure>
                <PathFigure StartPoint="150 50">
                    <LineSegment Point="150 100"/>
                    <LineSegment Point="100 150"/>
                </PathFigure>
            </PathGeometry.Figures>
        </PathGeometry>
    </Path.Data>
</Path>

StreamGeometry

иPathGeometryдобрый Такой же,StreamGeometry可к定义包含曲线、弧线и直线из复杂几何图形。иPathGeometry不同из是,StreamGeometryиз内容不支持数据绑定、Анимация или модификация. Рекомендуется, когда вам нужно описать сложную геометрию, но вы не хотите нести накладные расходы на поддержку привязки данных, анимации или модификации. StreamGeometry。потому чтоStreamGeometryдобрыйиз高效性,Должендобрый是описывать装饰器из不错选择。к下是StreamGeometry实现и上文中PathGeometryрисовать多индивидуальный不连续线段同样效果из代码：

<Path Stroke="Blue" Data="M50,100 L100,100 100,50 M150,50 L150,100 100,150"/>

существовать给Dataсвойствокопироватьиз时候,是использовать几何图形微语言(Geometry mini-language)创建了一индивидуальныйStreamGeometry。示例中из几何图形微语言包含了6инструкции。第一инструкции(M50,100) Создал PathFigure и установил начальную точку (50).,100), следующая инструкция (L100,100 100,50) на самом деле (L100,100 Сокращенно от L100,50), это команда, которая создает два сегмента прямой линии и устанавливает конечную точку каждого сегмента. Четвертая инструкция (M150,50) создает PathFigure и устанавливает начальную точку (150,50). Следующие инструкции представляют собой две инструкции для создания сегментов прямой линии.

几何图形微语言通常是иStreamGeometry一起использовать,но неStreamGeometryиз专属。WPF中有двадобрый可киспользовать几何图形微语言：StreamGeometryиPathFigureCollection。существовать设置PathGeometryизFiguresсвойство时,可кпроходитьPathFigureCollectionиспользовать几何图形微语言。

<Path Stroke="Blue" >
    <Path.Data>
        <PathGeometry Figures="M50,100 L100,100 100,50 M150,50 L150,100 100,150" />
    </Path.Data>
</Path>

Рисунок

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

Рисунок также является абстрактным добрым, а конкретную работу по описанию векторной графики или растровых изображений завершает его производное добрый. К таким добрым относятся

и Геометриядобрыйпохожий,Рисунок также не может рисовать себя в окне или элементе управления. чтобы показать фотографии,WPF предоставляет следующие три добрых.

Рисование Изображение и Рисование Кисть

DrawingImageиDrawingBrushВсе включеноDrawingсвойство,Это позволяет использовать меньше ресурсов для рисования векторной графики или растровых изображений. Например, нарисуйте кнопку закрытия,可к先用PathGeometry定义一индивидуальныйXиз几何图形,然后用这индивидуальный几何图形дляGeometryDrawingизGeometryсвойство Назначение,Использовать немедленноDrawingBrushПучокGeometryDrawingИнкапсулирован в виде кисти,для按钮изBackgroundНазначение。

<Button Width="16" Height="16" BorderBrush="Transparent">
    <Button.Background>
        <DrawingBrush>
            <DrawingBrush.Drawing>
                <GeometryDrawing Brush="Red">
                    <GeometryDrawing.Geometry>
                        <PathGeometry Figures="M562.281173 510.800685l294.996664-293.466821c13.94971-13.878079 14.020318-36.367279 0.14224-50.316989-13.913894-13.984503-36.367279-14.020318-50.316989-0.14224L512.034792 460.377272 219.528855 166.982082c-13.842263-13.878079-36.367279-13.94971-50.316989-0.071631-13.913894 13.878079-13.948687 36.403095-0.071631 50.352805L461.576587 510.587837 166.721139 803.876604c-13.94971 13.878079-14.020318 36.367279-0.14224 50.316989 6.939039 6.974855 16.084327 10.497075 25.229614 10.497075 9.073656 0 18.148335-3.451612 25.087375-10.354835l294.926056-293.360398 295.17472 296.064996c6.939039 6.974855 16.048511 10.462283 25.193799 10.462283 9.109472 0 18.184151-3.487428 25.12319-10.390651 13.913894-13.878079 13.94971-36.367279 0.071631-50.316989L562.281173 510.800685z"/>
                    </GeometryDrawing.Geometry>
                </GeometryDrawing>
            </DrawingBrush.Drawing>
        </DrawingBrush>
    </Button.Background>
</Button>

DrawingVisual

DrawingVisual是一индивидуальный轻量级绘图добрый,Используется для рендеринга фигур, изображений или текста.,Поскольку макет, ввод, фокус и обработка событий не поддерживаются.,Таким образом, производительность рисования лучше. Можно использовать для рисования фона.,Или график пульса. использоватьDrawingVisualВо время рисования,需要一индивидуальный Получено изFrameworkElementдобрыйизобъект Предоставляет изображения в качестве хост-контейнера.。这индивидуальный宿主容器добрый负责管理ЧтоDrawingVisualобъектиз集合,并проходить重写FrameworkElementизк下двасвойстводляWPF提供需要рисоватьиз内容。

• GetVisualChild：отVisualобъект集合中返回指定索引处изVisualобъект。
• VisualChildrenCount: получает количество видимых дочерних элементов внутри этого элемента.

public class MyVisualHost : FrameworkElement
{
    // Создайте коллекцию визуальных объектов.
    private VisualCollection _children;

    public MyVisualHost()
    {
        _children = new VisualCollection(this);
        _children.Add(CreateDrawingVisualRectangle());
        _children.Add(CreateDrawingVisualText());
        _children.Add(CreateDrawingVisualEllipses());

        // Регистрация обработчика событий MouseLeftButtonUp
        this.MouseLeftButtonUp += new System.Windows.Input.MouseButtonEventHandler(MyVisualHost_MouseLeftButtonUp);
    }

    // Переопределите член VisualChildrenCount, чтобы указать количество видимых дочерних элементов в этом элементе пользовательского интерфейса (размещающем контейнере).
    protected override int VisualChildrenCount
    {
        get { return _children.Count; }
    }

    // Переопределить метод GetVisualChild, чтобы он возвращал объект Visual по указанному индексу.
    protected override Visual GetVisualChild(int index)
    {
        if (index < 0 || index >= _children.Count)
        {
            throw new ArgumentOutOfRangeException();
        }

        return _children[index];
    }
}

上面代码中существовать宿主容器добрыйиз构造方法里给Visualобъектиз集合添加了三индивидуальныйDrawingVisual объект。接下来кCreateDrawingVisualRectangleНапример介绍DrawingVisualобъектиз创建。DrawingVisualдобрый Нет графического контента,需要проходитьRenderOpenСпособ полученияDrawingContextобъект,и рисуйте внутри него, чтобы добавить текст, графику или изображение.,DrawingContext提供了рисовать直线、прямоугольник、овал、Ряд методов, таких как текст и геометрические фигуры. Использование аналогично рисованию GDI+ в Winform.

private DrawingVisual CreateDrawingVisualRectangle()
{
    DrawingVisual drawingVisual = new DrawingVisual();

    DrawingContext drawingContext = drawingVisual.RenderOpen();

    Rect rect = new Rect(new System.Windows.Point(160, 100), new System.Windows.Size(320, 80));
    drawingContext.DrawRectangle(System.Windows.Media.Brushes.LightBlue, (System.Windows.Media.Pen)null, rect);

    drawingContext.Close();

    return drawingVisual;
}

краткое содержание

• Форма как элемент пользовательского интерфейса в WPF,Обеспечивает удобные функции рисования.,А также практические функции, такие как макет, фокус и обработка событий.,Но рисовать сложную графику относительно сложно.,Производительность также относительно низкая.
• Геометрия используется в сочетании с формой пути.,Обеспечивает упрощенную реализацию для рисования фигур.,и получите лучшую производительность с меньшим количеством элементов пользовательского интерфейса.,Что中использовать几何图形微语言创建StreamGeometryиз方式可к像PathGeometryТакой же实现复杂из图形,И имеет лучшую производительность. Помимо рисования фигур,Также может использоваться для установки свойств клипа.,Обрежьте любой элемент пользовательского интерфейса. Но Геометрия определяет только форму (контур линии).,Его нельзя использовать непосредственно как кисть для рисования элементов пользовательского интерфейса.
• Рисунок содержит всю информацию, необходимую для отображения векторных или растровых изображений.,И может инкапсулировать Геометрию или растровое изображение в виде кисти.,дляUIэлемент设置Background、BorderBrushждатьсвойство。DrawingVisual作для一индивидуальный轻量级из图画добрый,Имеет лучшую производительность,Хороший выбор для сцен, требующих много работы по рисованию.