GoJS 更改 Overview 的拖动框颜色

GoJS About 2,846 words

属性

Overview的属性box就是拖动框的Part，box的第一个元素就是拖动框，默认是紫红色的Shape。

更改颜色

var myOverview = $(go.Overview, "myOverviewDiv",
    { observed: diagram, contentAlignment: go.Spot.Center }
);

myOverview.box.elt(0).stroke = "green";

完整代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.staticfile.org/gojs/2.1.38/go.js" crossorigin="anonymous"></script>
    <style>
        #myDiagramDiv canvas,
        #myOverviewDiv canvas {
            outline: none;
        }

        #myOverviewDiv {
            position: absolute;
            width: 100px;
            height: 100px;
            left: 30px;
            top: 180px;
            background-color: #FFFFFF;
            z-index: 300;
            border: 2px solid #787878;
            box-sizing: border-box;
            border-radius: 10px;
        }
    </style>
</head>

<body style="margin: 0;">
    <div id="myDiagramDiv" style="width:100%;height:300px;background: #E4E7EB"></div>

    <div id="myOverviewDiv"></div>
    <script>

        var $ = go.GraphObject.make;

        var diagram = $(go.Diagram, "myDiagramDiv",
            {
                allowHorizontalScroll: false,
                allowVerticalScroll: false,
                allowMove: false,
                allowSelect: true
            }
        );

        diagram.nodeTemplate =
            $(go.Node, "Auto",
                $(go.Shape, "Rectangle",
                    { fill: "white" },
                    new go.Binding("fill", "color")),
                $(go.TextBlock, { margin: 5 },
                    new go.Binding("text", "key"))
            );

        var nodeDataArray = [];
        for (var i = 0; i < 1000; i++) {
            nodeDataArray.push({ color: go.Brush.randomColor() });
        }
        diagram.model.nodeDataArray = nodeDataArray;

        var myOverview = $(go.Overview, "myOverviewDiv",
            { observed: diagram, contentAlignment: go.Spot.Center }
        );

        myOverview.box.elt(0).stroke = "green";

    </script>
</body>

</html>

参考

https://gojs.net/latest/api/symbols/Overview.html#box

Views: 2,290 · Posted: 2021-11-21

———— END ————

Give me a Star, Thanks:)

https://github.com/fendoudebb/LiteNote

扫描下方二维码关注公众号和小程序↓↓↓