思享工具箱

WPF知识点全攻略13- 绘图

摘要：
行&lt；线条X1=“10”Y1=“100”X2=“260”Y2=“100“Stroke=“黑色”StrokeDashArray=“5”StrokeThickness=“2”&gt；线冲程&gt；矩形&lt；矩形边距=“5”笔划=“黑色”高度=“100”宽度=“100“&gt；&lt；&书信电报，

WPF基础图形：

Line：直线，可设置笔触（Stroke)

Rectangle：矩形，既有笔触（Stroke)，又有填充（Fill）

Ellipse：椭圆，有笔触和填充（包含正圆）

Polygon：多边形（闭合），由多条直线段围成的闭合区域，有笔触和填充

Polyline：折线（不闭合），由多条首尾相接的直线段组成

Path：路径，基本图形中功能最强大的，可由若干直线、圆弧、贝塞尔曲线组成

Line：直线

WPF知识点全攻略13- 绘图第1张WPF知识点全攻略13- 绘图第2张
<Grid>
        <Line X1="10" Y1="20" X2="260" Y2="20" Stroke="Red" StrokeThickness="10"></Line>
        <Line X1="10" Y1="40" X2="260" Y2="40" Stroke="Orange" StrokeThickness="6"></Line>
        <Line X1="10" Y1="60" X2="260" Y2="60" Stroke="Green" StrokeThickness="2"></Line>
        <Line X1="10" Y1="80" X2="260" Y2="80" Stroke="Black" StrokeDashArray="3" StrokeThickness="2"></Line>
        <Line X1="10" Y1="100" X2="260" Y2="100" Stroke="Black" StrokeDashArray="5" StrokeThickness="2"></Line>
        <Line X1="10" Y1="120" X2="260" Y2="120" Stroke="Black" StrokeEndLineCap="Flat" StrokeThickness="10"></Line>
        <Line X1="10" Y1="140" X2="260" Y2="140" Stroke="Black" StrokeEndLineCap="Triangle" StrokeThickness="10"></Line>
        <Line X1="10" Y1="160" X2="260" Y2="160" Stroke="Black" StrokeEndLineCap="Round" StrokeThickness="10"></Line>
        <Line X1="10" Y1="180" X2="260" Y2="180" Stroke="Black" StrokeEndLineCap="Square" StrokeThickness="10"></Line>
        <Line X1="10" Y1="200" X2="260" Y2="200"  StrokeEndLineCap="Square" StrokeThickness="10">
            <Line.Stroke>
                <LinearGradientBrush StartPoint="1,0.5" EndPoint="0,0.5">
                    <GradientStop Color="Blue"></GradientStop>
                    <GradientStop Offset="1"></GradientStop>
                </LinearGradientBrush>
            </Line.Stroke>
        </Line>
    </Grid>
View Code

WPF知识点全攻略13- 绘图第3张

 Rectangle：矩形

WPF知识点全攻略13- 绘图第4张WPF知识点全攻略13- 绘图第5张
 <WrapPanel>
        <!--实心填充-->
        <Rectangle Margin="5" Stroke="Black" Fill="LightBlue" Height="100" Width="100"></Rectangle>
        <!--线性渐变-->
        <Rectangle Margin="5" Stroke="Black" Height="100" Width="100">
            <Rectangle.Fill>
                <LinearGradientBrush StartPoint="0,0" EndPoint="1,1">
                    <GradientStop Color="#B6F8F1" Offset="0"></GradientStop>
                    <GradientStop Color="#0082BD" Offset="0.25"></GradientStop>
                    <GradientStop Color="#95DEFF" Offset=".9"></GradientStop>
                    <GradientStop Color="#004F72" Offset="1"></GradientStop>
                </LinearGradientBrush>
            </Rectangle.Fill>
        </Rectangle>
        <!--径向渐变-->
        <Rectangle Margin="5" Stroke="Black" Height="100" Width="100">
            <Rectangle.Fill>
                <RadialGradientBrush>
                    <GradientStop Color="#B6F8F1" Offset="0"></GradientStop>
                    <GradientStop Color="#0082BD" Offset="0.25"></GradientStop>
                    <GradientStop Color="#95DEFF" Offset=".9"></GradientStop>
                    <GradientStop Color="#004F72" Offset="1"></GradientStop>
                </RadialGradientBrush>
            </Rectangle.Fill>
        </Rectangle>
        <!--图片填充-->
        <Rectangle Margin="5" Stroke="Black" Height="100" Width="100">
            <Rectangle.Fill>
                <ImageBrush ImageSource="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png" Viewport="0,0,0.3,0.15" TileMode="Tile"></ImageBrush>
            </Rectangle.Fill>
        </Rectangle>
        <!--矢量图填充-->
        <Rectangle Margin="5" Stroke="Black" Height="100" Width="100">
            <Rectangle.Fill>
                <DrawingBrush Viewport="0,0,0.2,0.2" TileMode="Tile">
                    <DrawingBrush.Drawing>
                        <GeometryDrawing Brush="LightBlue">
                            <GeometryDrawing.Geometry>
                                <EllipseGeometry RadiusX="10" RadiusY="10"> </EllipseGeometry>
                            </GeometryDrawing.Geometry>
                        </GeometryDrawing>
                    </DrawingBrush.Drawing>
                </DrawingBrush>
            </Rectangle.Fill>
        </Rectangle>
        <!--边框渐变-->
        <Rectangle Margin="5" Height="100" Width="100" StrokeThickness="10">
            <Rectangle.Stroke>
                <LinearGradientBrush StartPoint="0,0" EndPoint="1,1">
                    <GradientStop Color="White" Offset=".3"></GradientStop>
                    <GradientStop Color="Blue" Offset="1"></GradientStop>
                </LinearGradientBrush>
            </Rectangle.Stroke>
        </Rectangle>
    </WrapPanel>
View Code

WPF知识点全攻略13- 绘图第6张

 Ellipse：椭圆

WPF知识点全攻略13- 绘图第7张WPF知识点全攻略13- 绘图第8张
<Grid>
        <Ellipse Height="150" Width="150" Cursor="Hand">
            <Ellipse.Fill>
                <RadialGradientBrush GradientOrigin="0.2,0.8" RadiusX="0.75" RadiusY="0.75">
                    <RadialGradientBrush.RelativeTransform>
                        <TransformGroup>
                            <RotateTransform Angle="90" CenterX="0.5" CenterY="0.5"></RotateTransform>
                        </TransformGroup>
                    </RadialGradientBrush.RelativeTransform>
                    <GradientStop Color="#FFFFFF" Offset="0"></GradientStop>
                    <GradientStop Color="#444444" Offset="0.66"></GradientStop>
                    <GradientStop Color="#999999" Offset="1"></GradientStop>
                </RadialGradientBrush>
            </Ellipse.Fill>
        </Ellipse>
    </Grid>
View Code

WPF知识点全攻略13- 绘图第9张

 Polygon：多边形

WPF知识点全攻略13- 绘图第10张WPF知识点全攻略13- 绘图第11张
 <WrapPanel >
            <!--Polygon总是自动闭合-->
            <Polygon Fill="Blue" StrokeThickness="3" Stroke="Pink" Points="40,10 65,70 10,50"/>
            <Polygon Fill="Blue" StrokeThickness="3" Stroke="Pink" Points="10,10 70,10 70,70 10,70"/>
            <Polygon Fill="Blue" StrokeThickness="3" Stroke="Pink" Points="20,30 80,30 28,64 50,10 72,64" />
        </WrapPanel>
View Code

WPF知识点全攻略13- 绘图第12张

 绘制多边形：https://www.codeproject.com/Articles/128705/WPF-rounded-corners-polygon

Polyline：折线

WPF知识点全攻略13- 绘图第13张WPF知识点全攻略13- 绘图第14张
<WrapPanel >
            <!--Polyline不会自动闭合-->
            <Polyline  Points="10,10 40,40 10,90 300,50" Stroke="Red" StrokeThickness="20" StrokeLineJoin="Round"/>
            <Polyline  Points="0,50 20,20 40,100 100,0" Stroke="Pink" StrokeThickness="10" StrokeEndLineCap="Round" StrokeLineJoin="Round"/>
        </WrapPanel>
View Code

WPF知识点全攻略13- 绘图第15张

 Path：路径

WPF知识点全攻略13- 绘图第16张WPF知识点全攻略13- 绘图第17张
<WrapPanel >
            <!--直线-->
            <Path Stroke="Blue" StrokeThickness="2">
                <Path.Data>
                    <LineGeometry StartPoint="20,20" EndPoint="140,140"></LineGeometry>
                </Path.Data>
            </Path>
            <!--矩形-->
            <Path Stroke="Orange" Fill="Yellow" StrokeThickness="2">
                <Path.Data>
                    <RectangleGeometry Rect="20,20,120,120" RadiusX="10" RadiusY="10" ></RectangleGeometry>
                </Path.Data>
            </Path>
            <!--自定义路径(直线)-->
            <Path Stroke="Yellow" StrokeThickness="2">
                <Path.Data>
                    <PathGeometry>
                        <PathGeometry.Figures>
                            <PathFigure StartPoint="25,140" IsClosed="True">
                                <PathFigure.Segments>
                                    <LineSegment Point="20,40"></LineSegment>
                                    <LineSegment Point="40,110"></LineSegment>
                                    <LineSegment Point="50,20"></LineSegment>
                                    <LineSegment Point="80,110"></LineSegment>
                                    <LineSegment Point="110,20"></LineSegment>
                                    <LineSegment Point="120,110"></LineSegment>
                                    <LineSegment Point="140,40"></LineSegment>
                                    <LineSegment Point="135,140"></LineSegment>
                                </PathFigure.Segments>
                            </PathFigure>
                        </PathGeometry.Figures>
                    </PathGeometry>
                </Path.Data>
            </Path>
            <!--自定义路径(直线)-->
            <Path Stroke="SeaGreen" StrokeThickness="2" Data="M 20,140 20,40 40,110 50,20 80,110 110,20 120,110 140,40 135,140Z"></Path>
            <!--椭圆-->
            <Path Stroke="Green" Fill="LawnGreen" StrokeThickness="2">
                <Path.Data>
                    <EllipseGeometry Center="80,80" RadiusX="60" RadiusY="60" ></EllipseGeometry>
                </Path.Data>
            </Path>
            <!--自定义路径(二次方程式贝塞尔曲线)-->
            <Path Stroke="Red" StrokeThickness="2">
                <Path.Data>
                    <PathGeometry>
                        <PathFigure StartPoint="20,150">
                            <QuadraticBezierSegment Point1="100,0" Point2="180,150"></QuadraticBezierSegment>
                        </PathFigure>
                    </PathGeometry>
                </Path.Data>
            </Path>
            <!--自定义路径(二次方程式贝塞尔曲线)-->
            <Path Stroke="Blue" StrokeThickness="2" Data="M 20,150 Q100,0 180,150"></Path>
            <!--平滑二次方程式贝塞尔曲线-->
            <Path Stroke="Black" StrokeThickness="2" Data="M 20,150 T100,0 180,150"></Path>
            <!--自定义路径(三次方贝塞尔曲线)-->
            <Path Stroke="Red" StrokeThickness="2">
                <Path.Data>
                    <PathGeometry>
                        <PathGeometry.Figures>
                            <PathFigureCollection>
                                <PathFigure StartPoint="10,100">
                                    <PathFigure.Segments>
                                        <PathSegmentCollection>
                                            <BezierSegment Point1="100,0" Point2="200,200" Point3="300,100" />
                                        </PathSegmentCollection>
                                    </PathFigure.Segments>
                                </PathFigure>
                            </PathFigureCollection>
                        </PathGeometry.Figures>
                    </PathGeometry>
                </Path.Data>
            </Path>
            <!--自定义路径(三次方贝塞尔曲线)-->
            <Path Stroke="Blue" StrokeThickness="2"  Data="M 10,100 C100,0 200,200 300,100" />
            <!--平滑三次方程式贝塞尔曲线-->
            <Path Stroke="Black" StrokeThickness="2"  Data="M 10,100 S100,0 200,200" />
            <!--自定义路径（扇形）-->
            <Path Stroke="Blue" StrokeThickness="5">
                <Path.Data>
                    <PathGeometry>
                        <PathFigure StartPoint="0,100"   >
                            <LineSegment Point="100,50"/>
                            <ArcSegment Point="100,150" Size="300,200" SweepDirection="Clockwise" />
                            <LineSegment Point="0,100"/>
                        </PathFigure>
                    </PathGeometry>
                </Path.Data>
            </Path>
            <!--自定义路径（圆弧）-->
            <Path Stroke="Red" Fill="Aqua" Data="M 100,100 A 50,50 0 0 0 200,100 A 50 50 0 0 1 300,100">
            </Path>
        </WrapPanel>
View Code

WPF知识点全攻略13- 绘图第18张

Path命令介绍请参考：https://www.cnblogs.com/hehexiaoxia/p/5316098.html

更多内容请参考：https://www.cnblogs.com/lzhp/archive/2012/10/04/2710907.html 

WPF知识点全攻略目录：https://www.cnblogs.com/kuangxiangnice/p/11040070.html

标签：#lt#amp#gt#= | 浏览：433 | 发布日期：

免责声明：文章转载自《WPF知识点全攻略13- 绘图》仅用于学习参考。如对内容有疑问，请及时联系本站处理。

上篇Docker Compose 版本过高（Docker版本不匹配），降低docker-compose版本html2canvas踩坑日记下篇

宿迁高防，2C2G15M，22元/月；香港BGP，2C5G5M，25元/月 雨云优惠码：MjYwNzM=

相关文章

SV中的Interface和Program

Interface：SV中新定义的接口方式，用来简化接口连接，使用时注意在module或program之外定义interface，然后通过'include来添加进工程。         interface  arb_if(input bit clk);              //clk信号，一般单独拿出来                        ...

flink使用kafka为数据源

<flink.version>1.10.2</flink.version> <dependency> <groupId>org.apache.flink</groupId> <artifactId>flink-java</arti...

通过sqlplus执行sql脚本并生成log

如何在sqlplus中执行sql脚本 [1]登陆Sqlplus 请输入用户名 sys/admin@orcl as sysdba 成功后，可以执行导入 [2]执行 SQL>@ c:\sql\unitdata.sql 　如果是在linux就执行start /tmp/shp/beijing_region.shp 你就可以看到提示执行的结果 如何生成sqlp...

字符加密(cipher)

字符加密 Valentino 向往星空。。。某一天他脑洞大开地想要往太空中发送一串讯息,没准哪个外星文明接收到了呢?但是他突然想起一个问题,要是信息在传递过程中受到干扰,外星文明接收到错误的信息怎么办?如何校验信息的完整性?于是他找到了度娘:MD5 ( Message-Digest Algorithm ,信息-摘要算法 5)用于确保信息传输完整一致。它具...

CSS-三栏自适应高度

通过负边距(padding/-marging)实现三栏自适应高度； 解决思想：左边栏向左浮动，右边栏向右浮动，中间栏放到最后，不需要浮动； <div> <div class="leftSide">左边栏</div> <div class="rightSide">右边栏</div>...

图片灯箱插件——lightBox

  该插件可以用圆角的方式展示选择中的图片，使用按钮查看上下张图片，在加载图片时自带进度条，还能以自动播放的方式浏览图片，调用格式如下： $(linkimage).lightBox({options}) 其中linkimage参数为包含图片的<a>元素名称，options为插件方法的配置对象。 例如，以列表的方式在页面中展示全部的图片，当用户...

最新文章

随机推荐

思享工具箱导航