goJS：在面板中动态显示图片

Question

我有以下节点模板：

// define the Node template
mySecondDiagram.nodeTemplate =
    $$(go.Node, "Auto",
        // for sorting, have the Node.text be the data.name
        new go.Binding("text", "name"),
        // bind the Part.layerName to control the Node's layer depending on whether it isSelected
        new go.Binding("layerName", "isSelected", function(sel) { return sel ? "Foreground" : ""; }).ofObject(),
        // define the node's outer shape
        $$(go.Shape, "Rectangle",
            {
                name: "SHAPE", fill: "white", stroke: null,
                // set the port properties:
                portId: "", fromLinkable: true, toLinkable: true, cursor: "pointer"
            }),
        $$(go.Panel, "Horizontal",
            $$(go.Picture,
                {
                    name: 'Picture',
                    desiredSize: new go.Size(50, 50),
                    margin: new go.Margin(6, 8, 6, 10)
                },
                new go.Binding("source", "", findHeadShot)),
                // define the panel where the text will appear
            $$(go.Panel, "Table",
                {
                    maxSize: new go.Size(150, 999),
                    margin: new go.Margin(6, 10, 0, 3),
                    defaultAlignment: go.Spot.Left
                },
                $$(go.RowColumnDefinition,
                    {
                        column: 2,
                        width: 4
                    },
                    new go.Binding("column", "",columnSpan)
                ),
                $$(go.TextBlock, textStyle(),  // the name
                    {
                        row: 0, column: 0,columnSpan: 4,
                        font: "12pt Segoe UI,sans-serif",
                        editable: false, isMultiline: false,
                        minSize: new go.Size(10, 16)
                    },
                    new go.Binding("text", "name").makeTwoWay(),
                    new go.Binding("stroke", "",textColor)
                ),
                $$(go.TextBlock,textStyle(),
                    {
                        row: 1, column: 0, columnSpan: 2,
                        font: "8pt sans-serif"
                    },
                    new go.Binding("text", "", theInfoTextConverter)
                )
            ) // end of table
        ) // end Horizontal Panel
    );  // end Node

现在部分节点没有图片。但我相信 go.Picture 无论如何都会将文本向侧面推 50px（通过 go.size(50,50) ）。有什么方法可以将 go.Picture 动态添加到面板？

这可能是初学者的问题。目前我正在学习如何使用gojs

Answer 1

是的，因为 Picture 是 "Horizontal" Panel 的第一个元素，它总是在 "Table" Panel 的左边那是在右边。图片的尺寸始终为 50x50。

您可以将 Picture.visible 设置或绑定为 false。这将使它占用零 space.

我假设您在 "Table" Panel 中遗漏了一堆东西，否则指定 column 和 columnSpan 属性将毫无意义, 也没有 RowColumnDefinition.

goJS：在面板中动态显示图片

goJS: Dynamically have a picture in a panel

gojs