20120910 WPF图形基础

Shape类

shape类	说明
Line	坐标X1,X2绘制线条
Rectangule	指定Width和Height绘制矩形
Ellipse	绘制椭圆
Path	绘制一系列直线和曲线，Data属性为Geometry类型或其派生或者使用路径语标语法定义图形
Polygon	绘制由线段组成的封闭图形，多边形由一系列赋points属性point对象定义
Polyline	类似于Polygon但是不一定是封闭的

Geometry元素类似于形状，也有绘制形状的的元素：LineGeometry、EllipseGeometry和RectangleGeometry。

  <注>Sharp与Geometry的区别：

         1）Shape 是一个 FramworkElement可以用于把UIElement作为其子元素的任意类；FramworkElement派生于UIElement，形状参与系统布局，并呈现自身

         2）Geometry类不呈现自身，特征和开销也比shape少，它派生于Freeable类，可以在多个线程中共享。

CombineGeometry有Geometry1和Geometry2两个属性，使用CombinGemetryMode可以合并两个两个属性，常见模式有Union（合并）、Intersect（交集）、Xor（交集去反）和Exclude（集合的差，第一个图像减去第二个图像）；

<Grid>
     <Path Fill="Red" Stroke="Blue" StrokeThickness="2.5" >
         <Path.Data>
              <CombinedGeometry GeometryCombineMode="Union" >
                  <CombinedGeometry.Geometry1>
                     <EllipseGeometry Center="130,120" RadiusX="80" RadiusY="90" />
                  </CombinedGeometry.Geometry1>
                  <CombinedGeometry.Geometry2>
                      <RectangleGeometry Rect="40,160,180,80" />
                  </CombinedGeometry.Geometry2>
              </CombinedGeometry>
          </Path.Data>
      </Path>
</Grid>

Path 中常见的一些元素有：BezierSegment（贝塞尔曲线）、PolyBezierSegment（多条贝塞尔曲线）、QuadraticBezierSegment（二次贝塞尔曲线）、PolyQuadraticBezierSegment（多条二次贝塞尔曲线）、LineSegment（直线）、ArcSegment（两点之间椭圆）。

steamGeomcty进行高效绘图并通过steamGeomctyContext类处理图像

 

图像的变换：

基于矢量图，可以给画布添加LayoutTransform属性添加ScaleTransform属性进行缩放，RotateTransform属性进行旋转。由于直接使用两个引起冲突，要同时使用两个属性，可以添加TransformGroup属性将变化“包装”，或者指定MatrixTransform,其中属性M11和M22用于拉伸，M21和M22用于倾斜。

<TransformGroup>
           <ScaleTransform ScaleX="0.7" ScaleY="0.4" />
            <RotateTransform Angle="50" />
 </TransformGroup>

或者

<MatrixTransform>
    　 <MatrixTransform.Matrix>
              <Matrix M11="0.8" M12="0.6" M21="1.1" M22="1.2" />
       </MatrixTransform.Matrix>
</MatrixTransform>

 

Brush：

SolidColorBrush纯色画笔

<Grid.Background>
            <SolidColorBrush Color="PaleGoldenrod" />
</Grid.Background>

 

LinearGradientBrush渐变色画笔：

StartPoint属性和EndPoint属性确定渐变的方向，例如（0，0）与（1，0）表示水平方向渐变，GradientStop属性定义指定偏移位置的颜色值，颜色变化的部分为渐变。例如

<Grid.Background>
      <LinearGradientBrush StartPoint="0,0" EndPoint="1,1" >
         <GradientStop Offset="0" Color="LightBlue"/>
         <GradientStop Offset="0.5" Color="Azure"/>
         <GradientStop Offset="1" Color="Brown"/>
       </LinearGradientBrush>
</Grid.Background>

RadialGradientBrush放射方式渐变，颜色由GradientOrigin开始渐变:

<Grid.Background> 
            <RadialGradientBrush GradientOrigin="0.2,0.2" >
                <GradientStop Offset="0.1" Color="LightBlue"/>
                <GradientStop Offset="0.5" Color="Azure"/>
                <GradientStop Offset="1" Color="Brown"/>
            </RadialGradientBrush>
</Grid.Background>

DrawingBrush定义用画笔绘制图像：

该画笔在GeometryDrawing元素中定义

<Grid.Background> 
            <DrawingBrush>
                <DrawingBrush.Drawing>
                    <GeometryDrawing Brush="Black">
                        <GeometryDrawing.Pen>
                            <Pen>
                                <Pen.Brush>
                                    <SolidColorBrush>Blue</SolidColorBrush>
                                </Pen.Brush>
                            </Pen>
                        </GeometryDrawing.Pen>
                        <GeometryDrawing.Geometry>
                            <PathGeometry>
                                <PathGeometry.Figures>
                                    <PathFigure StartPoint="70,40">
                                        <PathFigure.Segments>
                                            <BezierSegment Point1="90,37" Point2="130,46" Point3="45,91"/>
                                            <LineSegment Point="120,110" />
                                        </PathFigure.Segments>
                                    </PathFigure>
                                </PathGeometry.Figures>
                            </PathGeometry>
                        </GeometryDrawing.Geometry>
                    </GeometryDrawing>
                </DrawingBrush.Drawing>
            </DrawingBrush>
        </Grid.Background>

 

ImageBrush图像画笔：

将图像加载到画笔中，绘制

<Grid.Backgroun>
    <ImageBrush ImageSource="PATH/Name.jpg"/>
</Grid.Backgroun>

 

VisualBrush:在画笔中使用其他WPF元素

<Grid.Background> 
            <VisualBrush>
                <VisualBrush.Visual>
                    <StackPanel Background="White">
                        <Rectangle Width="25" Height="25" Fill="Wheat"/>
                        <Button Content="Drawing But" Background="RoyalBlue"/>
                    </StackPanel>
                </VisualBrush.Visual>
            </VisualBrush>
        </Grid.Background>

也可以添加UIElement:

<Grid.Background> 
            <VisualBrush>
                <VisualBrush.Visual>
                    <MediaElement Source="PATH/name.wmv"/>
                </VisualBrush.Visual>
            </VisualBrush>
</Grid.Background>

甚至完成数据绑定或者反射：

<Grid.Background> 
    <VisualBrush>
         <VisualBrush.Visual>
              <MediaElement Source="PATH/name.wmv"/>
              <Border Height="100">
                   <Rectangle>
                           <Reqtangle.Fill>
                                 <Visual Brush opacity="0.35" Stretch="None" 
                                                Visual="{Binding ElemettName=reflected}">
                                    <Visual Brush.RelativeTransform>
                                            <TransformGroup>
                                                  <ScaleTransform scaleX="1" ScaleΥ ="-1" />
                                                  <TranslateTransform Y="1" />
                                            <TransformGroup>
                                    </Visual Brush.RelativeTransform>
                                </Visual Brush>
                           </Reqtangle.Fill>
                    </Rectangle>
              </VisualBrush.Visual>
     </VisualBrush>
</Grid.Background>

 

走自己的路，让别人找鞋去吧~~~~~~