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>
参考
Views: 2,175 · Posted: 2021-11-21
————        END        ————
Give me a Star, Thanks:)
https://github.com/fendoudebb/LiteNote扫描下方二维码关注公众号和小程序↓↓↓
Loading...