本章主要是介绍WPF中Path绘制的使用及阿里巴巴矢量图库图标的使用

工控小王儿

于 2024-11-24 22:13:48 发布

阅读量986

点赞数 17

CC 4.0 BY-SA版权

文章标签： wpf

本文链接：https://blog.csdn.net/qq_44774906/article/details/144014657

首先是Path的路径绘制介绍：

1. M0,0:
M 表示移动到一个点。M0,0 将当前位置移动到坐标 (0, 0)。

2. L0,10:
L 表示绘制一条直线到指定的点。L0,10 从当前位置 (0, 0) 绘制一条直线到 (0, 10)。

3. L166,33:
从 (0, 10) 绘制一条直线到 (166, 33)。

4. A10 10 0 0 0 175 31:
   A 表示绘制一个弧线。这个弧线的参数如下：
     10 10: 弧线的 x 半径和 y 半径。
     0: 旋转角度（这里不旋转）。
     0: 大弧标志（0 表示绘制小弧）。
     0: 方向标志（0 表示顺时针）。
     175 31: 弧线的终点坐标。
    这条弧线从 (166, 33) 到 (175, 31)。

5. L186,10:
    从 (175, 31) 绘制一条直线到 (186, 10)。6. A15,10 0 0 1 200 5:
    另一个弧线，参数如下：
     15,10: 弧线的 x 半径和 y 半径。
     0: 旋转角度。
     0: 大弧标志（0 表示绘制小弧）。
     1: 方向标志（1 表示逆时针）。
     200 5: 弧线的终点坐标。
    这条弧线从 (186, 10) 到 (200, 5)。

7. L880,5:
从 (200, 5) 绘制一条直线到 (880, 5)。

8. L880,0:
从 (880, 5) 绘制一条直线到 (880, 0)。

9. z:
z 表示关闭路径，连接到起始点 (0, 0)。

### 路径的形状

根据以上的解析，这条路径绘制的形状如下：

从 (0, 0) 开始，向下到 (0, 10)。
然后向右到 (166, 33)，接着绘制一个小弧线到 (175, 31)。
再向右到 (186, 10)，并绘制另一个弧线到 (200, 5)。
然后继续向右到 (880, 5)。
再向上到 (880, 0)。
最后关闭路径，回到起始点 (0, 0)。

        <Path Data="M0,0 L0,25
              L166,25 A10,10 0 0 0 175,20
            L180,12 A15,8 0 0 1 195,9 L880,9 L880,0 Z"  StrokeThickness="1" Stretch="UniformToFill" RenderTransformOrigin="1,1">
            <Path.RenderTransform>
                <ScaleTransform ScaleX="1" ScaleY="1" />
            </Path.RenderTransform>
            <Path.Fill>
                <RadialGradientBrush RadiusX="0.6" RadiusY="1.8" Center="0.5,1.5" >
                    <GradientStop Color="#409EFE" Offset="0"/>
                    <GradientStop Color="#3269DE" Offset="1"/>
                </RadialGradientBrush>
            </Path.Fill>
            <Path.Effect>
                <DropShadowEffect BlurRadius="10" ShadowDepth="2" Direction="270" Color="Black" Opacity="0.2"/>
            </Path.Effect>
        </Path>

一、阿里巴巴矢量图库图标的使用

            <TextBlock Text="&#xe699;" FontSize="20" FontFamily ="pack://Application:,,,/WpfApp2;component/fonts/iconfont.ttf#iconfont" Margin="280,10,0,0" FontWeight="Bold" VerticalAlignment="Center"/>

1.为图标代码号；

2.pack://Application:,,,/WpfApp2;component/fonts/iconfont.ttf 文件路径

3.#iconfont字体类型