在Angular项目中使用GoJS

最新推荐文章于 2024-07-12 16:55:56 发布

Vic~~

最新推荐文章于 2024-07-12 16:55:56 发布

阅读量665

点赞数

分类专栏： Angular 文章标签：前端 angular

本文链接：https://blog.csdn.net/weixin_45904870/article/details/122250877

版权

本文章主要介绍了在Angular中怎么使用GoJS，以及去除水印，怎么使用GoJS提供的扩展

摘要由CSDN通过智能技术生成

本文章主要介绍了在Angular中怎么使用GoJS，以及去除水印，怎么使用GoJS提供的扩展

在angular项目中使用GoJS

1. 安装

npm install gojs --save

2. 引入

import * as go from 'gojs';

3. 申明

const $ = go.GraphObject.make;

4.初始化

 ngOnInit(): void {
    this.diagram1 = this.initModel("myDiagramDiv");
 }
    
  initModel(divId) {
    var diagram =
      $(go.Diagram, divId,
        {
          initialContentAlignment: go.Spot.Center,//图像居中
          layout: $(go.TreeLayout, //设置树形图布局
            { nodeSpacing: 15, layerSpacing: 30 } //设置节点之间的间距，angle属性可以设置旋转，值有90，180 
          )
        });

    diagram.nodeTemplate =//设置节点模板
      $(go.Node,
        $(go.Panel, "Auto", {
        //鼠标移入移除效果
           mouseEnter:(e, obj) => {
            this.diagramMouseEnter(e, obj.part)
          },
          mouseLeave:(e, obj) => {
            this.diagramMouseLeave(e, obj.part)
          },
          //点击事件
          click: (e, obj) => {
            this.click(e, obj.part)
          }
          // mouseEnter: this.diagramMouseEnter, mouseLeave: this.diagramMouseLeave
        },//设置鼠标与节点的互动事件
          $(go.Shape, "RoundedRectangle", { name: "SHAPE" },//设置属性名，为了之后快速查找go.Shape相关属性值
            // new go.Binding("a", "b"))格式是动态绑定，将传入数据的b值绑定节点的shape的a属性。