zoukankan      html  css  js  c++  java
  • GoJS实例4

    此示例更改链接数据的“to”属性,使链接连接到不同的节点.复制如下内容保存到空白的.html文件中,用浏览器打开即可查看效果

    <!DOCTYPE html>
    <html>
    
    <head>
        <meta charset="utf-8">
        <title>GoJS实例</title>
        <style>
            #myDiagramDiv {
                 400px;
                height: 500px;
                background-color: #DAE4E4;
            }
        </style>
        <script src="https://unpkg.com/gojs/release/go-debug.js"></script>
    </head>
    
    <body>
        <div id="myDiagramDiv"></div>
    
        <script>
            //为了简洁
            var $ = go.GraphObject.make;
            var diagram = new go.Diagram("myDiagramDiv");
            diagram.nodeTemplate =
                $(go.Node, "Auto", {
                        locationSpot: go.Spot.Center
                    },
                    $(go.Shape, "RoundedRectangle", {
                        fill: "yellow",
                        stroke: "orange",
                        strokeWidth: 2
                    }),
                    $(go.TextBlock, {
                            margin: 5
                        },
                        new go.Binding("text", "key"))
                );
    
            var nodeDataArray = [{
                    key: "Alpha"
                },
                {
                    key: "Beta"
                },
                {
                    key: "Gamma"
                }
            ];
            var linkDataArray = [{
                from: "Alpha",
                to: "Beta"
            }];
            diagram.model = new go.GraphLinksModel(nodeDataArray, linkDataArray);
    
            function switchTo() {
                var model = diagram.model;
                // 所有模型更改都应在事务中发生
                model.startTransaction("reconnect link");
                var data = model.linkDataArray[0]; // 获取第一个链接数据
                if (model.getToKeyForLinkData(data) === "Beta") {
                    model.setToKeyForLinkData(data, "Gamma");
                } else {
                    model.setToKeyForLinkData(data, "Beta");
                }
                model.commitTransaction("reconnect link");
            }
    
            function loop() {
                setTimeout(function () {
                    switchTo();
                    loop();
                }, 1000);
            }
            loop();
        </script>
    </body>
    
    </html>

     此示例点击不同的节点转换颜色.复制如下内容保存到空白的.html文件中,用浏览器打开即可查看效果

    <!DOCTYPE html>
    <html>
    
    <head>
        <meta charset="utf-8">
        <title>GoJS实例</title>
        <style>
            #myDiagramDiv {
                 400px;
                height: 500px;
                background-color: #DAE4E4;
            }
        </style>
        <script src="https://unpkg.com/gojs/release/go-debug.js"></script>
    </head>
    
    <body>
        <div id="myDiagramDiv"></div>
    
        <script>
            //为了简洁
            var $ = go.GraphObject.make;
            var diagram = new go.Diagram("myDiagramDiv");
            diagram.nodeTemplate =
                $(go.Node, "Auto", {
                        selectionAdorned: false
                    }, // no blue selection handle!
                    $(go.Shape, "RoundedRectangle", {
                            fill: "white"
                        },
                        // bind Shape.fill to Part.isSelected converted to a color
                        new go.Binding("fill", "isSelected", function (sel) {
                            return sel ? "dodgerblue" : "lightgreen";
                        }).ofObject()), // no name means bind to the whole Part
                    $(go.TextBlock, {
                            margin: 5
                        },
                        new go.Binding("text", "descr"))
                );
    
            diagram.model.nodeDataArray = [{
                    descr: "Select me!"
                },
                {
                    descr: "I turn blue when selected."
                }
            ];
        </script>
    </body>
    
    </html>

     移动节点.复制如下内容保存到空白的.html文件中,用浏览器打开即可查看效果

    <!DOCTYPE html>
    <html>
    
    <head>
        <meta charset="utf-8">
        <title>GoJS实例</title>
        <style>
            #myDiagramDiv {
                 400px;
                height: 500px;
                background-color: #DAE4E4;
            }
        </style>
        <script src="https://unpkg.com/gojs/release/go-debug.js"></script>
    </head>
    
    <body>
        <div id="myDiagramDiv"></div>
        <p id="bindTwoWayData" onclick='shiftNode()'></p>
        <script>
            //为了简洁
            var $ = go.GraphObject.make;
            var diagram = new go.Diagram("myDiagramDiv");
            diagram.nodeTemplate =
                $(go.Node, "Auto", {
                        locationSpot: go.Spot.Center
                    },
                    new go.Binding("location", "loc").makeTwoWay(), // 双向绑定
                    $(go.Shape, "RoundedRectangle", {
                        fill: "lightblue",
                        stroke: "blue",
                        strokeWidth: 2
                    }),
                    $(go.TextBlock, {
                            margin: 5
                        },
                        new go.Binding("text", "key"))
                );
    
            var nodeDataArray = [{
                key: "Alpha",
                loc: new go.Point(0, 0)
            }];
            diagram.model = new go.GraphLinksModel(nodeDataArray);
    
            shiftNode = (function () { //定义一个名为"shiftNode"的回调函数,当点击时触发
                // 所有的model中做出的改变都应该在事务中
                diagram.startTransaction("shift node");
                var data = diagram.model.nodeDataArray[0]; // get the first node data
                var node = diagram.findNodeForData(data); // find the corresponding Node
                var p = node.location.copy(); // make a copy of the location, a Point
                p.x += 20;
                if (p.x > 200) p.x = 0;
                // changing the Node.location also changes the data.loc property due to TwoWay binding
                node.location = p;
                // show the updated location held by the "loc" property of the node data
                document.getElementById("bindTwoWayData").textContent = data.loc.toString();
                diagram.commitTransaction("shift node");
            });
            shiftNode(); // initialize everything
        </script>
    </body>
    
    </html>
  • 相关阅读:
    Android 解决小米手机Android Studio安装app 报错的问题It is possible that this issue is resolved by uninstalling an existi
    Android Unresolved Dependencies
    Android studio 自定义打包apk名
    Android Fragment与Activity交互的几种方式
    魅族和三星Galaxy 5.0webView 问题Android Crash Report
    Android几种常见的多渠道(批量)打包方式介绍
    Android批量打包 如何一秒内打完几百个apk渠道包
    上周热点回顾(9.30-10.6)团队
    上周热点回顾(9.23-9.29)团队
    上周热点回顾(9.16-9.22)团队
  • 原文地址:https://www.cnblogs.com/Alwaysbecoding/p/11849960.html
Copyright © 2011-2022 走看看