哪位大神可以提供一下：把GOJS生成的結構圖保存為圖片并下載下來，千恩萬謝
，我的郵箱是[email protected]如：下面的陳述句生成的結構圖
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<script src="https://bbs.csdn.net/topics/js/go.js"></script>
<script>
var rps = [
[
{
key: "001",
title: "標題文字",
text: "這是一段描述文字這是一段描述文字這是一段描述文字！~",
"bgSrc": "images/bg01.png",
"iconSrc": "images/icon01.png"
},
{
key: "002",
title: "標題文字",
text: "這是一段描述文字這是一段描述文字這是一段描述文字",
"bgSrc": "images/bg01.png",
"iconSrc": "images/icon02.png"
},
{
key: "003",
title: "標題文字",
text: "這是一段描述文字這是一段描述文字這是一段描述文字",
"bgSrc": "images/bg01.png",
"iconSrc": "images/icon03.png"
},
{
key: "004",
title: "標題文字",
text: "這是一段描述文字這是一段描述文字這是一段描述文字",
"bgSrc": "images/bg01.png",
"iconSrc": "images/icon04.png"
},
{
key: "005",
title: "標題文字",
text: "這是一段描述文字這是一段描述文字這是一段描述文字",
"bgSrc": "images/bg01.png",
"iconSrc": "images/icon05.png"
},
{
key: "006",
title: "標題文字",
text: "這是一段描述文字這是一段描述文字這是一段描述文字",
"bgSrc": "images/bg01.png",
"iconSrc": "images/icon06.png"
},
{
key: "011",
title: "標題文字",
text: "這是一段描述文字這是一段描述文字這是一段描述文字",
"bgSrc": "images/bg01.png",
"iconSrc": "images/icon07.png"
},
{
key: "012",
title: "標題文字",
text: "這是一段描述文字這是一段描述文字這是一段描述文字",
"bgSrc": "images/bg01.png",
"iconSrc": "images/icon08.png"
},
{
key: "007",
title: "標題文字",
text: "這是一段描述文字這是一段描述文字這是一段描述文字",
"bgSrc": "images/bg01.png",
"iconSrc": "images/icon09.png"
},
{
key: "008",
title: "標題文字",
text: "這是一段描述文字這是一段描述文字這是一段描述文字",
"bgSrc": "images/bg01.png",
"iconSrc": "images/icon10.png"
},
{
key: "009",
title: "標題文字",
text: "這是一段描述文字這是一段描述文字這是一段描述文字",
"bgSrc": "images/bg01.png",
"iconSrc": "images/icon11.png"
},
{
key: "010",
title: "標題文字",
text: "這是一段描述文字這是一段描述文字這是一段描述文字",
"bgSrc": "images/bg01.png",
"iconSrc": "images/icon12.png"
}
],
[
{from: "001", to: "002"},
{from: "002", to: "004"},
{from: "001", to: "003"},
{from: "003", to: "006"},
{from: "004", to: "005"},
{from: "004", to: "006"},
{from: "005", to: "011"},
{from: "006", to: "011"},
{from: "006", to: "012"},
{from: "007", to: "008"},
{from: "008", to: "009"},
{from: "009", to: "010"},
{from: "010", to: "007"}
]
];
function init(rps) {
var MAKE = go.GraphObject.make; //構建GoJS物件
//引數設定 https://gojs.net/latest/api/symbols/Diagram.html
myDiagram = MAKE(go.Diagram, "J_chartArea",
//圖表整體屬性設定
{
initialContentAlignment: go.Spot.Center, //設定整個圖表在容器中的位置 https://gojs.net/latest/api/symbols/Spot.html
allowZoom: true,
"grid.visible": false,//是否顯示背景柵格
"grid.gridCellSize": new go.Size(5, 5),//柵格大小
"commandHandler.copiesTree": false, // 禁用復制快捷鍵
"commandHandler.deletesTree": false, // 禁用洗掉快捷鍵
"toolManager.mouseWheelBehavior": go.ToolManager.WheelZoom, //啟用視圖放大縮小
allowLink: false,//是否允許拖拽連線
allowRelink: false,//是否允許重新連線
padding: 10,
//布局設定 https://gojs.net/latest/api/symbols/Layout.html
//LayeredDigraphLayout布局 https://gojs.net/latest/api/symbols/LayeredDigraphLayout.html
layout: MAKE(go.LayeredDigraphLayout,
{direction: 0, layeringOption: go.LayeredDigraphLayout.LayerLongestPathSource}),//0向右，90向下，180向左，270向上。默認值是0
"undoManager.isEnabled": false //是否啟用撤銷回退 Ctrl-Z Ctrl-Y
});
myDiagram.linkTemplate =
//設定連接線 https://gojs.net/latest/intro/links.html
MAKE(go.Link,
//設定連接線屬性
{
relinkableFrom: true,
relinkableTo: true,
corner: 12,
routing: go.Link.Orthogonal,
curve: go.Link.JumpOver
},
MAKE(go.Shape, {stroke: "#46bee9", strokeWidth: 2}),
//設定箭頭
MAKE(go.Shape, {toArrow: "Standard", stroke: "#46bee9", fill: "#46bee9"})
);
myDiagram.nodeTemplate =
MAKE(go.Node, "Horizontal",//將多個GraphObjects比如下面的Panel和Button元素垂直對齊還是水平對齊
{portId: "", fromLinkable: true, toLinkable: true},
MAKE(go.Panel, "Table",
{
defaultAlignment: go.Spot.Left
},
//圖片元素設定-背景圖 https://gojs.net/latest/intro/pictures.html
MAKE(go.Picture,
{width: 208, height: 102},
new go.Binding("source", "bgSrc")),
MAKE(go.Panel, "Table",
{defaultAlignment: go.Spot.Left},
MAKE(go.RowColumnDefinition, {column: 0, width: 48}),
//設定文本塊元素-標題
MAKE(go.TextBlock,
{
row: 0,//所在行
column: 1,//所在列
columnSpan: 2,//合并列
fromLinkable: false,
toLinkable: false,
alignment: go.Spot.Left,//文本對齊
stroke: "#fff",//顏色
margin: new go.Margin(5, 0, 0, 5),//邊距
font: "12pt helvetica, arial, sans-serif"//文字樣式
},
new go.Binding("text", "title")//系結資料
),
//設定圖片-Icon小圖示
MAKE(go.Picture,
{
row: 1,
column: 0,
width: 48,
height: 48,
background: "transparent",
alignment: go.Spot.Center,
margin: new go.Margin(0, 0, 0, 5)
},
new go.Binding("source", "iconSrc")),
//設定文本塊-詳情
MAKE(go.TextBlock,
{
row: 1,
column: 1,
stroke: "#fff",
font: "8pt sans-serif",
wrap: go.TextBlock.WrapFit,//文本換行
desiredSize: new go.Size(150, 50),//期望的區域尺寸
alignment: go.Spot.Left,
margin: new go.Margin(5, 0, 0, 5)
},
new go.Binding("text", "text")
)
)
),
//設定展開收縮按鈕
MAKE("Panel",
{width: 12, height: 12},
MAKE(go.Picture,
{width: 12, height: 12, source: "images/button.png"},
new go.Binding("visible", "isTreeLeaf",
function (leaf) {
return !leaf;
})
.ofObject()),
MAKE(go.Panel, "Table",
{visible: false, desiredSize: new go.Size(12, 12)},
//系結自定義資料
new go.Binding("visible", "isTreeLeaf",
function (leaf) {
return !leaf;
})
.ofObject(),
MAKE(go.Shape,
{
name: "ButtonIcon",
figure: "MinusLine",//自動生成幾何圖形 這里生成“-”
desiredSize: new go.Size(7, 7)//尺寸
},
new go.Binding("figure", "isCollapsed",// 根據collapsed函式的回傳值設定圖形是“+”還是“-”
function (collapsed) {
return collapsed ? "PlusLine" : "MinusLine";
})),
{
click: function (e, obj) {
e.diagram.startTransaction();
var node = obj.part;
if (node.data.isCollapsed) {
expandFrom(node, node);
} else {
collapseFrom(node, node);
}
e.diagram.commitTransaction("toggled visibility of dependencies");
}
}
)
)
);
//收縮
function collapseFrom(node, start) {
if (node.data.isCollapsed) return;
node.diagram.model.setDataProperty(node.data, "isCollapsed", true);
if (node !== start) node.visible = false;
node.findNodesOutOf().each(collapseFrom);
}
//展開
function expandFrom(node, start) {
if (!node.data.isCollapsed) return;
node.diagram.model.setDataProperty(node.data, "isCollapsed", false);
if (node !== start) node.visible = true;
node.findNodesOutOf().each(expandFrom);
}
//資料
myDiagram.model = new go.GraphLinksModel(rps[0], rps[1]);
//系結元素點擊事件
myDiagram.addDiagramListener("ObjectSingleClicked",
function (e) {
var part = e.subject.part;
if (!(part instanceof go.Link)) {
console.info(part.data.key)
}
});
}
window.onload = function () {
init(rps);
}
</script>
</head>
<body style="background:#030210">
<div>
<div id="J_chartArea" style="width:1000px; height:400px"></div>
</div>
</body>
</html>
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/121499.html
標籤：go語言
上一篇：鴻蒙系統原始碼分析(總目錄)|用故事說內核|持續更新中...
下一篇：51驅動12864顯示資料重復