WPF中的路径和集合图形

1. 直线、矩形和椭圆

<Grid Margin="10" >
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto"></RowDefinition>
        <RowDefinition></RowDefinition>
        <RowDefinition></RowDefinition>
        <RowDefinition></RowDefinition>
    </Grid.RowDefinitions>
    <Rectangle Fill="Yellow" Stroke="Blue" Height="80" Width="250"></Rectangle>
    <Path Grid.Row="1" Fill="Yellow" Stroke="Blue">
        <Path.Data>
            <RectangleGeometry Rect="111 25 250 80"></RectangleGeometry>
        </Path.Data>
    </Path>
    <Path Grid.Row="2" Fill="Yellow" Stroke="Blue">
        <Path.Data>
            <LineGeometry StartPoint="15 15" EndPoint="120 15"></LineGeometry>
        </Path.Data>
    </Path>
    <Path Grid.Row="3" Fill="Yellow" Stroke="Blue">
        <Path.Data>
            <EllipseGeometry Center="200 30" RadiusX="150" RadiusY="25"></EllipseGeometry>
        </Path.Data>
    </Path>
</Grid>

2. 使用GeometryGroup组合形状

<Window.Resources>
    <GeometryGroup x:Key="GeometryGroup1" FillRule="Nonzero">
        <EllipseGeometry Center="200 150" RadiusX="100" RadiusY="50"></EllipseGeometry>
        <RectangleGeometry Rect="100 50 120 70"></RectangleGeometry>
    </GeometryGroup>
</Window.Resources>
<Grid Margin="10" >
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto"></RowDefinition>
        <RowDefinition Height="Auto"></RowDefinition>
        <RowDefinition Height="Auto"></RowDefinition>
    </Grid.RowDefinitions>
    <Path Fill="Yellow" Stroke="Blue" Grid.Row="0">
        <Path.Data>
            <GeometryGroup>
                <EllipseGeometry Center="200 150" RadiusX="100" RadiusY="50"></EllipseGeometry>
                <RectangleGeometry Rect="100 50 120 70"></RectangleGeometry>
            </GeometryGroup>
        </Path.Data>
    </Path>
    <Path Grid.Row="1" Fill="Yellow" Stroke="Blue" Data="{StaticResource GeometryGroup1}"></Path>
    <Path Grid.Row="2" Fill="Purple" Stroke="Green" Data="{StaticResource GeometryGroup1}"></Path>
</Grid>

3. 使用CombinedGeometry融合集合图形

Exclude 3 从第一个区域中除去第二个区域。 如果给出两个几何图形 AB,则从几何图形 B 的区域中除去几何图形 A 的区域,所产生的区域为 A-B
Intersect 1 通过采用两个区域的交集合并两个区域。 新的区域由两个几何图形之间的重叠区域组成。
Union 0 通过采用两个区域的并集合并两个区域。 所生成的几何图形为几何图形 A+ 几何图形 B
Xor 2 将在第一个区域中但不在第二个区域中的区域与在第二个区域中但不在第一个区域中的区域进行合并。 新的区域由 (A-B) + (B-A) 组成,其中 AB 为几何图形。

<Window.Resources>
    <CombinedGeometry x:Key="GeometryGroup1" GeometryCombineMode="Xor">
        <CombinedGeometry.Geometry1>
            <EllipseGeometry Center="200 150" RadiusX="100" RadiusY="50"></EllipseGeometry>
        </CombinedGeometry.Geometry1>
        <CombinedGeometry.Geometry2>
            <RectangleGeometry Rect="100 50 120 70"></RectangleGeometry>
        </CombinedGeometry.Geometry2>
    </CombinedGeometry>
</Window.Resources>
<Grid Margin="10" >
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto"></RowDefinition>
        <RowDefinition Height="Auto"></RowDefinition>
        <RowDefinition Height="Auto"></RowDefinition>
    </Grid.RowDefinitions>
    <Path Fill="Yellow" Stroke="Blue" Grid.Row="0">
        <Path.Data>
            <GeometryGroup>
                <EllipseGeometry Center="200 150" RadiusX="100" RadiusY="50"></EllipseGeometry>
                <RectangleGeometry Rect="100 50 120 70"></RectangleGeometry>
            </GeometryGroup>
        </Path.Data>
    </Path>
    <Path Grid.Row="1" Fill="Yellow" Stroke="Blue" Data="{StaticResource GeometryGroup1}"></Path>
    <Path Grid.Row="2" Fill="Purple" Stroke="Green" Data="{StaticResource GeometryGroup1}"></Path>
</Grid>

4. 使用PathGeometry绘制曲线和直线

<Grid Margin="10" >
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto"></RowDefinition>
        <RowDefinition Height="Auto"></RowDefinition>
        <RowDefinition Height="Auto"></RowDefinition>
    </Grid.RowDefinitions>
    <Path Stroke="Blue" Grid.Row="0">
        <Path.Data>
            <PathGeometry>
                <PathFigure StartPoint="10 10" IsClosed="True">
                    <LineSegment Point="100 100"></LineSegment>
                    <LineSegment Point="200 100"></LineSegment>
                </PathFigure>
            </PathGeometry>
        </Path.Data>
    </Path>
    <Path Stroke="Blue" Grid.Row="1">
        <Path.Data>
            <PathGeometry>
                <PathFigure StartPoint="10 10">
                    <ArcSegment Point="100 100" Size="100 65"></ArcSegment>
                    <ArcSegment Point="200 100" Size="65 65" IsLargeArc="True"></ArcSegment>
                </PathFigure>
            </PathGeometry>
        </Path.Data>
    </Path>
    <Path Stroke="Blue" Grid.Row="2">
        <Path.Data>
            <PathGeometry>
                <PathFigure StartPoint="10 10">
                        <BezierSegment Point1="130 30" Point2="40 140" Point3="150 150"></BezierSegment>
                    </PathFigure>
            </PathGeometry>
        </Path.Data>
    </Path>
</Grid

5. 微语言几何图形

<Path Stroke="Blue" Grid.Row="0" Data="M10 100 L100 100 L200 50 Z"/>

6. 使用几何图形进行剪裁

<Window x:Class="项目10.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:sys="clr-namespace:System;assembly=mscorlib"
        xmlns:i="clr-namespace:System.Windows.Interactivity;assembly=System.Windows.Interactivity"
        xmlns:local="clr-namespace:项目10"
        mc:Ignorable="d"
        Title="MainWindow" Width="750" Height="350"  WindowStartupLocation="CenterScreen">
        <Window.Resources>
            <GeometryGroup x:Key="GroupClip" FillRule="Nonzero">
                <EllipseGeometry RadiusX="75" RadiusY="50" Center="100 150"></EllipseGeometry>
                <EllipseGeometry RadiusX="100" RadiusY="25" Center="200 150"></EllipseGeometry>
                <EllipseGeometry RadiusX="75" RadiusY="50" Center="140 140"></EllipseGeometry>
            </GeometryGroup>
        </Window.Resources>
<Grid Margin="10" >
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*"></ColumnDefinition>
        <ColumnDefinition Width="*"></ColumnDefinition>
    </Grid.ColumnDefinitions>
    <Button Clip="{StaticResource GroupClip}">A Button</Button>
        <Image Grid.Column="1" Clip="{StaticResource GroupClip}" Stretch="None"
               Source="Images/Chrysanthemum.jpg"/>
</Grid>
</Window>