gojs - 如何使文本块中的文本显示在同一空间中的所有元素上方(前景)
问题描述
下面是代码示例。我只是想让文本块呈现在所涉及的其他元素之上。渲染了许多元素,但主要问题是:
用于绘制可见网格的水平线和垂直线遮挡了下面的文本。
我需要能够使网格线在 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确实在“Grid” Panel 前面,因为它们包含Panel中的顺序。
我建议您将TextBlock.background设置为浅色:
$(go.TextBlock,
{
background: "white",
. . .
})
推荐阅读
- pytorch - Bert forward 在 GPU 上报错;但在 CPU 上运行良好
- python - Python 库默认安装到 Python 2.7
- android - 将多张图片(近 100 张)从 Android 上传到 Amazon S3?
- git - Git不会将未暂存的更改移动到另一个分支
- html - 将鼠标悬停在导航栏中时不显示文本
- visual-studio - 如何减少运行 480,000 次迭代的循环的执行时间?
- python - Python中不允许前导零?
- html - 允许用户在我的 CRUD 网络应用程序(如 Stack Overflow、Medium)中的帖子中添加图像和编写代码片段
- reactjs - 如何在 React 中的状态更改时更新道具的值
- javascript - React ClassComponent 没有正确循环