• 稳扎稳打Silverlight(7) 2.0图形之Ellipse, Line, Path, Polygon, Polyline, Rectangle


    [索引页]
    [源码下载]


    稳扎稳打Silverlight(7) - 2.0图形之Ellipse, Line, Path, Polygon, Polyline, Rectangle


    作者:webabcd


    介绍
    Silverlight 2.0 图形:
        Ellipse - 椭圆
        Line - 线
        Path - 一系列相互连接的直线和曲线
        Polygon - 多边形,闭合图形,起点与终点自动相连
        Polyline - 非闭合图形,一串连接起来的线,起点与终点不会自动相连
        Rectangle - 矩形


    在线DEMO
    http://www.cnblogs.com/webabcd/archive/2008/10/09/1307486.html


    示例
    1、Ellipse.xaml
    <UserControl x:Class="Silverlight20.Shape.Ellipse"
        xmlns
    ="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
        xmlns:x
    ="http://schemas.microsoft.com/winfx/2006/xaml">
        
    <StackPanel HorizontalAlignment="Left">
            
            
    <!--椭圆-->
            
    <!--
            Width - 椭圆的宽
            Height - 椭圆的高
            Stroke - 边框
            StrokeThickness - 边框尺寸
            Fill - 填充
            
    -->
            
    <Ellipse Stroke="Red" Fill="Yellow" StrokeThickness="6" Width="100" Height="50"></Ellipse>
            
        
    </StackPanel>
    </UserControl>


    2、Line.xaml
    <UserControl x:Class="Silverlight20.Shape.Line"
        xmlns
    ="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
        xmlns:x
    ="http://schemas.microsoft.com/winfx/2006/xaml">
        
    <StackPanel HorizontalAlignment="Left">
            
            
    <!--线-->
            
    <!--
            X1 - 起点的 X 坐标
            Y1 - 起点的 Y 坐标
            X2 - 终点的 X 坐标
            Y2 - 终点的 Y 坐标
            注:
                Line无填充,也就是Line的Fill属性无效
                坐标以左上角为原点,原点右侧/下侧为正方向
            
    -->
            
    <Line X1="0" Y1="100" X2="200" Y2="300" Stroke="Black" StrokeThickness="6" />
            
        
    </StackPanel>
    </UserControl>


    3、Path.xaml
    <UserControl x:Class="Silverlight20.Shape.Path"
        xmlns
    ="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
        xmlns:x
    ="http://schemas.microsoft.com/winfx/2006/xaml">
        
    <StackPanel HorizontalAlignment="Left">
            
            
    <!--绘制一系列相互连接的直线和曲线-->
            
            
    <!--
            Path.Data - 要绘制的形状的 Geometry
            
    -->
            
    <Path Fill="Yellow" Stroke="Red" StrokeThickness="6">
                
    <Path.Data>
                    
    <!--椭圆-->
                    
    <!--
                    Center - 原点坐标
                    RadiusX - X轴半径
                    RadiusY - Y轴半径
                    
    -->
                    
    <EllipseGeometry Center="50,25" RadiusX="50" RadiusY="25" />
                
    </Path.Data>
            
    </Path>

            
    <Path Fill="Yellow" Stroke="Red" StrokeThickness="6">
                
    <Path.Data>
                    
    <!--矩形-->
                    
    <!--
                    Rect - 矩形的点坐标,分别为:左侧线的X轴坐标,上侧线的Y轴坐标,矩形宽,矩形高
                    
    -->
                    
    <RectangleGeometry Rect="100,0,100,50" />
                
    </Path.Data>
            
    </Path>

            
    <Path Stroke="Red" StrokeThickness="6" >
                
    <Path.Data>
                    
    <!--线-->
                    
    <!--
                    StartPoint - 起点坐标
                    EndPoint - 终点坐标
                    
    -->
                    
    <LineGeometry StartPoint="200,0" EndPoint="300,100" />
                
    </Path.Data>
            
    </Path>
            
            
    <Path Stroke="Red" StrokeThickness="6">
                
    <Path.Data>
                    
    <!--一个可能由弧、曲线、椭圆、直线和矩形组成的复杂图形-->
                    
    <PathGeometry>
                        
    <PathGeometry.Figures>
                            
    <!--
                            StartPoint - 图形起点坐标
                            
    -->
                            
    <PathFigure StartPoint="300,0">
                                
    <!--
                                PathFigure.Segments - 待画线的类型
                                
    -->
                                
    <PathFigure.Segments>
                                    
    <PathSegmentCollection>
                                        
    <!--
                                        LineSegment - 单一线段
                                        PolyLineSegment - 线段集合
                                        ArcSegment - 弧(椭圆的一部分)
                                        BezierSegment - 两点之间的一条三次贝塞尔曲线
                                        QuadraticBezierSegment - 两点之间的一条二次贝塞尔曲线
                                        PolyBezierSegment - 一条或多条三次贝塞尔曲线
                                        PolyQuadraticBezierSegment - 一条或多条二次贝塞尔曲线
                                        
    -->      
                                        
    <!--
                                        Size - 弧的X轴和Y轴半径
                                        Point - 该Segment的终点坐标,下一个Segment的起点坐标
                                        
    -->
                                        
    <ArcSegment Size="100,50" Point="400,100" />
                                        
    <!--
                                        Point - 该Segment的终点坐标,下一个Segment的起点坐标
                                        
    -->
                                        
    <LineSegment Point="500,200" />
                                    
    </PathSegmentCollection>
                                
    </PathFigure.Segments>
                            
    </PathFigure>
                        
    </PathGeometry.Figures>
                    
    </PathGeometry>
                
    </Path.Data>
            
    </Path>

            
    <Path Fill="Yellow" Stroke="Red" StrokeThickness="6">
                
    <Path.Data>
                    
    <!--一个或多个Geometry-->
                    
    <!--
                    FillRule - 填充规则 [System.Windows.Media.FillRule枚举]
                        EvenOdd 和 Nonzero,详见MSDN
                    
    -->
                    
    <GeometryGroup FillRule="EvenOdd">
                        
    <LineGeometry StartPoint="200,0" EndPoint="300,100" />
                        
    <EllipseGeometry Center="250,50" RadiusX="50" RadiusY="50" />
                        
    <RectangleGeometry Rect="200, 0, 100, 100" />
                    
    </GeometryGroup>
                
    </Path.Data>
            
    </Path>
            
        
    </StackPanel>
    </UserControl>


    4、Polygon.xaml
    <UserControl x:Class="Silverlight20.Shape.Polygon"
        xmlns
    ="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
        xmlns:x
    ="http://schemas.microsoft.com/winfx/2006/xaml">
        
    <StackPanel HorizontalAlignment="Left">
            
            
    <!--多边形,闭合图形,起点与终点自动相连-->
            
    <!--
            Points - 构造路径所使用的点
                空格分隔点坐标,逗号分隔X轴和Y轴坐标
            
    -->
            
    <Polygon Points="0,0 100,0 300,100 200,100 100,200" Stroke="Red" StrokeThickness="6" Fill="Yellow" />
            
        
    </StackPanel>
    </UserControl>


    5、Polyline.xaml
    <UserControl x:Class="Silverlight20.Shape.Polyline"
        xmlns
    ="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
        xmlns:x
    ="http://schemas.microsoft.com/winfx/2006/xaml">
        
    <StackPanel HorizontalAlignment="Left">

            
    <!--非闭合图形,一串连接起来的线,起点与终点不会自动相连-->
            
    <!--
            Points - 构造路径所使用的点
                空格分隔点坐标,逗号分隔X轴和Y轴坐标
            
    -->
            
    <Polyline Points="0,0 100,0 300,100 200,100 100,200" Stroke="Red" StrokeThickness="6" Fill="Yellow" />
            
        
    </StackPanel>
    </UserControl>


    6、Rectangle.xaml
    <UserControl x:Class="Silverlight20.Shape.Rectangle"
        xmlns
    ="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
        xmlns:x
    ="http://schemas.microsoft.com/winfx/2006/xaml">
        
    <StackPanel HorizontalAlignment="Left">
            
            
    <!--矩形-->
            
    <!--
            RadiusX - 边角圆弧的X轴半径
            RadiusY - 边角圆弧的Y轴半径
            
    -->
            
    <Rectangle Width="200" Height="120" Stroke="Black" StrokeThickness="6" RadiusX="10" RadiusY="30" />
            
        
    </StackPanel>
    </UserControl>


    OK
    [源码下载]
  • 相关阅读:
    Redis学习03:Redis数据持久化
    Redis学习02:Redis数据类型
    项目总结42:Linux下vim操作常用指令
    Java深入学习02:CAS 算法以及低层原理
    Java深入学习01:volatile的原理和使用
    项目总结39:Springboot打jar包并本地运行
    项目总结38:使用httpcomponents: httpclient请求数据
    项目总结37:Java上传图片保存到Oracle以及读取图片
    Redis学习01:Redis配置文件redis.conf详解
    Oracle学习笔记04:timestamp时间大小比较
  • 原文地址:https://www.cnblogs.com/webabcd/p/1317407.html
Copyright © 2020-2023  润新知