Skip to content

Uni-Gal/UniGal-Render

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

18 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

UniGal-Render

Official Render BE&FE of UniGal-Diagram


Render是将离散化的Diagram文件输出为便于直观观看的图片或以代码形式定义的伪图片的工具

综述

渲染一套文件,暂定需要以下几个步骤

  1. [后端]文件树的构建
  2. [后端]通过深度广度确定图幅规格
  3. [前端]绘图
  4. [前端]输出

接下来将逐个环节进行分析

文件树的构建

首先,所有文件应全部放在同一个文件夹内,并且这个文件夹内不存在与此无关的节点

每个节点对应一个unigal文件(XML文件)

构建树需要遍历整个目录找到文件列表,并以遍历的形式在这些文件中找到开始节点所在的文件。

伪代码如下

def this_file_is_start(i):
    if xpath("node/type/start")>=0:
        return this_node_is_start_i_times
    else:
        return this_node_is_not_start

for i in filelist:
    if this_file_is_start(i)==1:
        search_other_nodes_at(i)
    else:
        do nothing just wait i++

因为可能有很多个周目的入口,所以构建一个vector<node> start_node_list来分别操作

在内存中构建一个树,树的每个节点是一个结构体,这个结构体和node中的内容完全一致。每读取一个node,就在内存中的树中创建它。

在第一个周目涉及的节点全部读取完后读取第二周目涉及的节点。

若节点的ID表示这个节点已经读取了,就什么也不做,否则就读取。

这样可以把整个网络全都读取一遍。

之后我们得到了一个头节点的指针。

通过深度广度确定图幅规格

图像可以是横向的展示方式(如隐形守护者、墨心),可以是纵向的展示方式(如千恋万花、V’s M)

我们把这个不可滚动的成为广度轴,可以随着时间线滚动的称为深度轴。

纵向展示方式中纵向为深度轴,横向展示方式中横向为深度轴。

深度轴的长度由树的层数来确定,一般数量较大但容易构建。

广度轴的长度需要确定每层最多存在的节点个数,作为总的广度。同时为方便渲染,需要构建vector<node> guangdu_list分别记录每层的广度

通过这两个来计算每个节点绘制的中心位置

绘图

根据中心位置和css中设置的节点样式参数,绘制每个节点(画圆画方绘文字,长宽高间和字号)

之后保存输出。这一步可以本地位图buffer去逐像素操作,也可以前端用canvas实现。

输出

  1. 如果您选择输出图片(二进制) (建议不要在技术领域使用二进制文件,这会造成二进制污染)

    1. 位图BMP
    2. 位图PNG
  2. 如果您选择输出图片(代码定义)

    1. 矢量SVG(默认并优先实现的(你愿意用svgpp也挺好,不过自己写前端去吧))
  3. 如果您选择输出由代码定义的伪图片(主要是方便您内嵌)

    1. Markdown-mermaid(方便您嵌入文档)
    2. flowchart.js(方便您嵌入网页)

总结

总之需要一个具有XML解析的功能作为后端(无论是C还是py还是js),一个图像处理作为前端(无论是浏览器化还是native),保存为位图或矢量图。

满足这三点,就可以构建一个UniGal-Diagram的渲染器。我们正试图使用pugixml和C++开发后端,前后分离但仅为低程度的文件级分离,而非整个Solution解决方案或者整个Project级别的。

Diagram和Script两个组是同等地位的。虽然Diagram的渲染和解析不和Script组统一,但是Diagram组一样可以自己提出自己的UEP提案,一样可以参与UEP的讨论

Packages

No packages published

Languages