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>

参考

https://gojs.net/latest/intro/shapes.html#CustomFigures

Views: 2,902 · Posted: 2021-11-22

————        END        ————

Give me a Star, Thanks:)

https://github.com/fendoudebb/LiteNote

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

扫描下方二维码关注公众号和小程序↓↓↓
Today On History
Browsing Refresh