首页 > 其他分享 >用Wpf做一个Diagram画板(续2)(包含封装一个控件FlowchartEditor)

用Wpf做一个Diagram画板(续2)(包含封装一个控件FlowchartEditor)

时间:2023-02-05 20:00:24浏览次数:58  
标签:控件 自定义 示例 连接点 FlowchartEditor 连线 连接 Diagram 节点

据上一次更新https://www.cnblogs.com/akwkevin/p/15047453.html已经1年有余,本次更新主要参照了一个Blazor的Diagram的画线算法,链接地址:https://github.com/Blazor-Diagrams/Blazor.Diagrams,感谢作者。

同样老规矩,先上源码地址:https://gitee.com/akwkevin/aistudio.-wpf.-diagram

本次更新主要内容

1.连线改进,新增连线算法,目前共4种连线:Smooth(曲线),Straight(直线),Boundary(网格边界连接模式),Corner(折线)

2.序列化改进,xml与json序列化,新增自定义元素后,无需更改根元素,只需要在新增的元素上添加序列化的对象即可,扩展性更灵活了。

3.箭头改进,箭头按照连线的实际角度显示(即0-360度),还支持自定义的箭头path。

4.新增快捷键自定义扩展,用户可根据自己的习惯定义快捷键。

5.封装了一个标准的工作流控件FlowchartEditor,具体使用可以参照开源权限管理框架种的用法: https://gitee.com/akwkevin/aistudio.-wpf.-aclient

6.连接上添加动画:路径动画效果和线条流动效果。

7.改变结构,使用户更容易自定义自己的样式,覆盖系统默认样式。

8.从Blazor.Diagrams种引入PortlessLinks(直接连接两个node,不需要port),自动连接节点Snapping,按距离最近连接ReconnectLinksToClosestPorts

9.新增Demo示例,帮助用户快速上手。

示例项目(AIStudio.Wpf.DiagramDesigner.Demo)目录如下:

  • 1 Simple 简单示例
  • 2 Locked 锁定节点
  • 3 Events 事件(暂未完成,敬请期待)
  • 4 DynamicInsertions 动态插入(暂未完成,敬请期待)
  • 5 Performance 性能(100个节点生成)
  • 6 Zoom 放大缩小
  • 7 SnapToGrid 对齐到网格
  • 8 DragAndDrop 拖拽
  • 9 Nodes 节点示例
    • 9.1 Svg svg样式
    • 9.2 CustomDefinedNode 自定义节点
    • 9.3 PortlessLinks 无Port的node连接
    • 9.4 GradientNode 渐变色node
    • 9.5 Rotate 旋转node(连接线还需要优化,还算连接在旋转之前的位置上)
  • 10 Links 连线示例
    • 10.1 Snapping 连接线靠近节点自动连接
    • 10.2 Labels 连接线上的文字(支持多处)
    • 10.3 Vertices 连接线上的中间节点
    • 10.4 Markers 箭头,支持自定义
    • 10.5 Routers 连线模式
    • 10.6 PathGenerators 连线算法
  • 11 Ports 连接点示例
    • 11.1 ColoredPort 彩色连接点,相同颜色的连接点才能连接
    • 11.2 InnerPort 内部连接点
  • 12 Groups 分组示例
    • 12.1 Group 分组
    • 12.2 CustomDefinedGroup 自定义分组
    • 12.3 CustomShortcutGroup 自定义分组快捷键
  • 13 Texts 文本节点示例
    • 13.1 Text 文本
    • 13.2 Alignment 对齐方式
    • 13.3 FontSize 字体大小
    • 13.4 ColorText 彩色字体
    • 13.5 OutlineText 轮廓文本
  • 14 Customization 自定义
    • 14.1 CustomNode 覆盖默认节点样式
    • 14.2 CustomLink 设置线条连接样式
    • 14.3 CustomPort 覆盖默认连接点样式
    • 14.4 CustomGroup 覆盖默认分组样式
  • 15 Algorithms 算法
    • 14.6 ReconnectLinksToClosestPorts 重新计算,按最近的连接点连接。
  • 15 Animations
    • 15.1 PathAnimation 动画路径
    • 15.2 LineAnimation 线条流动动画
  • 16 Editor
    • 16.1 FlowchartEditor 工作流封装控件

近期会持续更新,欢迎大家光临。 最后上一个动画流程图。

标签:控件,自定义,示例,连接点,FlowchartEditor,连线,连接,Diagram,节点
From: https://www.cnblogs.com/akwkevin/p/17093865.html

相关文章

  • MAUI新生6.9-控件辅助功能①:动画Animation
    一、基本使用1、MAUI为所有VisualElement对象,定义了一系列动画扩展方法,所以控制动画的原理很简单,在UI层通过x:Name定义视觉对象的变量名(或在后台代码中直接创建视觉对象),然......
  • B/S端界面控件DevExtreme v22.2新功能 - 如何在日历中显示周数?
    DevExtreme拥有高性能的HTML5/JavaScript小部件集合,使您可以利用现代Web开发堆栈(包括React,Angular,ASP.NETCore,jQuery,Knockout等)构建交互式的Web应用程序,该套件附带功能......
  • WPF调用winfrom控件
    1.导包在引用处添加System.Windows.Fotms和WindowsFormslntegration2.xaml部分在需要使用控件的页面添加引用xmlns:wf="clr-namespace:System.Windows.Forms;assembly=......
  • WPF控件模板查看
    背景在使用WPF的过程中,经常需要对控件的外观进行定制,这个时候查看其原有的样式或者模板进行参考就很有必要了。这样一能够减少许多工作,只修改需要的部分,二能够避免修改模......
  • MAUI新生6.4-集合内容类控件难点:CollectionView
    一、基本使用(数据源在ViewModel中硬编码)//①在Models文件夹下,新建Employee.cs文件,创建Employee类型publicclassEmployee{publicintId{get;set;}publ......
  • input控件中datetime-local的默认值设置
     <inputtype="datetime-local"id="CreateTime"name="CreateTime"value="@Model.CreateTime.ToString("yyyy-MM-ddHH:mm")"/>  上面这样子写是通常写法,PC......
  • Revit二次开发针对类库项目中WPF界面如何引用第三方控件库HandyControl的方法
    起因是当使用类库作为WPF界面的项目时,项目中没有App.xaml,也就导致没有办法在全局资源中统一设置HandyControl的资源。解决方案很简单安装完HandyControl库后,在Window中加......
  • 行业领先的界面控件包 DevExpress v22.2.4 开年震撼发布
    DevExpressUniversal拥有.NET开发需要的所有平台控件,包含600多个UI控件、报表平台、DevExpressDashboardeXpressApp框架、适用于VisualStudio的CodeRush等一系列辅助......
  • WPF开发经验-实现一种三轴机械手控件
    一引入 考虑实现一种三轴机器人控件。三轴机器人用来将某种工件从一个位置运送到另一个位置。其X轴为手臂轴,可以正向和反向运动,它处于末端,直接接触工件;其T轴为旋转......
  • WPF中使用WebView2控件
    目录WebView2简介概述优势支持的运行时平台进程模型基本使用安装WebView2运行时安装WebView2Sdk打开一个网页导航事件打开一个网页的过程更改url的过程空url进阶使用WPF和W......