From 24c392a8a4edced4dd63b453d46fc24c42656f25 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E8=89=BE=E7=AB=B9?= Date: Sun, 5 Feb 2023 12:27:44 +0000 Subject: [PATCH] update README.md. MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: 艾竹 --- README.md | 94 ++++++++++++++++++++++++++++++++++++++++++++++++++++++- 1 file changed, 93 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index d375812..c27332b 100644 --- a/README.md +++ b/README.md @@ -2,6 +2,20 @@ 先上源码地址：https://gitee.com/akwkevin/aistudio.-wpf.-diagram +### 2023年2月5号更新内容： +本次更新主要参照了一个Blazor的Diagram的画线算法，链接地址:[https://github.com/Blazor-Diagrams/Blazor.Diagrams](https://github.com/Blazor-Diagrams/Blazor.Diagrams),感谢作者。 + +本次更新主要内容 +### 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示例，帮助用户快速上手。 + 界面图： 本画板在WPF-Diagram-Designer进行的开发，界面框架使用Fluent.Ribbon的框架。 @@ -51,6 +65,8 @@ 17博客园文章地址 https://www.cnblogs.com/akwkevin/p/15047453.html + 续2： https://www.cnblogs.com/akwkevin/p/17093865.html + 相关链接地址： Fluent.Ribbon: https://github.com/fluentribbon/Fluent.Ribbon @@ -63,4 +79,80 @@ 特别感谢：https://dotnet9.com/ 的站长：dotnet9。 - 有想加入开发的朋友可以联系我。 \ No newline at end of file + 有想加入开发的朋友可以联系我。 + +### 2023年2月5号更新附加说明 +示例项目（AIStudio.Wpf.DiagramDesigner.Demo）目录如下： + +- 1 Simple 简单示例 +![](https://files.mdnice.com/user/17967/fe842a58-66a2-4908-a5bf-f440a2622481.png) +- 2 Locked 锁定节点 +- 3 Events 事件（暂未完成，敬请期待） +- 4 DynamicInsertions 动态插入（暂未完成，敬请期待） +- 5 Performance 性能（100个节点生成） +- 6 Zoom 放大缩小 +- 7 SnapToGrid 对齐到网格 +![](https://files.mdnice.com/user/17967/77111cf1-0085-4e92-805d-9dbe5aab1f16.png) +- 8 DragAndDrop 拖拽 +![](https://files.mdnice.com/user/17967/f61db71f-3ebc-45c8-b1d6-58eac9774886.png) +- 9 Nodes 节点示例 +- - 9.1 Svg svg样式 +![](https://files.mdnice.com/user/17967/90d573d5-6d20-4bc5-992e-c40be6ea8087.png) +- - 9.2 CustomDefinedNode 自定义节点 +![](https://files.mdnice.com/user/17967/72c5a386-ae80-4d35-90ef-694d3bb790cc.png) +- - 9.3 PortlessLinks 无Port的node连接 +![](https://files.mdnice.com/user/17967/5560fbba-83ba-457b-83b9-31038a0ee7e9.png) +- - 9.4 GradientNode 渐变色node +![](https://files.mdnice.com/user/17967/1a898dc7-90cb-42ca-95d0-83d335e807a0.png) +- - 9.5 Rotate 旋转node（连接线还需要优化，还算连接在旋转之前的位置上） +![](https://files.mdnice.com/user/17967/e74e141a-697a-47ec-8320-3cc4302331fe.png) +- 10 Links 连线示例 +- - 10.1 Snapping 连接线靠近节点自动连接 +- - 10.2 Labels 连接线上的文字（支持多处） +![](https://files.mdnice.com/user/17967/c16d24a8-bbea-414b-9ccb-3e369072fdd9.png) +- - 10.3 Vertices 连接线上的中间节点 +![](https://files.mdnice.com/user/17967/9e88da8e-fba2-4a7a-bfbb-3a15f553079f.png) +- - 10.4 Markers 箭头，支持自定义 +![](https://files.mdnice.com/user/17967/57b5c753-b651-4469-a0ef-b65a4b8374b8.png) +- - 10.5 Routers 连线模式 +![](https://files.mdnice.com/user/17967/fb177dfd-16b7-4ab4-a5e5-bdbbe992b086.png) +- - 10.6 PathGenerators 连线算法 +![](https://files.mdnice.com/user/17967/f15bb6d8-ec35-46c2-8ae6-0db60bed2b6a.png) +- 11 Ports 连接点示例 +- - 11.1 ColoredPort 彩色连接点，相同颜色的连接点才能连接 +![](https://files.mdnice.com/user/17967/a00a531d-ad80-4450-91b2-e658ad4771e1.png) +- - 11.2 InnerPort 内部连接点 +![](https://files.mdnice.com/user/17967/b4568cc6-ea04-4c8a-adc3-d4cf420400f0.png) +- 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 彩色字体 +![](https://files.mdnice.com/user/17967/a3275a2b-287a-4b1c-a4fe-1136e556e1a1.png) +- - 13.5 OutlineText 轮廓文本 +- 14 Customization 自定义 +- - 14.1 CustomNode 覆盖默认节点样式 +![](https://files.mdnice.com/user/17967/8aa5e91c-ce74-4251-8a04-595342936b4a.png) +- - 14.2 CustomLink 设置线条连接样式 +![](https://files.mdnice.com/user/17967/c72e67f5-7fba-4ba7-a3d8-22d88f213474.png) +- - 14.3 CustomPort 覆盖默认连接点样式 +![](https://files.mdnice.com/user/17967/f4c9e6a8-617b-46da-a6ea-3e0564a7c2cd.png) +- - 14.4 CustomGroup 覆盖默认分组样式 +![](https://files.mdnice.com/user/17967/3b49a840-569d-4d8d-9e2b-a3c0f5d9106d.png) +- 15 Algorithms 算法 +- - 14.6 ReconnectLinksToClosestPorts 重新计算，按最近的连接点连接。 +- 15 Animations +- - 15.1 PathAnimation 动画路径 +![](https://files.mdnice.com/user/17967/61c86147-c8a5-4dc7-b1e4-7a6180cab929.gif) +- - 15.2 LineAnimation 线条流动动画 +![](https://files.mdnice.com/user/17967/62734a1d-1ba0-4341-8a90-bc2f22f3da7f.gif) +- 16 Editor +- - 16.1 FlowchartEditor 工作流封装控件 + +近期会持续更新，欢迎大家光临。 +最后上一个动画流程图。 +![](https://files.mdnice.com/user/17967/902b8fc2-6af4-4cb9-8031-27c04a349a1d.gif) \ No newline at end of file