zoukankan      html  css  js  c++  java
  • GoJS的一些使用技巧

    修改图的内容

    通过修改各种监听方法中得到的part内部的结构data等
    或者直接遍历

    myDiagram.model.nodeDataArray
    myDiagram.model.linkDataArray
    //修改完成调用以下方法完成重建
    myDiagram.rebuildParts()

    修改内容对应的data内容
    调用即可

    删除某个节点

    myDiagram.remove(part)

    通过全局变量获取某个选择的节点

    var Select_Port = null;
            myDiagram.addDiagramListener("ObjectSingleClicked", function(e) {
                        Select_Port = e.subject.part;
    
                    });
                    myDiagram.addDiagramListener("ObjectContextClicked", function(e) {
                        Select_Port = e.subject.part;
    
                    });

    结合undoManager创建撤销重做删除的工具栏

                $('#deletePart').click(function(){
                     if("undefined" == typeof myDiagram){
                            result_prompt(0, "浏览器不兼容此功能,请使用高版本谷歌浏览器!");
                            return false;
                     }
                     myDiagram.remove(Select_Port);
                });
    
                $('#undo-buttun').click(function(){
                 if("undefined" == typeof myDiagram){
                        result_prompt(0, "浏览器不兼容此功能,请使用高版本谷歌浏览器!");
                        return false;
                 }
                 myDiagram.undoManager.undo();
                });
    
                $('#redo-buttun').click(function(){
                 if("undefined" == typeof myDiagram){
                        result_prompt(0, "浏览器不兼容此功能,请使用高版本谷歌浏览器!");
                        return false;
                 }
                 myDiagram.undoManager.redo();
                });

    利用绘图过程中的一些DiagramListener完成更多的数据交互体验

    可以在创建Diagram时进行创建对应的监听、通过遍历监听可以得到想要的组件

      myDiagram =
                      goObj(go.Diagram, "myDiagramDiv",  
                        {
                          initialContentAlignment: go.Spot.Center,
                          allowDrop: true, 
                          "LinkDrawn": showLinkLabel,  
                          "LinkRelinked": showLinkLabel,
                          "animationManager.duration": 800, 
                          "undoManager.isEnabled": true  
                        });
    function showLinkLabel(e) {
                      var label = e.subject.findObject("LABEL");
                      if (label !== null) label.visible = (e.subject.fromNode.data.figure === "RoundedRectangle");
                    }
    

    也可以后面添加各种监听上去,具体事件可以查看API

    
                    myDiagram.addDiagramListener("Modified", function(e) {
                    var button = document.getElementById("SaveButton");
                      if (button) button.disabled = !myDiagram.isModified;
                      var idx = document.title.indexOf("*");
                      if (myDiagram.isModified) {
                        if (idx < 0) document.title += "*";
                      } else {
                        if (idx >= 0) document.title = document.title.substr(0, idx);
                      }
    
                    });
                    myDiagram.addDiagramListener("ExternalObjectsDropped", function(e) {
                        try {
                            e.subject.each(function(part) {
                               //此处处理part
                            );
                        } catch (err) {
                            console.warn(err);
                        }
                    });
  • 相关阅读:
    javaweb毕业设计
    Maven入门----MyEclipse创建maven项目(二)
    Maven入门----介绍及环境搭建(一)
    SpringMvc入门五----文件上传
    SpringMvc入门四----rest风格Url
    SpringMvc入门三----控制器
    SpringMvc入门二----HelloWorld
    SpringMvc入门一----介绍
    分析setup/hold电气特性从D触发器内部结构角度
    33. Search in Rotated Sorted Array
  • 原文地址:https://www.cnblogs.com/linbingcheng/p/6804528.html
Copyright © 2011-2022 走看看