广西建设网站首页,做响应式网站制作,上传网站页面打不开怎么办,wordpress还是自己写.NET手撸绘制TypeScript类图——下篇在上篇的文章中#xff0c;我们介绍了如何使用 .NET解析 TypeScript#xff0c;这篇将介绍如何使用代码将类图渲染出来。类型定义渲染不出意外#xff0c;我们继续使用 FlysEngine。虽然文字排版没做过#xff0c;但不试试怎么知道好不好… .NET手撸绘制TypeScript类图——下篇在上篇的文章中我们介绍了如何使用 .NET解析 TypeScript这篇将介绍如何使用代码将类图渲染出来。类型定义渲染不出意外我们继续使用 FlysEngine。虽然文字排版没做过但不试试怎么知道好不好做呢正常实时渲染时画一两行文字可能很容易但绘制大量文字时就需要引入一些排版操作了。为了实现排板首先需要将 ClassDef类扩充一下——干脆再加个 RenderingClassDef类包含一个 ClassDefclass RenderingClassDef
{ public ClassDef Def { get; set; } public Vector2 Position { get; set; } public Vector2 Size { get; set; } public Vector2 Center Position Size / 2;
}它包含了一些位置和大小信息并提供了一个中间值的变量。之所以这样定义因为这里存在了一些挺麻烦的过程比如想想以下操作如果我想绘制放在中间的 类名我就必须知道所有行的宽度如果我想绘制边框我也必须知道所有行的高度还好 Direct2D/ DirectWrite提供了方块的文字宽度、高度计算属性通过 .Metrics即可获取。有了这个排板过程中我认为最难处理的是 y坐标了它是一个状态机需要实时去更新、计算 y坐标的位置绘制过程如下foreach (var classDef in AllClass.Values)
{ ctx.FillRectangle(new RectangleF(classDef.Position.X, classDef.Position.Y, classDef.Size.X, classDef.Size.Y), XResource.GetColor(Color.AliceBlue)); var position classDef.Position; ListTextLayout lines classDef.Def.Properties.OrderByDescending(x x.IsPublic).Select(x x.ToString()) .Concat(new string[] { }) .Concat(classDef.Def.Methods.OrderByDescending(m m.IsPublic).Select(x x.ToString())) .Select(x XResource.TextLayouts[x, FontSize]) .ToList(); TextLayout titleLayout XResource.TextLayouts[classDef.Def.Name, FontSize 3]; float width Math.Max(titleLayout.Metrics.Width, lines.Max(x x.Metrics.Width)) MarginLR * 2; ctx.DrawTextLayout(new Vector2(position.X (width - titleLayout.DetermineMinWidth()) / 2 MarginLR, position.Y), titleLayout, XResource.GetColor(Color.Black)); ctx.DrawLine(new Vector2(position.X, position.Y titleLayout.Metrics.Height), new Vector2(position.X width, position.Y titleLayout.Metrics.Height), XResource.GetColor(TextColor), 2.0f); float y lines.Aggregate(position.Y titleLayout.Metrics.Height, (y, pt) { if (pt.Metrics.Width 0) { ctx.DrawLine(new Vector2(position.X, y), new Vector2(position.X width, y), XResource.GetColor(TextColor), 2.0f); return y; } else { ctx.DrawTextLayout(new Vector2(position.X MarginLR, y), pt, XResource.GetColor(TextColor)); return y pt.Metrics.Height; } }); float height y - position.Y; ctx.DrawRectangle(new RectangleF(position.X, position.Y, width, height), XResource.GetColor(TextColor), 2.0f); classDef.Size new Vector2(width, height);
}请注意变量 y的使用我使用了一个 LINQ中的 Aggregate实时的绘制并统计 y变量的最新值让代码简化了不少。这里我又取巧了正常文章排板应该是 x和 y都需要更新但这里每个定义都固定为一行因此我不需要关心 x的位置。但如果您想搞一些更骚的操作如所有类型着个色这时只需要同时更新 x和 y即可。此时渲染出来效果如下 可见 类图可能太小我们可能需要局部放大一点然后类图之间产生了重叠我们需要拖拽的方式来移动到正确位置。放大和缩小由于我们使用了 Direct2D无损的高清放大变得非常容易首先我们需要定义一个变量并响应鼠标滚轮事件Vector2 mousePos;
Matrix3x2 worldTransform Matrix3x2.Identity;
protected override void OnMouseWheel(MouseEventArgs e)
{ float scale MathF.Pow(1.1f, e.Delta / 120.0f); worldTransform * Matrix3x2.Scaling(scale, scale, mousePos);
}其中魔术值 1.1代表鼠标每滚动一次放大 1.1倍。另外 mousePos变量由鼠标移动事件的 X和 Y坐标经 worldTransform的逆变换计算而来protected override void OnMouseMove(MouseEventArgs e)
{ mousePos XResource.InvertTransformPoint(worldTransform, new Vector2(e.X, e.Y));
}注意矩阵逆变换涉及一些高等数学中的线性代数知识没必要立即掌握。只需知道矩阵变换可以变换点位置矩阵逆变换可以恢复原点的位置。在本文中鼠标移动的坐标是窗体提供的换算成真实坐标即需要进行“矩阵逆变换”——这在碰撞检测中很常见。以防我有需要我们还再加一个快捷键按空格即可立即恢复缩放protected override void OnKeyUp(KeyEventArgs e)
{ if (e.KeyCode Keys.Space) worldTransform Matrix3x2.Identity;
}然后在 OnDraw事件中将 worldTransform应用起来即可protected override void OnDraw(DeviceContext ctx)
{ ctx.Clear(Color.White); ctx.Transform worldTransform; // 重点 // 其它代码...
}运行效果如下注意放大缩小时会以鼠标位置为中心点进行 碰撞检测和拖拽拖拽而已为什么会和碰撞检测有关呢这是因为拖拽时必须知道鼠标是否处于元素的上方这就需要碰撞检测了。首先给 RenderingClassDef方法加一个 TestPoint()方法判断是鼠标是否与绘制位置重叠这里我使用了 SharpDX提供的 RectangleF.Contains(Vector2)方法具体算法已经不用关心调用函数即可class RenderingClassDef
{ // 其它代码... public bool TestPoint(Vector2 point) new RectangleF(Position.X, Position.Y, Size.X, Size.Y).Contains(point);
}然后在 OnDraw方法中做一个判断如果类方框与鼠标出现重叠则画一个宽度 2.0的红色的边框代码如下if (classDef.TestPoint(mousePos))
{ ctx.DrawRectangle(new RectangleF(classDef.Position.X, classDef.Position.Y, classDef.Size.X, classDef.Size.Y), XResource.GetColor(Color.Red), 2.0f);
}测试效果如下注意鼠标位置和红框 碰撞检测做好就能写代码拖拽了。要实现拖拽首先需要在 RenderingClassDef类中定义两个变量用于保存其起始位置和鼠标起始位置用于计算鼠标移动距离class RenderingClassDef
{ // 其它定义... public Vector2? CapturedPosition { get; set; } public Vector2 OriginPosition { get; set; }
}然后在鼠标按下、鼠标移动、鼠标松开时进行判断如果鼠标按下时处于某个类的方框里面则记录这两个起始值protected override void OnMouseDown(MouseEventArgs e)
{ foreach (var item in this.AllClass.Values) { item.CapturedPosition null; } foreach (var item in this.AllClass.Values) { if (item.TestPoint(mousePos)) { item.CapturedPosition mousePos; item.OriginPosition item.Position; return; } }
}如果鼠标移动时且有类的方框处于有值的状态则计算偏移量并让该方框随着鼠标移动protected override void OnMouseMove(MouseEventArgs e)
{ mousePos XResource.InvertTransformPoint(worldTransform, new Vector2(e.X, e.Y)); foreach (var item in this.AllClass.Values) { if (item.CapturedPosition ! null) { item.Position item.OriginPosition mousePos - item.CapturedPosition.Value; return; } }
}如果鼠标松开则清除该记录值protected override void OnMouseUp(MouseEventArgs e)
{ foreach (var item in this.AllClass.Values) { item.CapturedPosition null; }
}此时运行效果如下 类型间的关系类型和类型之间是有依赖关系的这也应该通过图形的方式体现出来。使用 DeviceContext.DrawLine()方法即可画出线条注意先画的会被后画的覆盖因此这个 foreach需要放在 OnDraw方法的 foreach语句之前foreach (var classDef in AllClass.Values)
{ Liststring allTypes classDef.Def.Properties.Select(x x.Type).ToList(); foreach (var kv in AllClass.Where(x allTypes.Contains(x.Key))) { ctx.DrawLine(classDef.Center, kv.Value.Center, XResource.GetColor(Color.Gray), 2.0f); }
}此时运行效果如下 注意在真正的 UML图中除了依赖关系继承关系也是需要体现的。而且线条是有箭头、且线条类型也是有讲究的 Direct2D支持自定义线条这些都能做权当留给各位自己去挑战尝试了。方框顺序现在我们不能决定哪个在前哪个在后想象中方框可能应该就像窗体一样客户点击哪个哪个就应该提到最前这可以通过一个 ZIndex变量来表示首先在 RenderingClassDef类中加一个属性public int ZIndex { get; set; } 0;然后在鼠标点击事件中判断如果击中该类的方框则将 ZIndex赋值为最大值加1protected override void OnClick(EventArgs e)
{ foreach (var item in this.AllClass.Values) { if (item.TestPoint(mousePos)) { item.ZIndex this.AllClass.Values.Max(v v.ZIndex) 1; } }
}然后在 OnDraw方法的第二个 foreach循环改成按 ZIndex从小到大排序渲染即可// 其它代码...
foreach (var classDef in AllClass.Values.OrderBy(x x.ZIndex))
// 其它代码...运行效果如下注意我的鼠标点击和前后顺序 总结其实这是一个真实的需求我们公司写代码时要求设计文档通常我们都使用 ProcessOn等工具来绘制但前端开发者通过需要面对好几屏幕的类、方法和属性然后弄将其名称、参数和类型一一拷贝到该工具中这是一个需要极大耐心的工作。“哪里有需求哪里就有办法”这个小工具也许能给我们的客户少许帮助我正准备“说干就干”时——有人提醒我我们的开发流程要先出文档再写代码。所以……理论上不应该存在这种工具但后来有一天某同事突然点醒了我“为什么不能有呢这就叫 CodeFirst设计”——是啊 EntityFramework也提供了 CodeFirst设计很合理嘛所以最后就有了本篇文章。微信公众号无法评论有什么想法各位可以转至我的博客园留言/评论/点赞https://www.cnblogs.com/sdflysha/p/20191114-ts-uml-with-dotnet-2.html本文所用到的完整代码可以在我的 Github仓库中下载https://github.com/sdcb/blog-data/tree/master/2019/20191113-ts-uml-with-dotnet
