wpf-绘图-基础图形

最新推荐文章于 2024-08-09 16:00:00 发布
最新推荐文章于 2024-08-09 16:00:00 发布
阅读量2.4k 收藏 6
点赞数
分类专栏： c#和WPF 文章标签： wpf
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/pxy7896/article/details/110181601
版权

目录


xaml绘图时矢量的。

绘图可以在任何一种布局控件中完成，wpf会根据容器计算相应坐标。最常用的是Canvas和Grid。

基本图形包括以下几个，都是Shaper类的派生类。

  1. Line，直线段，可以设置Stroke
  2. Rectangle，有Stroke也有Fill
  3. Ellipse，椭圆，同上
  4. Polygon，多边形。由多条直线线段围成的闭合区域，同上。
  5. Polyline，折线，不闭合，由多条首尾相接的直线段组成
  6. Path，路径，闭合。可以由若干直线、圆弧、贝塞尔曲线（由线段与节点组成，节点是可拖动的支点，线段像可伸缩的皮筋）组成。很强大。

直线

X1和Y1可以设置起点坐标，X2和Y2可以设置终点坐标。Stroke（笔触）属性的数据类型是Brush（画刷），凡是Brush的派生类都可以给这个属性赋值。

实例

在这里插入图片描述
写了个用户控件。StrokeDashArray值越大虚线越疏松，Stroke是颜色，StrokeThickness是粗细，StrokeEndLineCap管的是末端的形状。

    <Grid>
        <Line X1="10" Y1="20" X2="260" Y2="20" Stroke="Red" StrokeThickness="10"/>
        <Line X1="10" Y1="40" X2="260" Y2="40" Stroke="Orange" StrokeThickness="6"/>
        <Line X1="10" Y1="60" X2="260" Y2="60" StrokeDashArray="1" Stroke="Black" StrokeThickness="2"/>
        <Line X1="10" Y1="80" X2="260" Y2="80" StrokeDashArray="2" Stroke="Black" StrokeThickness="2"/>
        <Line X1="10" Y1="100" X2="260" Y2="100" StrokeDashArray="3" Stroke="Black" StrokeThickness="2"/>
        <Line X1="10" Y1="120" X2="260" Y2="120" StrokeEndLineCap="Flat" Stroke="Blue" StrokeThickness="3"/>
        <Line X1="10" Y1="140" X2="260" Y2="140" StrokeEndLineCap="Round"  Stroke="Blue" StrokeThickness="3"/>
        <Line X1="10" Y1="160" X2="260" Y2="160" StrokeEndLineCap="Square"  Stroke="Blue" StrokeThickness="3"/>
        <Line X1="10" Y1="180" X2="260" Y2="180" StrokeEndLineCap="Triangle" StrokeThickness="10">
            <Line.Stroke>
                <LinearGradientBrush EndPoint="0,0.5" StartPoint="1,0.5">
                    <GradientStop Color="Brown"/>
                    <GradientStop Offset="1"/>
                </LinearGradientBrush>
            </Line.Stroke>
        </Line>
    </Grid>

矩形

矩形有Stroke和Fill。Stroke的设置与直线的相同，Fill的数据类型是Brush。同理，Brush的派生类也可以给它赋值。

实例

在这里插入图片描述

<UserControl x:Class="pxy.DiffBrush"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
             xmlns:local="clr-namespace:pxy"
             mc:Ignorable="d" 
             d:DesignHeight="390" d:DesignWidth="600">
    <Grid Margin="10">
        <Grid.RowDefinitions>
            <RowDefinition Height="160"/>
            <RowDefinition Height="10"/>
            <RowDefinition Height="160"/>
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="180"/>
            <ColumnDefinition Width="10"/>
            <ColumnDefinition Width="180"/>
            <ColumnDefinition Width="10"/>
            <ColumnDefinition Width="180"/>
        </Grid.ColumnDefinitions>
        <!--实心填充-->
        <Rectangle Grid.Column="0" Grid.Row="0" Stroke="Black" Fill="LightBlue"/>
        <!--线性渐变-->
        <Rectangle Grid.Column="2" Grid.Row="0">
            <Rectangle.Fill>
                <LinearGradientBrush StartPoint="0,0" EndPoint="1,1">
                    <GradientStop Color="#FFB6F8F1" Offset="0"/>
                    <GradientStop Color="#FF0082BD" Offset="0.25"/>
                    <GradientStop Color="#FF95DEFF" Offset="0.6"/>
                    <GradientStop Color="#FF004F72" Offset="1"/>
                </LinearGradientBrush>
            </Rectangle.Fill>
        </Rectangle>
        <!--径向渐变-->
        <Rectangle Grid.Column="4" Grid.Row="0">
            <Rectangle.Fill>
                <RadialGradientBrush>
                    <GradientStop Color="#FFB6F8F1" Offset="0"/>
                    <GradientStop Color="#FF0082BD" Offset="0.25"/>
                    <GradientStop Color="#FF95DEFF" Offset="0.75"/>
                    <GradientStop Color="#FF004F72" Offset="1"/>
                </RadialGradientBrush>
            </Rectangle.Fill>
        </Rectangle>
        <!--图片填充-->
        <Rectangle Grid.Column="0" Grid.Row="2">
            <Rectangle.Fill>
                <ImageBrush ImageSource="/Resources/Logos/huaji.jpg" TileMode="Tile" Viewport="0,0,0.5,0.5"/>
            </Rectangle.Fill>
        </Rectangle>
        <!--矢量图填充，自定义图形-->
        <Rectangle Grid.Column="2" Grid.Row="2">
            <Rectangle.Fill>
                <DrawingBrush TileMode="Tile" Viewport="0,0,0.2,0.2">
                    <DrawingBrush.Drawing>
                        <GeometryDrawing Brush="LightBlue">
                            <GeometryDrawing.Geometry>
                                <EllipseGeometry RadiusX="10" RadiusY="10"/>
                            </GeometryDrawing.Geometry>
                        </GeometryDrawing>
                    </DrawingBrush.Drawing>
                </DrawingBrush>
            </Rectangle.Fill>
        </Rectangle>
        <!--无填充，用线性渐变填充border-->
        <Rectangle Grid.Column="4" Grid.Row="2" StrokeThickness="10">
            <Rectangle.Stroke>
                <LinearGradientBrush StartPoint="0,0" EndPoint="1,1">
                    <GradientStop Color="White" Offset="0.3"/>
                    <GradientStop Color="Blue" Offset="1"/>
                </LinearGradientBrush>
            </Rectangle.Stroke>
        </Rectangle>
    </Grid>
</UserControl>

在这里插入图片描述

VisualBrush实例：改变按钮颜色的透明度

在这里插入图片描述

<UserControl x:Class="pxy.VisualBrushTest"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
             xmlns:local="clr-namespace:pxy"
             mc:Ignorable="d" 
             d:DesignHeight="300" d:DesignWidth="400" Background="Orange">
    <Grid Margin="10">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="160"/>
            <ColumnDefinition Width="*"/>
            <ColumnDefinition Width="160"/>
        </Grid.ColumnDefinitions>
        <StackPanel x:Name="stackPanelLeft" Background="White">
            <Button x:Name="realButton" Content="OK" Height="40"/>
        </StackPanel>
        <Button Content=">>>" Grid.Column="1" Margin="5,0" Click="VisualBrush_Click"/>
        <StackPanel x:Name="stackPanelRight" Background="White" Grid.Column="2"/>
    </Grid>
</UserControl>

后台

        double o = 1.0; // 不透明度计数器
        private void VisualBrush_Click(object sender, RoutedEventArgs e)
        {
            VisualBrush visualBrush = new VisualBrush(this.realButton);
            Rectangle rect = new Rectangle();
            rect.Width = this.realButton.ActualWidth;
            rect.Height = this.realButton.ActualHeight;
            rect.Fill = visualBrush;
            rect.Opacity = o;
            o -= 0.2;
            // 别漏了
            this.stackPanelRight.Children.Add(rect);
        }

椭圆

Width==Height就是正圆。光影效果可以用RadicalGradientBrush实现。
这些可以在blend里调整，然后代码微调。1.规整数值（毕竟机器会出很多太过精确的数值）2.调整顺序；3.去掉无用代码。
在这里插入图片描述

    <Grid>
        <Ellipse Height="200"  Stroke="Gray" Width="200">
            <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"/>
                            <TranslateTransform/>
                        </TransformGroup>
                    </RadialGradientBrush.RelativeTransform>
                    <GradientStop Color="#FFFFFFFF" Offset="0"/>
                    <GradientStop Color="#FF444444" Offset="0.6"/>
                    <GradientStop Color="#FF999999" Offset="1"/>
                </RadialGradientBrush>
            </Ellipse.Fill>
        </Ellipse>
    </Grid>
陆沙
关注
专栏目录
WPF绘图(基础图形：直线、矩形和椭圆)
qq_30725967的博客
09-03 4810
与传统的.NET开发使用GDI+进行绘图不同，WPF拥有自己的一套图形API，绘图为矢量图。绘图可以在任何一种布局控件中完成，wpf会根据容器计算相应坐标。最常用的是Canvas和Grid。基本图形包括以下几个，都是Shaper类的派生类。1、Line，直线段，可以设置Stroke2、Rectangle，有Stroke也有Fill3、Ellipse，椭圆，同上4、Polygon，多边形。由多条直线线段围成的闭合区域，同上。5、Polyline，折线，不闭合，由多条首尾相接的直线段组成。
WPF画图简单学习
01-28
C#的WPF界面画图学习，直线、圆形、按钮、文本框的使用和注释，学习存档，也希望可以帮到其他新人
WPF 图形绘制
热门推荐
lvxingzhe3的博客
02-15 1万+
WPF常用 图形绘制的四种方式，Shape,Path,Brush,DrawVisual
WPF—— d:DesignHeight与d:DesignWidth设计时特性导致运行时旋转中心不准确
bianguanyue的博客
07-28 717
在设计扫描控件时，发现一个问题，扫瞄线的旋转中心在设计器中播放动画时是完全绕着线的一个端点旋转的，但一旦运行起来，它的旋转中心就不是直线的端点了。
11.WPF绘图
博客
11-12 3330
11.WPF绘图
WPF中的形状Shape与几何图形Geometry详解
鲤籽鲲的博客
03-24 4677
WPF中的形状Shape与几何图形Geometry详解
WPF-4-unleashed PDF 原书
05-04
对于图形和多媒体支持，书中会介绍WPF的绘图系统，包括路径几何、形状、刷子和效果。此外，还会讲解如何集成图像、音频和视频，以增强应用程序的用户体验。 动画和转场效果是WPF使应用更具吸引力的关键。书里会详细...
Wpf的Diagram画板aistudio-wpf-diagram-master
12-20
【WPF-Diagram-Designer】是开源的图形设计库，它允许开发者在WPF应用程序中集成可自定义的绘图功能。该库通常包含各种图形元素、连接线、拖放功能、缩放和平移等基本特性，用于构建流程图、网络拓扑图或其他类型的...
Fast-learning-WPF-master.zip
12-04
**WPF（Windows Presentation Foundation）**是微软.NET Framework框架中的一个重要组成...通过这个“Fast-learning-WPF-master”资源，你可以逐步掌握WPF的核心概念和技术，为构建现代、高效的应用程序打下坚实基础。
ScottPlot-Demo-WPF
12-07
- **其他依赖**：如System.Threading.Tasks.Extensions.dll和System.ValueTuple.dll等，是.NET Framework的核心组件，用于多线程处理和数据结构，对实现高性能绘图至关重要。 **4. 示例程序和配置** - **WPF Demo....
wpf-dxf文件转G代码
10-02
这需要理解WPF的绘图API，如`PathGeometry`、`LineSegment`等，以绘制几何形状。同时，为了模拟G代码的执行过程，可能还需要实现路径动画。 4. **用户交互**：WPF提供了丰富的UI组件，如`OpenFileDialog`用于打开...
WPF异步高效绘制过万级别的矩形图形矢量图，无限放大缩小，显示效果极佳
一个专注于技术研究创新的程序员
01-18 1728
DrawingVisual是一个轻量级的可视化对象，允许你在低级别上执行绘图。通过重写OnRender方法，你可以使用DrawingContext在DrawingVisual上进行绘图。但是如果要考率绘制大批量图形，我们就要性能和内存等多个方面考虑了，否则绘制1w的矩形需要1分钟，哪个客户也接受不了啊。4.使用graphics绘制Image流可以直接绑定到界面。3.使用DrawingVisual进行低级别的绘图。
WPF之各种图形
znb769525443的专栏
08-20 2479
转载：http://www.cnblogs.com/ListenFly/archive/2013/06/12/3114047.html 本文主要讲解WPF中的基本图形知识，内容如下： 1。图形的基础知识准备 2。WPF中的图形体系结构 3。颜色和画刷 4。Shape 5。Drawing和Visual 1.1WPF中的坐标 1.1.1 WPF的默认
WPF入门到跪下 第六章 图形-绘制
jjailsa的博客
01-06 1444
WPF中的图形控件都为Shape类的子类，因此具有一定的共性。Fill：获取或设置图形控件的画刷，Brush类型。BrushesStretch：画刷的拉伸方式。Stroke：图形控件的边界画刷，Brush类型。：图形控件的边界粗细。：用于设置边界线条的实线与间隔比例的集合，一般用来设置虚线边框，例如表示实线占1格、间隔占两格，重复铺满；表示实线占1格、间隔占两格、实线占2格、间隔占3格，重复铺满。需要注意的是，当设置为奇数时有点特殊，会将集合扩充2倍变成偶数，例如，实际效果是。：获取或设置一个。
WPF中基本图形
weixin_44552202的博客
06-09 955
在WPF中拥有一套自己的API图形。使用这套API图形就可以绘制出精美的图像，还可以为图形添加变形和滤镜效果。 WPF中基本图形包括以下几个（Shape类的派生类） Line：直线、Rectangle：矩形、Ellipse：椭圆 Polygon：多边形、Polyline：折线、Path：路径 Line直线 直线使用X1、Y1两个属性设置起点坐标，X2、Y2两个属性用来设置终点坐标。控制起点坐标可...
WPF的2D绘图介绍
sky00730的博客
09-18 1107
Shape的继承层次：Rectangle：矩形Ellipse：椭圆Line：直线Polyline：多段线Polygon：封闭多段线Path：路径♦ 上面图形相对比较简单，下面介绍Path路径：WPF提供两个类来描述路径数据：1. 移动指令 Move Command（M）：M 起始点/m 起始点例如：M 100,50或m 100,50M：表示绝对值;m：表示相对于前一点的值，如果前一点没有指定，则使用(0,0)。
WPF绘图
weixin_44549977的博客
06-17 3525
WPF的形状绘图是 2D绘图类，可以改变图形的形状，其中最常用的改变的是（Line）直线、（Rectangle）矩形、（Ellipse）椭圆、（Polygon）多边形、（Path）路径等多种图形 绘图的共有属性： Stroke：绘制图形的轮廓，画刷 StrokeThickness：图形轮廓的粗细度 StrokeStartLineCap开始点、StrokeEndLineCap结束点（可以设置...
WPF中的图形对象
最新发布
weixin_45114627的博客
08-09 1774
在WPF中可以根据需要在前台绘制自己所需要的几何开状，可设置性很丰富，而且在xaml中很好的实时性，如果是设计时还可以考虑使用Blend for Visual Studio来添加元素，它的设计交互性更高。
WPF中Canvas绘图图标
力先生C#程序开发
02-17 1813
WPF中没有绘画工具，只有属性配置和编写代码去绘制，要像CorelDraw那样作图可以转到Blend去做。课件从CorelDraw中做好图片，用Blend描绘出来，最后对绘画出来的图标进行调试。结论是WPF绘画控件图标做出来是符合预期的，比CorelDraw画图和像素画图工具更好。应该是WPF的像素可以设置到小数点后多位，实现了矢量画图。我们可以结合CorelDraw和WPF画出理想的图标和界面。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值