GoJS 加载 SVG 矢量图并分块填充颜色

GoJS About 5,596 words

原始图像

代码

$(go.Shape,
    {
        geometryString: `M934 271c0-90-73-163-163-163H292.3c-66.5 0-118.8 56.7-113.5 122.9L221.1 704H91l-1 54c0 84.6 66.4 153.6 150 157.8v0.2h424.3c98.2 0 177.7-79.6 177.7-177.7L795.8 328H934v-57z
        M171.6 834.4c-20.3-20.3-31.5-47.3-31.6-76l0.1-4.4h85.4l9.9 111.3c-24-2.8-46.3-13.5-63.8-30.9z
        M792 740.9c-0.7 33.2-13.9 64.2-37.4 87.7-24.1 24.1-56.2 37.4-90.3 37.4H285.7l-57.1-639.3c-1.4-17.9 4.6-35 16.8-48.2 12.2-13.2 28.9-20.5 46.9-20.5h19c23.4 26.3 37.7 61 37.7 99 0 25.7-6.5 49.9-18 71h414.4L792 740.9z
        M884 278H397.9c0.7-7 1.1-14 1.1-21 0-36-9.4-69.8-26-99h398c30.2 0 58.6 11.8 79.9 33.1S884 240.8 884 271v7z
        M664.5 515h-297v-50h297v50z 
        m0 123.2h-297v-50h297v50z`,
        stroke: "#BDBDBD",
        fill: "#787878",
        strokeWidth: 1,
        desiredSize: new go.Size(80, 120),
    })

效果

分块填充

使用F和X将SVG路径分离，单独填充颜色。

代码

$(go.Shape,
    {
        geometryString: `M934 271c0-90-73-163-163-163H292.3c-66.5 0-118.8 56.7-113.5 122.9L221.1 704H91l-1 54c0 84.6 66.4 153.6 150 157.8v0.2h424.3c98.2 0 177.7-79.6 177.7-177.7L795.8 328H934v-57z X
        F M171.6 834.4c-20.3-20.3-31.5-47.3-31.6-76l0.1-4.4h85.4l9.9 111.3c-24-2.8-46.3-13.5-63.8-30.9z X
        M792 740.9c-0.7 33.2-13.9 64.2-37.4 87.7-24.1 24.1-56.2 37.4-90.3 37.4H285.7l-57.1-639.3c-1.4-17.9 4.6-35 16.8-48.2 12.2-13.2 28.9-20.5 46.9-20.5h19c23.4 26.3 37.7 61 37.7 99 0 25.7-6.5 49.9-18 71h414.4L792 740.9z X
        F M884 278H397.9c0.7-7 1.1-14 1.1-21 0-36-9.4-69.8-26-99h398c30.2 0 58.6 11.8 79.9 33.1S884 240.8 884 271v7z X
        F M664.5 515h-297v-50h297v50z 
        m0 123.2h-297v-50h297v50z X`,
        stroke: "#BDBDBD",
        fill: "#787878",
        strokeWidth: 1,
        desiredSize: new go.Size(80, 120),
    })

效果

完整代码

<!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>
    <div id="myDiagramDiv" style="margin:auto;width:300px;height:300px;background: #E4E7EB"></div>

    <script>

        var $ = go.GraphObject.make;

        var diagram = $(go.Diagram, "myDiagramDiv",
            {
                allowMove: true,
                allowSelect: true,
            }
        );
        diagram.add(
            $(go.Part, "Auto",
                $(go.Shape,
                    {
                        geometryString: `M934 271c0-90-73-163-163-163H292.3c-66.5 0-118.8 56.7-113.5 122.9L221.1 704H91l-1 54c0 84.6 66.4 153.6 150 157.8v0.2h424.3c98.2 0 177.7-79.6 177.7-177.7L795.8 328H934v-57z X
                        F M171.6 834.4c-20.3-20.3-31.5-47.3-31.6-76l0.1-4.4h85.4l9.9 111.3c-24-2.8-46.3-13.5-63.8-30.9z X
                        M792 740.9c-0.7 33.2-13.9 64.2-37.4 87.7-24.1 24.1-56.2 37.4-90.3 37.4H285.7l-57.1-639.3c-1.4-17.9 4.6-35 16.8-48.2 12.2-13.2 28.9-20.5 46.9-20.5h19c23.4 26.3 37.7 61 37.7 99 0 25.7-6.5 49.9-18 71h414.4L792 740.9z X
                        F M884 278H397.9c0.7-7 1.1-14 1.1-21 0-36-9.4-69.8-26-99h398c30.2 0 58.6 11.8 79.9 33.1S884 240.8 884 271v7z X
                        F M664.5 515h-297v-50h297v50z 
                        m0 123.2h-297v-50h297v50z X`,
                        stroke: "#BDBDBD",
                        fill: "#787878",
                        strokeWidth: 1,
                        desiredSize: new go.Size(80, 120),
                    })
            ));
    </script>
</body>

</html>

参考文档

https://gojs.net/latest/intro/geometry.html

Views: 2,969 · Posted: 2021-11-25

———— END ————

Give me a Star, Thanks:)

https://github.com/fendoudebb/LiteNote

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