您的位置: 首页  >  文章  >  XAML 高级绘图

XAML 高级绘图

分类: 文章 • 2024-10-14 16:06:34

作者：王福驰

撰写时间：2019年 5月1日

开发工具与关键技术：XAML、WPF

 

XAML的高级用法主要有四种：

第一种资源和样式、第二种图像处理、第三种高级绘图、第四种动画

在XAML的高级用法一的时候已经讲了资源样式和图像处理，接着讲高级绘图

主要有形状绘图和几何绘图

形状绘图和几何绘图区别：

形状绘图可以独立存在，可以独立绘制出具体需要的图形，

几何图形对象没有具体的形体，他需要依赖于某一对象元素而存在，不能直接呈现在画板上。

一、形状绘图和几何绘图

1、形状绘图

形状是一个2D绘图类，位于System.Windows.Shape空间内

最常用的绘图对象有：Line 直线、Rectangle矩形、Ellipse椭圆、Polygon多边形、

Path路径

  1. 绘画直线

<Canvas Grid.Row="0" Grid.Column="0" Margin="0,-20,0.4,20" HorizontalAlignment="Center" VerticalAlignment="Center">

            <Line Grid.Row="0" Grid.Column="0" X1="50" Y1="50" X2="5" Y2="50" Stroke="Red" StrokeThickness="5" Height="58" Width="60" Canvas.Top="-26" Canvas.Left="-36"></Line>

</Canvas>

  1. 修改直线形状

<Canvas Grid.Row="0" Grid.Column="1">

<Line Grid.Row="0" X1="60" Y1="50" X2="20" Y2="50" Stroke="Red" StrokeThickness="30" Grid.Column="1" StrokeStartLineCap="Triangle" StrokeEndLineCap="Flat" Canvas.Left="-9" Canvas.Top="-15"></Line>

</Canvas>

  1. 矩形

<Rectangle Grid.Row="0" Grid.Column="2" Width="50" Height="50" Fill="Blue" Stroke="Red" StrokeThickness="2" Margin="9.6,13,16.4,5" ></Rectangle>

  1. 绘制圆角矩形

<Rectangle  Grid.Row="0" Grid.Column="3" Width="50" Height="50" Fill="Blue" Stroke="Red" StrokeThickness="3" RadiusX="15" RadiusY="50"></Rectangle>

  1. 椭圆

<Ellipse Grid.Row="1" Grid.Column="0" Fill="Yellow" Height="25" Width="50" StrokeThickness="2" Stroke="Red"></Ellipse>

  1. 多边形

<Canvas Grid.Row="1" Grid.Column="1">

<Polygon Grid.Row="1" Points="50,25 75,6 75,43 50,25"  Stroke="Purple" Fill="Red" StrokeThickness="2" HorizontalAlignment="Center" VerticalAlignment="Center" Grid.ColumnSpan="2" Canvas.Left="-23" Canvas.Top="11"/>

</Canvas>

  1. 多线型

<Canvas Grid.Row="1" Grid.Column="1" Grid.ColumnSpan="2" Margin="59.6,20,16.4,49.2" Grid.RowSpan="2">

<Polyline Grid.Column="2" Grid.Row="1" Points="30,5 75,5 75,30 50,30" Stroke="Red" StrokeThickness="5" Fill="Orange"></Polyline>

</Canvas>

  1. 路径绘图

Path类可以绘制曲线和复杂形状

Data属性使用mini-language，即路径标记语法

<Canvas Grid.Row="1" Grid.Column="3">

            <Path Grid.Column="3" Grid.Row="1" Stroke="Red" StrokeThickness="3" Data="M 25,50 C 25,21 100,90 100,50"   

 HorizontalAlignment="Right" VerticalAlignment="Top" Stretch="Fill"  Canvas.Top="19.2" >

</Path>

</Canvas>

  1. 几何绘图

几何绘图包过5种对象

LineGeometry：确定两点绘制一条线

XAML代码

<Canvas Grid.Row="2" Grid.Column="0">

            <Path Grid.Row="2" Grid.Column="0" Fill="Orange" Stroke="Red"

StrokeThickness="5" Canvas.Top="10" Canvas.Left="10">

            <Path.Data>

                    <LineGeometry StartPoint="10,10" EndPoint="50,50"/>

                </Path.Data>

            </Path>

</Canvas>

RectangGeometry：绘制矩形的几何图形

XAML代码

<Canvas Grid.Row="2" Grid.Column="1">

            <Path Fill="Orange" Stroke="Red" StrokeThickness="5" Height="50.8"

Stretch="Fill" Width="56.4" RenderTransformOrigin="0.655,0.581" Canvas.Left="10" Canvas.Top="8.8">

            <Path.Data> 

<RectangleGeometry Rect="100,50,100,50"/>

             </Path.Data>

</Path>

</Canvas>

EllipseGeometry：绘制椭圆的几何图形

<Canvas Grid.Row="2" Grid.Column="2">

            <Path Fill="Orange" Stroke="Red" StrokeThickness="5"  Stretch="Fill" Canvas.Left="5" Canvas.Top="2.2" >

                <Path.Data>

                    <EllipseGeometry Center="100,100" RadiusX="30" RadiusY="25"/>

                </Path.Data>

            </Path>

</Canvas>

GeometryGrope：组合几何图像，将多个单一的几何图像组合成一个几何图像

<Canvas Grid.Row="2" Grid.Column="3">

            <Path Fill="Orange" Stroke="Red" StrokeThickness="5">

                <Path.Data>

                    <GeometryGroup FillRule="EvenOdd">

                        <LineGeometry StartPoint="20,10" EndPoint="50,40"/>

                        <EllipseGeometry Center="25,35" RadiusX="20"  RadiusY="25"/>

                        <RectangleGeometry Rect="15,27 50 15"/>

                    </GeometryGroup>

                </Path.Data>

            </Path>

</Canvas>

PathGeometry：路径几何图像

<Canvas Grid.Row="3" Grid.Column="0">

            <Path Fill="Orange" Stroke="Red" StrokeThickness="5">

                <Path.Data>

                    <PathGeometry>

                        <PathFigure StartPoint="5,25">

                            <LineSegment Point="70,50"/>

                        </PathFigure>

                    </PathGeometry>

                </Path.Data>

            </Path>

        </Canvas>

XAML 高级绘图

 

二、动画

在写XAML用法 一前已经写了XAML的动画，

主要：线性插值动画和关键帧动画。

三、加一个画刷

  画刷种类有四种：

SolidColorBrush：单色实线画刷

<Canvas Grid.Row="3" Grid.Column="1">

            <Rectangle Width="76" Height="67">

                <Rectangle.Fill><SolidColorBrush Color="Red"></SolidColorBrush>

            </Rectangle.Fill>

            </Rectangle>

  </Canvas>

LinearGradientBrush：线性渐变画刷

<Canvas Grid.Row="3" Grid.Column="2">

            <Rectangle Width="76" Height="67">

                <Rectangle.Fill>

                    <LinearGradientBrush StartPoint="0,0" EndPoint="1,1">

                        <GradientStop Color="Yellow" Offset="0.0"/>

                        <GradientStop Color="Red" Offset="0.25"/>

                        <GradientStop Color="Blue" Offset="0.75"/>

                        <GradientStop Color="LimeGreen" Offset="1.0"/>

                    </LinearGradientBrush>

                </Rectangle.Fill></Rectangle></Canvas>

ImageBrush：图像画刷

<Canvas Grid.Row="3" Grid.Column="3">

            <Rectangle Width="76" Height="67">

                <Rectangle.Fill><ImageBrush ImageSource="E:\图片\海贼王\017a4be04d8c996c00321eeda39adac9.jpg"></ImageBrush></Rectangle.Fill>

            </Rectangle>

        </Canvas>

RedialGiadientBrush：径向渐变画刷

相关推荐