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

【问题标题】：goJS: Dynamically have a picture in a panelgoJS：在面板中动态显示图片
【发布时间】：2016-02-27 15:31:00
【问题描述】：

我有以下节点模板：

// 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 无论如何都会将文本侧向 50 像素（通过 go.size(50,50) ）。有没有办法可以动态地将 go.Picture 添加到面板中？

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

【问题讨论】：

标签： gojs

【解决方案1】：

是的，因为Picture 是“水平”Panel 的第一个元素，所以它始终位于右侧的“表格”Panel 的左侧。图片的大小始终为 50x50。

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

我假设您在“表”Panel 中遗漏了一堆东西，因为否则指定 column 和 columnSpan 属性是没有意义的，RowColumnDefinition 也没有。

【讨论】：