当前位置: 首页 > article >正文

WPF系列八:图形控件Path

简介

Path控件支持一种称为路径迷你语言(Path Mini-Language)的紧凑字符串格式,用于描述复杂的几何图形。这种语言通过一系列命令字母和坐标来定义路径上的点和线段,最终绘制出想要的图形。

  • 绘制任意形状:可以用来绘制直线、曲线、多边形、椭圆、矩形等基本图形,也可以组合这些基本图形创建复杂形状。
  • 应用样式和效果:支持填充颜色、轮廓线(笔触)、渐变、图像刷子以及各种视觉效果。
  • 动画化图形:可以对图形的位置、大小、旋转角度等属性进行动画处理。
  • 作为剪辑区域:可以将 Path 用作其他 UI 元素的剪辑路径,以控制其可见区域。

属性

  • Data:定义要绘制的几何对象或路径指令。这是 Path 的核心属性,决定了它的外形。
  • Fill:指定用于填充 Path 内部的画刷(Brush),比如纯色、渐变或图像。
  • Stroke:设置 Path 边缘的颜色或画刷。
  • StrokeThickness:设定 Path 边缘的宽度。
  • Stretch:控制如何拉伸 Path 内的内容以适应其尺寸。可用值有 NoneFillUniform, 和 UniformToFill
  • RenderTransform:允许你对 Path 应用变换,如旋转、缩放和平移等。

命令

  • M/m - Move To:将当前位置移动到新的位置而不绘制任何东西。大写 M 表示绝对坐标,小写 m 表示相对坐标。
  • L/l - Line To:从当前位置画一条直线到指定的新位置。同样地,大写 L 是绝对坐标,小写 l 是相对坐标。
  • H/h - Horizontal Line To:画一条水平线到指定的 X 坐标位置。大写 H 使用绝对坐标,小写 h 使用相对坐标。
  • V/v - Vertical Line To:画一条垂直线到指定的 Y 坐标位置。大写 V 使用绝对坐标,小写 v 使用相对坐标。
  • C/c - Curve To:三次贝塞尔曲线。需要三个点:两个控制点和一个结束点。大写 C 使用绝对坐标,小写 c 使用相对坐标。
  • S/s - Smooth Curve To:平滑三次贝塞尔曲线。仅需指定结束点,第一个控制点自动计算为上一个 C 或 S 的反射点。大写 S 使用绝对坐标,小写 s 使用相对坐标。
  • Q/q - Quadratic Bezier Curve To:二次贝塞尔曲线。需要一个控制点和一个结束点。大写 Q 使用绝对坐标,小写 q 使用相对坐标。
  • T/t - Smooth Quadratic Bezier Curve To:平滑二次贝塞尔曲线。仅需指定结束点,控制点根据前一个 Q 或 T 自动计算。大写 T 使用绝对坐标,小写 t 使用相对坐标。
  • A/a - Elliptical Arc To:椭圆弧。需要多个参数来定义弧的形状、旋转角度、是否大弧或小弧、扫掠方向以及终点。大写 A 使用绝对坐标,小写 a 使用相对坐标。
  • Z/z - Close Path:关闭路径,即画一条直线回到路径的起始点。

示例

  • 绘制一段椭圆弧,它位于中心为 (100,100) 的点,并且以半径 50x50 绘制,直到到达 (500,100),最后用 Z 指令闭合路径。

代码:

<Window x:Class="WPFDemo.Line.Views.PathWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:WPFDemo.Line.Views"
        mc:Ignorable="d"
        Title="PathWindow" Height="450" Width="800">
    <Grid HorizontalAlignment="Center" VerticalAlignment="Center">
        <!-- 创建一个半圆图形-->
        <Path Data="M 100,100 A 50,50 0 0,1 500,100 Z" Stroke="Black" StrokeThickness="2" Fill="LightBlue"/>
    </Grid>
</Window>

效果:

  • 绘制一个三角形,起点在 (10,100),然后依次连接到 (100,100) 和 (100,50),最后用 Z 指令闭合路径。

代码:

<Window x:Class="WPFDemo.Line.Views.PathWindow1"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:WPFDemo.Line.Views"
        mc:Ignorable="d"
        Title="PathWindow1" Height="450" Width="800">
    <Grid HorizontalAlignment="Center" VerticalAlignment="Center">
        <!--创建一个三角形-->
        <Path Stroke="Red" StrokeThickness="2" Fill="Yellow" Data="M 100,100 L 400,100 L 400,400 Z" />
    </Grid>
</Window>

效果:

  • 绘制一个三次贝塞尔曲线,从 (10,100) 开始,通过控制点 (50,200) 和 (150,10),到达终点 (200,100),,最后用 Z 指令闭合路径。

代码:

<Window x:Class="WPFDemo.Line.Views.PathWindow2"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:WPFDemo.Line.Views"
        mc:Ignorable="d"
        Title="PathWindow2" Height="450" Width="800">
    <Grid HorizontalAlignment="Center" VerticalAlignment="Center">
        <!--创建一个三次贝塞尔曲线-->
        <Path Stroke="Black"  StrokeThickness="2" Fill="Red" Data="M 10,100 C 50,200 150,10 200,100 Z"/>
    </Grid>
</Window>

效果:


http://www.kler.cn/a/487564.html

相关文章:

  • 对快速由表及里说拜拜/如何正确运用由表及里
  • (长期更新)《零基础入门 ArcGIS(ArcScene) 》实验七----城市三维建模与分析(超超超详细!!!)
  • Node.js JXcore 打包教程
  • 用OpenCV实现UVC视频分屏
  • 洛谷P1617————数字转英文
  • 【Go学习】-02-1-标准库:fmt、os、time
  • GAN的应用
  • C语言Day14(c程序设计小红书+pta)
  • 物联网开发 的开发语言建议
  • 晨辉面试抽签和评分管理系统之五:面试准备时间倒计时管理
  • RK3562编译Android13 ROOT固件教程,触觉智能开发板演示
  • 用python实现烟花代码,完整代码拿走不谢
  • Vue开发系列——VUE入门?
  • Vue.js组件开发-Vue CLI如何配置浏览器兼容性
  • 《机器学习》——贝叶斯算法
  • 洛谷 P3435 [POI2006] OKR-Periods of Words(扩展KMP+线段树做法)
  • Servlet与JSP:Java的秘密花园入口
  • 基于深度模型的印章检测(c++)
  • 【什么是MVCC?】
  • 智慧防洪平台:构建城市安全的数字防线
  • java中日期如何比大小
  • OSPF - 2、3类LSA(Network-LSA、NetWork-Sunmmary-LSA)
  • Mysql--基础篇--SQL(DDL,DML,窗口函数,CET,视图,存储过程,触发器等)
  • Mysql--基础篇--约束(主键,外键,唯一,检查,枚举及复合约束等)
  • FinGPT:通过传播意识和上下文增强的LLM提升基于情感的股票走势预测
  • 设计模式 行为型 观察者模式(Observer Pattern)与 常见技术框架应用 解析