使用强悍的 WebView2 调用 Mermaid.js 很简单,aardio 源代码如下:
import win.ui;
/*DSG{{*/
var winform = win.form(text="Mermaid 是一个用于画流程图、状态图、时序图、甘特图的库";right=966;bottom=622)
winform.add(
button={cls="button";text="绘图";left=643;top=552;right=878;bottom=604;color=14120960;font=LOGFONT(h=-14);z=2};
custom={cls="custom";text="自定义控件";left=10;top=6;right=958;bottom=535;z=1}
)
/*}}*/
import web.view;
var wb = web.view(winform.custom);
wb.html = /**
Here is one mermaid diagram:
graph TD
A[Client] --> B[Load Balancer]
B --> C[Server1]
B --> D[Server2]
And here is another:
**/
//aardio 调用 Mermaid.js 绘图
winform.button.oncommand = function(id,event){
wb.xcall(`
(text)=>{
mermaid.render('graphDiv',text,(svg)=>{
var ele = document.getElementById("graphDivParent");
ele.innerHTML = "" + svg + "";
});
}`,'graph TB
a-->b')
}
winform.show();
win.loopMessage();至于 Graphviz 可以直接调用 DLL 接口,一个简单的例子:
var gvcDll = raw.loadDll("\bin\gvc.dll",,"cdecl");
var cgraphDll = raw.loadDll("\bin\cgraph.dll",,"cdecl");
renderImage = function(source,format,engine,fileName) {
var g = cgraphDll.agmemread(source);
if (!g) return null,"创建图表失败,请检查是否存在语法错误.";
var gvc = gvcDll.gvContext();
if ( !gvc || ( gvcDll.gvLayout(gvc, g, engine:"dot") != 0 ) ) {
cgraphDll.agclose(g);
return null,"布局失败.";
}
var result;
if(fileName){
result = (gvcDll.gvRenderFilename(gvc, g, format:"png", fileName) != 0);
}
else{
var data,length = {ptr p},{INT n}
if (gvcDll.gvRenderData(gvc, g, format:"png", data, length) == 0) {
result = ..raw.buffer(length.n,data.p);
}
gvcDll.gvFreeRenderData(data.p);
}
gvcDll.gvFreeLayout(gvc, g);
cgraphDll.agclose(g);
gvcDll.gvFreeContext(gvc);
return result;
};
readerFile = function(source,fileName,engine){
fileName = ..io.fullpath(fileName);
var format = ..io.splitpath(filename).ext;
if(!#format) error("错误的文件路径参数",2);
format = ..string.right(format,-2);
return renderImage(source,format,engine);
};
var data = renderImage("
strict graph {
a -- b
a -- b
b -- a [color=blue]
} ")
| 留言与评论(共有 0 条评论) “” |