如何使文本块中的文本显示在同一空间中所有元素的上方(前景)

问题描述 投票:0回答:1

下面是代码示例。我只是想让该文本块呈现在所涉及的其他元素之上。有许多要渲染的元素,但是主要的问题是:用于绘制可见网格的水平线和垂直线遮盖了下面的文本。我需要能够使网格线进一步回到z位置,或者将文本移到最前一层或z位置。

myDiagram.nodeTemplateMap.add('Slant',
                    $(go.Node, "Spot",`enter code here`

                        new go.Binding("location", "", function (data) {
                            // Different data items have x/y this in different formats...
                            var x = data.XPos || 0;
                            var y = data.slantShelfVirtualYpos * -1 || 0;
                            return new go.Point(x, y);
                        }),
                        // shelf
                        $(go.Shape, "Rectangle",
                            { strokeWidth: 1 },
                            { fill: $(go.Brush, "Linear", { 0.0: "white", 1.0: "gray" }) },
                            new go.Binding('width', '', function (x) { return x.ShelfLength }),
                            new go.Binding('height', '', function (x) {

                                return x.slantShelfHeightOffset ;
                            }),
                        ),
                        // guardrail vertical lines
                        $(go.Panel, "Grid",
                            {
                                gridCellSize: new go.Size(10, 10),
                                alignment: go.Spot.Bottom,
                                alignmentFocus: go.Spot.Bottom
                            },
                            $(go.Shape, "LineV", { strokeWidth: 1 }),
                            new go.Binding('width', '', function (x) { return x.ShelfLength  }),
                            new go.Binding('height', '', function (x) { return x.GuardRailHeight }),
                        ), // end of guardrail Vertical lines
                        // guardrail top horizontal rail
                        $(go.Panel, "Grid",
                            {
                                gridCellSize: new go.Size(10, 10),
                                alignment: go.Spot.Bottom,
                                alignmentFocus: go.Spot.Bottom
                            },
                            $(go.Shape, "LineH", { strokeWidth: 1 }),
                            new go.Binding('width', '', function (x) { return x.ShelfLength }),
                            new go.Binding('height', '', function (x) { return x.GuardRailHeight }),
                        ), // end of guardrail Vertical lines
                        $(go.TextBlock, {

                            font: '7px sans-serif',
                            alignment: go.Spot.BottomLeft,
                            alignmentFocus: go.Spot.BottomLeft
                        },
                            new go.Binding("text", "", function (x) { 
                               return "shelf:" + x.ShelfNumber + " Ypos: " + x.YPOS + " type:" + 
                               x.ShelfTypeName + " Slope:" + x.Slope })
                        ),
                    ),// end of shelf number text box

                ); // end of the slant shelf template
gojs
1个回答
0
投票

TextBlock的确在“网格” Panel的前面,这是由于其包含Panel的顺序。

我建议您将TextBlock.background设置为浅色:

  $(go.TextBlock,
    {
      background: "white",
      . . .
    })
© www.soinside.com 2019 - 2024. All rights reserved.