GOJS 字段说明

要创建一个Node,我们可以使用几个构建块类:

Shape,用于显示带颜色的预定义或自定义几何体
TextBlock,以各种字体显示(可编辑的)文本
Picture,显示图片
Panel,用于容纳其他物体的集合的容器,可以根据面板的类型(如桌子,垂直堆叠和拉伸容器)以不同的方式定位和调整尺寸

基础样例

在这里插入图片描述


	myDiagram =
		$(go.Diagram, "myDiagramDiv",  // create a Diagram for the DIV HTML element
		  {
		// allow double-click in background to create a new node
		"clickCreatingTool.archetypeNodeData": { text: "Node", color: "white" },
		// allow Ctrl-G to call groupSelection()
		"commandHandler.archetypeGroupData": { text: "Group", isGroup: true, color: "blue" },
		// enable undo & redo
		"undoManager.isEnabled": true
	});



	myDiagram.nodeTemplate =
		$(go.Node, "Horizontal",            //Horizontal 图像与文字是水平关系   Vertical是垂直  Auto自动  Table表格
			{ locationSpot: go.Spot.Center },   //定位点将位于每个节点的中心
			$(go.Shape, "RoundedRectangle",    //圆角矩形
			{
				fill: "white", // the default fill, if there is no data bound value 如果没有数据绑定值,则使用默认填充
				portId: "", 
				cursor: "pointer",  // the Shape is the port, not the whole Node 形状是端口,而不是整个节点,鼠标移到节点上的时候变成的形状,小手,或者问号
				// allow all kinds of links from and to this port
				fromLinkable: true, fromLinkableSelfNode: true, fromLinkableDuplicates: true, //允许该节点接收拖过来的连接线, 设置端口是否可以自己连自己  , 设置端口是否允许重复连接的线,
				toLinkable: true, toLinkableSelfNode: true, toLinkableDuplicates: true
			},
			new go.Binding("fill", "color")),
		    $(go.TextBlock,
			{
				font: "bold 14px sans-serif",   //字体风格
				stroke: '#333',    //字体颜色
				margin: 6,  // make some extra space for the shape around the text  //边距
				isMultiline: false,  // don't allow newlines in text  true为允许换行    ,false不允许
				editable: true  // allow in-place editing by user        文字可修改
			},
			new go.Binding("text", "text").makeTwoWay()),  // the label shows the node data's text
		    { // this tooltip Adornment is shared by all nodes  //提示框  此工具提示装饰由所有节点共享
				toolTip:
				$("ToolTip",
				  $(go.TextBlock, { margin: 4 },  // the tooltip shows the result of calling nodeInfo(data)
					new go.Binding("text", "", nodeInfo))
				 ),
				// this context menu Adornment is shared by all nodes
				contextMenu: partContext
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值