如何向 gojs 平面图调色板添加新形状答案

【问题标题】：How to add new shape to gojs floor planner palette如何向 gojs 平面图调色板添加新形状
【发布时间】：2019-04-11 22:00:04
【问题描述】：

我在平面规划器中玩 gojs，如下图所示：

我的问题是如何将新的自定义形状添加到左侧的调色板部分，这样我就可以像圆桌一样使用它，有两把或四把椅子，在我检查代码后，我找到了负责绘制它们的部分，如下所示：

// Node Data Array for Furniture Palette
FURNITURE_NODE_DATA_ARRAY = [
              {
                  category: "MultiPurposeNode",
                  key: "MultiPurposeNode",
                  caption: "Multi Purpose Node",
                  color: "#ffffff",
                  stroke: '#000000',
                  name: "Writable Node",
                  type: "Writable Node",
                  shape: "Rectangle",
                  text: "Write here",
                  width: 60,
                  height: 60,
                  notes: ""
              },
              {
                  key: "roundTable",
                  color: "#ffffff",
                  stroke: '#000000',
                  caption: "Round Table",
                  type: "Round Table",
                  shape: "Ellipse",
                  width: 61,
                  height: 61,
                  notes: ""
              },
              {
                  key: "armChair",
                  color: "#ffffff",
                  stroke: '#000000',
                  caption: "Arm Chair",
                  type: "Arm Chair",
                  geo: "F1 M0 0 L40 0 40 40 0 40 0 0 M10 30 L10 10 M0 0 Q8 0 10 10 M0 40 Q20 15 40 40 M30 10 Q32 0 40 0 M30 10 L30 30",
                  width: 45,
                  height: 45,
                  notes: ""
              },
              {
                  key: "sofaMedium",
                  color: "#ffffff",
                  stroke: "#000000",
                  caption: "Sofa",
                  type: "Sofa",
                  geo: "F1 M0 0 L80 0 80 40 0 40 0 0 M10 35 L10 10 M0 0 Q8 0 10 10 M0 40 Q40 15 80 40 M70 10 Q72 0 80 0 M70 10 L70 35",
                  height: 45,
                  width: 90,
                  notes: ""
              },
              {
                  key: "sink",
                  color: "#ffffff",
                  stroke: '#000000',
                  caption: "Sink",
                  type: "Sink",
                  geo: "F1 M0 0 L40 0 40 40 0 40 0 0z M5 7.5 L18.5 7.5 M 21.5 7.5 L35 7.5 35 35 5 35 5 7.5 M 15 21.25 A 5 5 180 1 0 15 21.24 M23 3.75 A 3 3 180 1 1 23 3.74 M21.5 6.25 L 21.5 12.5 18.5 12.5 18.5 6.25 M15 3.75 A 1 1 180 1 1 15 3.74 M 10 4.25 L 10 3.25 13 3.25 M 13 4.25 L 10 4.25 M27 3.75 A 1 1 180 1 1 27 3.74 M 26.85 3.25 L 30 3.25 30 4.25 M 26.85 4.25 L 30 4.25",
                  width: 27,
                  height: 27,
                  notes: ""
              },
              {
                  key: "doubleSink",
                  color: "#ffffff",
                  stroke: '#000000',
                  caption: "Double Sink",
                  type: "Double Sink",
                  geo: "F1 M0 0 L75 0 75 40 0 40 0 0 M5 7.5 L35 7.5 35 35 5 35 5 7.5 M44 7.5 L70 7.5 70 35 40 35 40 9 M15 21.25 A5 5 180 1 0 15 21.24 M50 21.25 A 5 5 180 1 0 50 21.24 M40.5 3.75 A3 3 180 1 1 40.5 3.74 M40.5 3.75 L50.5 13.75 47.5 16.5 37.5 6.75 M32.5 3.75 A 1 1 180 1 1 32.5 3.74 M 27.5 4.25 L 27.5 3.25 30.5 3.25 M 30.5 4.25 L 27.5 4.25 M44.5 3.75 A 1 1 180 1 1 44.5 3.74 M 44.35 3.25 L 47.5 3.25 47.5 4.25 M 44.35 4.25 L 47.5 4.25",
                  height: 27,
                  width: 52,
                  notes: ""
              },
              {
                  key: "toilet",
                  color: "#ffffff",
                  stroke: '#000000',
                  caption: "Toilet",
                  type: "Toilet",
                  geo: "F1 M0 0 L25 0 25 10 0 10 0 0 M20 10 L20 15 5 15 5 10 20 10 M5 15 Q0 15 0 25 Q0 40 12.5 40 Q25 40 25 25 Q25 15 20 15",
                  width: 25,
                  height: 35,
                  notes: ""
              },
              {
                  key: "shower",
                  color: "#ffffff",
                  stroke: '#000000',
                  caption: "Shower/Tub",
                  type: "Shower/Tub",
                  geo: "F1 M0 0 L40 0 40 60 0 60 0 0 M35 15 L35 55 5 55 5 15 Q5 5 20 5 Q35 5 35 15 M22.5 20 A2.5 2.5 180 1 1 22.5 19.99",
                  width: 45,
                  height: 75,
                  notes: ""
              },
              {
                  key: "bed",
                  color: "#ffffff",
                  stroke: '#000000',
                  caption: "Bed",
                  type: "Bed",
                  geo: "F1 M0 0 L40 0 40 60 0 60 0 0 M 7.5 2.5 L32.5 2.5 32.5 17.5 7.5 17.5 7.5 2.5 M0 20 L40 20 M0 25 L40 25",
                  width: 76.2,
                  height: 101.6,
                  notes: ""
              },
              {
                  key: "staircase",
                  color: "#ffffff",
                  stroke: '#000000',
                  caption: "Staircase",
                  type: "Staircase",
                  geo: "F1 M0 0 L 0 100 250 100 250 0 0 0 M25 100 L 25 0 M 50 100 L 50 0 M 75 100 L 75 0 M 100 100 L 100 0 M 125 100 L 125 0 M 150 100 L 150 0 M 175 100 L 175 0 M 200 100 L 200 0 M 225 100 L 225 0",
                  width: 125,
                  height: 50,
                  notes: ""
              },
              {
                  key: "stove",
                  color: "#ffffff",
                  stroke: '#000000',
                  caption: "Stove",
                  type: "Stove",
                  geo: "F1 M 0 0 L 0 100 100 100 100 0 0 0 M 30 15 A 15 15 180 1 0 30.01 15 M 70 15 A 15 15 180 1 0 70.01 15"
                  + "M 30 55 A 15 15 180 1 0 30.01 55 M 70 55 A 15 15 180 1 0 70.01 55",
                  width: 75,
                  height: 75,
                  notes: ""
              },
              {
                  key: "diningTable",
                  color: "#ffffff",
                  stroke: '#000000',
                  caption: "Dining Table",
                  type: "Dining Table",
                  geo: "F1 M 0 0 L 0 100 200 100 200 0 0 0 M 25 0 L 25 -10 75 -10 75 0 M 125 0 L 125 -10 175 -10 175 0 M 200 25 L 210 25 210 75 200 75 M 125 100 L 125 110 L 175 110 L 175 100 M 25 100 L 25 110 75 110 75 100 M 0 75 -10 75 -10 25 0 25",
                  width: 125,
                  height: 62.5,
                  notes: ""
              }
];

我搜索了很多“geo”，但我没有找到任何东西，所以如何绘制一个新的，有任何视频或教程吗？

另一个问题 如何删除左上角的默认文本：

提前致谢

【问题讨论】：

标签： gojs

【解决方案1】：

我是构建此示例的开发人员。

首先，您可能对 Floorplanner 版本 2 感兴趣，可以找到 here

如果您想为家具节点创建自己的形状，您必须在家具调色板的 nodeDataArray 中添加一个新条目，并相应地指定“geo”属性。 “geo”属性是绑定到家具节点的“geometryString”属性的自定义数据属性。它是一个格式化的几何字符串，您可以在此处了解更多信息：https://gojs.net/latest/intro/geometry.html

如果你不了解数据绑定，你应该在这里阅读它们：https://gojs.net/latest/intro/dataBinding.html

删除或更改调色板窗口句柄的文本就像修改 HTML 文件内容一样简单。

【讨论】：

嗨 Ryan .. 感谢您的回复，我发现“geo”属性上的路径只是 svg 路径，所以没什么大不了的，但我想问如果可以在我们的旧系统 (imgur.com/sY8BHus) 中使每张桌子上的椅子像这张图片一样动态，则单击加号时椅子的数量会增加，反之亦然。在这个例子中，我们使用了 Fabricjs，但我们遇到了很多问题，如果在 gojs 中不可能，你知道任何其他库可以帮助我们做到这一点.. 提前致谢
我想用 GoJS 是可能的，尽管它需要一些工作，以及一些关于如何添加“椅子”、添加它们的位置、当没有更多空间时会发生什么的决定“表”等等。无需深入了解，您可以将一个按钮作为节点的 selectionAdornmentTemplate 的一部分，单击该按钮会向该节点添加一个“椅子”（也许这可能只是 nodeTemplate 中的 go.Shape 元素）。当然，如果您希望它持续存在，则需要将其保存到模型数据中。 gojs.net/latest/samples/adornmentButtons.html
在我们的情况下这似乎行不通，但我想问你最后一个问题，当我尝试向调色板添加新形状时，它看起来没有背景并且无法更改其颜色或全部处理，您可以在此视频中清楚地看到问题 (loom.com/share/95bd404e747b4b03adef8812fbb59660) 它发生在我使用 svg 甚至几何路径的图像时，我的代码中似乎缺少某些东西，我无法得到它你能帮忙吗我以正确的方式将新图像包含到调色板中，因为您在上面放置的链接不清楚，再次感谢您