GoJS 嵌套形状定位答案

【问题标题】：GoJS nested shape positioningGoJS 嵌套形状定位
【发布时间】：2020-10-15 06:52:48
【问题描述】：

我正在尝试使用 GoJS 库绘制嵌套形状。现在我有一个里面有一条线的矩形。 Whole Object 是一个有两个形状的面板，一个矩形和一个负线。至此就好了，MinusLine 渲染在一个矩形的中心。

我想要实现的是根据我得到的一些条件从上到下定位/更改 MinusLine 的位置等，但是我不能以任何方式移动它。例如将完全居中的黄色线移动到红色或棕色的位置

代码如下：

GO(go.Node, "Table",
    {
        layerName: "AfterForeground",
        movable: false,
        locationObjectName: "BODY",
        locationSpot: go.Spot.parse("0.5 0 0 0 "),
        selectionObjectName: "MAIN_SHAPE",
        selectionObjectName: "MAIN_SHAPE",
    },
    new go.Binding("location", "loc", go.Point.parse).makeTwoWay(go.Point.stringify),

    GO(go.Panel,go.Panel.Position, "Auto", {
        row: 1,
        column: 1,
        name: "BODY",
        stretch: go.GraphObject.Fill
    },
        GO(go.Shape, "Rectangle", {
            fill: wellColor,
            name: "MAIN_SHAPE",
            stroke: myColor,
            strokeWidth: 0.4,

        }, new go.Binding("fill", "wellColor"),
        ) , new go.Binding("desiredSize", "size", go.Size.parse).makeTwoWay(go.Size.stringify)
        ,GO(go.Shape, "MinusLine", {}), // <-- Move this YELLOW line vertically somehere inside Rectangle 
    )

【问题讨论】：

标签： javascript gojs

【解决方案1】：

表格面板（用于节点的面板类型）真的是您想要的吗？

到目前为止，您有一个只有一个单元格的表格面板，默认情况下，单元格中的所有对象都位于中心。您可以通过将alignment 属性添加到元素来轻松移动它们。

这是您的表格的示例，在节点中添加了两个子面板，一个与顶部对齐，一个与中心对齐，y 偏移量为 30： https://codepen.io/simonsarris/pen/zYBrLaX?editors=1011

表格面板还有其他定位示例，这里：

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

https://gojs.net/latest/intro/tablePanels.html#StretchAndAlignmente

请注意，当您定义了模板时，Shape 占据了表格的整个空间，并且在形状的中心有一条减号线。这可能不是你想要的。我在 Shape 上放了一个宽度和高度，在桌子上放了一个（更大的）高度，以使演示清晰易读。

【讨论】：