下面是代码示例。我只是想让该文本块呈现在所涉及的其他元素之上。有许多要渲染的元素,但是主要的问题是:用于绘制可见网格的水平线和垂直线遮盖了下面的文本。我需要能够使网格线进一步回到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
TextBlock的确在“网格” Panel的前面,这是由于其包含Panel的顺序。
我建议您将TextBlock.background设置为浅色:
$(go.TextBlock,
{
background: "white",
. . .
})