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