gojs基础

最新推荐文章于 2024-07-05 13:58:39 发布

努力学习滴程序媛

最新推荐文章于 2024-07-05 13:58:39 发布

阅读量528

点赞数

分类专栏： gojs

本文链接：https://blog.csdn.net/qq_28529373/article/details/81983661

版权

gojs 专栏收录该内容

7 篇文章 2 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>GOJS使用步骤</title>
		<script src="js/go.js"></script>
	</head>
	<body onload="init()">
		<!--1、创建一个html元素，作为我们的画布-->
		<div id="myDiagramDiv" style="width: 100%; height: 600px; border: 1px solid #000;"></div>
	</body>
</html>
<script>
	function init () {
		/* 2、使用gojs的api初始化画布 */
		var objGo = go.GraphObject.make;	//创建画布
		var myDiagram = objGo(go.Diagram, "myDiagramDiv",
		{
			//模型图的中心位置所在坐标
			initialContentAlignment: go.Spot.Center,
			
			//允许用户操作图表的时候使用Ctrl-Z撤销和Ctrl-Y重做快捷键
			"undoManager.isEnabled": true,
			
			//不运行用户改变图表的规模
			allowZoom: false,
			
			//画布上面是否出现网格
			"grid.visible": true,
			
			//允许在画布上面双击时创建节点
			"clickCreatingTool.archetypeNodeData": {text: "Node"},
			
			//允许使用ctrl+c、ctrl+v复制粘贴
			"commandHandler.copiesTree": true,
			
			//允许使用delete键删除节点
			"commandHandler.deletesTree": true,
			
			//移动和复制拖动
			"draggingTool.dragsTree": true
		});
		
		/* 3、创建模型数据（Model）*/
		var myModel = objGo(go.GraphLinksModel);	//创建Model对象
		
		/* 4、创建节点 */
		myDiagram.nodeTemplate = 
			objGo(go.Node, "Horizontal", // 横向布局的面板
				{background: "#44CCFF"},// 节点淡蓝色背景
				objGo(go.Shape, "RoundedRectangle", // 定义形状，这是圆角矩形
					{
						//Shape的参数、宽高颜色等等
						figure: "Club",
						width: 40,
						height: 60,
						margin: 4,
						fill: 'red'
					},
					//绑定Shape.figure属性为Node.data.fig的值，Model对象可以通过Node.data.fig获取和设置Shape.figure(修改形状)
					new go.Binding("figure", "fig"),
					new go.Binding("fill", "fill2")
				),
				objGo(go.TextBlock, "Default Text", // 默认文本
					//设置字体大小颜色以及边框
					{margin: 12,stroke: "white",font: "bold 16px sans-serif"},
					//绑定TextBlock.text 属性为Node.data.name的值，Model对象可以通过Node.data.name获取和设置TextBlock.text
					new go.Binding("text", "name")
				)
			)
			
		//model中的数据每一个js对象都代表着一个相应的模型图中的元素
		myModel.nodeDataArray = [
			{ key: "aaa", name: "工厂", fig: 'YinYang', fill2: 'blue' },
            { key: "bbb", name: "车间", fig: 'Peace', fill2: 'red' },
            { key: "ccc", name: "工人", fig: 'NotAllowed', fill2: 'green' },
            { key: "ddd", name: "岗位", fig: 'Grape', fill2: 'yellow' }
		];
		
		myModel.linkDataArray = [
			{from: "aaa", to: "bbb"},
			{from: "ccc", to: "bbb"},
			{from: "aaa", to: "ddd"},
		]
		myDiagram.model = myModel; //将模型数据绑定在画布图上
	}
</script>

努力学习滴程序媛

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
gojs基础

&lt;!DOCTYPE html&gt;&lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;GOJS使用步骤&lt;/title&gt; &lt;script src="js/go.js"&gt;&lt;/script&gt; &
复制链接

扫一扫

专栏目录