GoJS 自定义圆角矩形
GoJS About 11,288 words场景
虽然可以使用RoundedRectangle指定圆角矩形，但是对于矩形内部有不同背景色的分割层，如果只是用Panel堆叠，会发现Panel背景色会超出圆角。
上半部分圆角
go.Shape.defineFigureGenerator("RoundedTopRectangle", function (shape, w, h) {
var p1 = 5;
if (shape !== null) {
var param1 = shape.parameter1;
if (!isNaN(param1) && param1 >= 0) p1 = param1;
}
p1 = Math.min(p1, w / 2);
p1 = Math.min(p1, h / 2);
var geo = new go.Geometry();
geo.add(new go.PathFigure(0, p1)
.add(new go.PathSegment(go.PathSegment.Arc, 180, 90, p1, p1, p1, p1))
.add(new go.PathSegment(go.PathSegment.Line, w - p1, 0))
.add(new go.PathSegment(go.PathSegment.Arc, 270, 90, w - p1, p1, p1, p1))
.add(new go.PathSegment(go.PathSegment.Line, w, h))
.add(new go.PathSegment(go.PathSegment.Line, 0, h).close()));
geo.spot1 = new go.Spot(0, 0, 0.3 * p1, 0.3 * p1);
geo.spot2 = new go.Spot(1, 1, -0.3 * p1, 0);
return geo;
});下半部分圆角
go.Shape.defineFigureGenerator("RoundedBottomRectangle", function (shape, w, h) {
var p1 = 5;
if (shape !== null) {
var param1 = shape.parameter1;
if (!isNaN(param1) && param1 >= 0) p1 = param1;
}
p1 = Math.min(p1, w / 2);
p1 = Math.min(p1, h / 2);
var geo = new go.Geometry();
geo.add(new go.PathFigure(0, 0)
.add(new go.PathSegment(go.PathSegment.Line, w, 0))
.add(new go.PathSegment(go.PathSegment.Line, w, h - p1))
.add(new go.PathSegment(go.PathSegment.Arc, 0, 90, w - p1, h - p1, p1, p1))
.add(new go.PathSegment(go.PathSegment.Line, p1, h))
.add(new go.PathSegment(go.PathSegment.Arc, 90, 90, p1, h - p1, p1, p1).close()));
geo.spot1 = new go.Spot(0, 0, 0.3 * p1, 0);
geo.spot2 = new go.Spot(1, 1, -0.3 * p1, -0.3 * p1);
return geo;
});组成自定义圆角矩形
diagram.nodeTemplate =
$(go.Node, "Vertical",
$(go.Panel, "Auto",
$(go.Shape, "RoundedTopRectangle",
{
parameter1: 5,
stroke: "green",
strokeWidth: 2,
fill: "yellow",
desiredSize: new go.Size(120, 50)
},
),
$(go.TextBlock,
{margin: 3, stroke: "#00CED1"},
new go.Binding("text", "key")
),
{
contextClick: function (e, node) {
alert("click RoundedTopRectangle#" + node.part.data.key);
},
}
),
$(go.Panel, "Auto",
$(go.Shape, "Rectangle",
{
margin: new go.Margin(-2, 0, -2, 0),
stroke: "green",
strokeWidth: 2,
fill: "red",
desiredSize: new go.Size(120, 60),
},
),
$(go.TextBlock,
{margin: 3, stroke: "#FFEBCD"},
new go.Binding("text", "key")
),
{
contextClick: function (e, node) {
alert("click Rectangle#" + node.part.data.key);
},
}
),
$(go.Panel, "Auto",
$(go.Shape, "RoundedBottomRectangle",
{
fill: "blue",
stroke: "green",
strokeWidth: 2,
desiredSize: new go.Size(120, 50),
},
),
$(go.TextBlock,
{margin: 3, stroke: "white"},
new go.Binding("text", "key")
),
{
contextClick: function (e, node) {
alert("click RoundedBottomRectangle#" + node.part.data.key);
},
}
),
);完整代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gojs/2.1.38/go.js" crossorigin="anonymous"></script>
<style>
#myDiagramDiv canvas {
outline: none;
}
</style>
</head>
<body style="margin: 0;">
<div id="myDiagramDiv" style="width:500px; height:300px;background: #E4E7EB"></div>
<script>
go.Shape.defineFigureGenerator("RoundedTopRectangle", function (shape, w, h) {
var p1 = 5;
if (shape !== null) {
var param1 = shape.parameter1;
if (!isNaN(param1) && param1 >= 0) p1 = param1;
}
p1 = Math.min(p1, w / 2);
p1 = Math.min(p1, h / 2);
var geo = new go.Geometry();
geo.add(new go.PathFigure(0, p1)
.add(new go.PathSegment(go.PathSegment.Arc, 180, 90, p1, p1, p1, p1))
.add(new go.PathSegment(go.PathSegment.Line, w - p1, 0))
.add(new go.PathSegment(go.PathSegment.Arc, 270, 90, w - p1, p1, p1, p1))
.add(new go.PathSegment(go.PathSegment.Line, w, h))
.add(new go.PathSegment(go.PathSegment.Line, 0, h).close()));
geo.spot1 = new go.Spot(0, 0, 0.3 * p1, 0.3 * p1);
geo.spot2 = new go.Spot(1, 1, -0.3 * p1, 0);
return geo;
});
go.Shape.defineFigureGenerator("RoundedBottomRectangle", function (shape, w, h) {
var p1 = 5;
if (shape !== null) {
var param1 = shape.parameter1;
if (!isNaN(param1) && param1 >= 0) p1 = param1;
}
p1 = Math.min(p1, w / 2);
p1 = Math.min(p1, h / 2);
var geo = new go.Geometry();
geo.add(new go.PathFigure(0, 0)
.add(new go.PathSegment(go.PathSegment.Line, w, 0))
.add(new go.PathSegment(go.PathSegment.Line, w, h - p1))
.add(new go.PathSegment(go.PathSegment.Arc, 0, 90, w - p1, h - p1, p1, p1))
.add(new go.PathSegment(go.PathSegment.Line, p1, h))
.add(new go.PathSegment(go.PathSegment.Arc, 90, 90, p1, h - p1, p1, p1).close()));
geo.spot1 = new go.Spot(0, 0, 0.3 * p1, 0);
geo.spot2 = new go.Spot(1, 1, -0.3 * p1, -0.3 * p1);
return geo;
});
var $ = go.GraphObject.make;
var diagram = $(go.Diagram, "myDiagramDiv",
{
allowHorizontalScroll: false,
allowVerticalScroll: false,
allowMove: false,
allowSelect: true
}
);
diagram.nodeTemplate =
$(go.Node, "Vertical",
$(go.Panel, "Auto",
$(go.Shape, "RoundedTopRectangle",
{
parameter1: 5,
stroke: "green",
strokeWidth: 2,
fill: "yellow",
desiredSize: new go.Size(120, 50)
},
),
$(go.TextBlock,
{margin: 3, stroke: "#00CED1"},
new go.Binding("text", "key")
),
{
contextClick: function (e, node) {
alert("click RoundedTopRectangle#" + node.part.data.key);
},
}
),
$(go.Panel, "Auto",
$(go.Shape, "Rectangle",
{
margin: new go.Margin(-2, 0, -2, 0),
stroke: "green",
strokeWidth: 2,
fill: "red",
desiredSize: new go.Size(120, 60),
},
),
$(go.TextBlock,
{margin: 3, stroke: "#FFEBCD"},
new go.Binding("text", "key")
),
{
contextClick: function (e, node) {
alert("click Rectangle#" + node.part.data.key);
},
}
),
$(go.Panel, "Auto",
$(go.Shape, "RoundedBottomRectangle",
{
fill: "blue",
stroke: "green",
strokeWidth: 2,
desiredSize: new go.Size(120, 50),
},
),
$(go.TextBlock,
{margin: 3, stroke: "white"},
new go.Binding("text", "key")
),
{
contextClick: function (e, node) {
alert("click RoundedBottomRectangle#" + node.part.data.key);
},
}
),
);
diagram.model = new go.Model(
[
{key: "程序员技术之旅"},
]
);
</script>
</body>
</html>参考
Views: 2,467 · Posted: 2021-11-22
———— END ————
Give me a Star, Thanks:)
https://github.com/fendoudebb/LiteNote扫描下方二维码关注公众号和小程序↓↓↓
Loading...