实现UML 序列图 -- csdn MarkDown 第六篇 技术篇
来源:互联网 发布:淘宝网店经营 编辑:程序博客网 时间:2024/06/02 23:43
这一篇开始讨论代码层面的问题。主要是markdown的功能的设计实现。
这一篇先从markdown外围的代码开始讲起:
UML序列图是从https://github.com/bramp/js-sequence-diagrams copy得到的。
当如这个UML代码还用到了两个JS,功能库和画图.
<script src="underscore-min.js"></script><script src="raphael-min.js"></script>
首先讲讲这个JS最核心的类:
https://github.com/bramp/js-sequence-diagrams/blob/master/src/sequence-diagram.js
首先这个类分为其实使用两种风格的。一种就是现在CSDN采用的风格,叫做simple. 另外一种是手绘风格,叫做hand。定义如下:
var themes = {simple : RaphaelTheme,hand : HandRaphaelTheme};
Diagram.prototype.drawSVG = function (container, options) {var default_options = {theme: 'hand'};options = _.defaults(options || {}, default_options);if (!(options.theme in themes))throw new Error("Unsupported theme: " + options.theme);var drawing = new themes[options.theme](this);drawing.draw(container);}; // end of drawSVG
drawSVG是最外层JS要画图调用的方法。例如:
<div id="diagram">Diagram will be placed here</div><script src="sequence-diagram-min.js"></script><script> var diagram = Diagram.parse("A->B: Does something"); diagram.drawSVG('diagram');</script>
下面就可以画出图形。所以drawSVG是核心入口。
drawSVG的实现过程中,最重要的一句:
drawing.draw(container);
这一句调用的draw function定义如下:
draw : function(container) { var diagram = this.diagram; this.init_paper(container); this.init_font(); this.layout(); var title_height = this._title ? this._title.height : 0; this._paper.setStart(); this._paper.setSize(diagram.width, diagram.height); var y = DIAGRAM_MARGIN + title_height; this.draw_title(); this.draw_actors(y); this.draw_signals(y + this._actors_height); this._paper.setFinish();},
这几句看起来平淡无奇,就是初始化背景,初始化字体,初始化各种,然后画标题,画角色(也就是序列图中的实体),画调用箭头。
这里面看似简单,但是最为繁琐的就是:
this.layout();
布局:要遍历所有的要画到画布上的东西,要提前预知,各个东西的长宽,然后根据长宽,各个东西相距的距离,算出画布的尺寸。这段JS并没有做到固定长宽后,各个东西等比缩放。
这个做完之后,开始画角色(也就是实体)
再然后,两个角色之间是有间距的。例如:
间距的计算并不是很容易,首先确定每个角色的基本的高和宽,然后根据将信号signal计算在内(signal 包括两种,一种是 箭头关系,另外一种是 注释框)所以大家可以看到注释框和箭头也是有从上到下的顺序的。signal的宽度和字的个数以及宽度均有关系(这里计算较为复杂,此处略去太多字…有兴趣的看源码)。
然后顺序遍历,依次确定A,B,C…各个角色所在的绝对坐标。
每一个signal都是有高度的,将所有的signal 高度加和,就得到了下端角色方框的坐标。然后连线就大功告成。
看源码发现了许多没有的功能…
例如 UML中增加title
以及UML中注释框除了Right, Left, 还有Over, 对于Over还可以置于多个角色之上。
title 和 Over
```sequencetitle: 距离是什么?A->B: 我们两个角色之间的间距Note Over A,B: 包括上下两个方块和中间的竖线Note Over A: I'm A```
表现:
https://github.com/bramp/js-sequence-diagrams/blob/master/src/jquery-plugin.js
这个类中,如果没有定义option属性,那么就只能用simple的形式了。感觉CSDN的dev好像没有定义这个option. 我这边也无能为力。
[https://github.com/bramp/js-sequence-diagrams/blob/master/src/diagram.js] 这个类没有什么好讲的,就是通过parser构造出来的实体类。
剩下的两个gammar JS. 这种词法解析的放到后面一篇再说. 网络实在不好,啥都timeout, 另外也该睡觉了。
- 实现UML 序列图 -- csdn MarkDown 第六篇 技术篇
- JS 实现UML序列图 (二)-- csdn MarkDown 第七篇 技术篇
- CSDN-Markdown编辑器之UML序列图
- CSDN-Markdown编辑器之UML序列图
- CSDN markdown 编辑器 第五篇 UML
- Markdown-06UML序列图
- CSDN Markdown简明教程4-UML图
- CSDN Markdown简明教程4-UML图
- CSDN Markdown简明教程4-UML图
- CSDN Markdown简明教程4-UML图
- 0.4 CSDN Markdown简明教程4-UML图
- CSDN-markdown 语法篇
- 第六篇:深入浅出UML类图(三)
- markdown画UML图
- MarkDown绘制UML图
- MarkDown UML图学习
- UML 序列图
- UML序列图详解
- 读取通达信日线数据
- Linux程序设计(Linux shell编程十一)
- IOS持续的后台定位
- JAVA设计模式(二十)——备忘录模式
- Linux启动过程概述(X86)
- 实现UML 序列图 -- csdn MarkDown 第六篇 技术篇
- Java synchronized 用法
- 程序员练级攻略(CoolShell)
- GDUT 游戏王(状压DP)
- horizon is easy and complex
- UEditor
- OSI七层模型详解
- maven
- POJ 3744 Scout YYF I (概率dp+矩阵优化)