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是“水平”Panel的第一个元素，所以它始终位于右侧“表格”Panel的左侧。图片的大小始终为50x50。

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

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

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

1 个答案: