问题描述
我正在尝试为矩形添加边框阴影。这在细胞景观中可能吗?此外,父元素是客户和订单。我可以减少客户的数量并订购父元素吗?
这是代码和工作示例的链接: https://stackblitz.com/edit/angular-kpnys1?file=src%2Fapp%2Fdemo_test.json
解决方法
减小父尺寸:
这是一个样式问题,cytoscape.js 对父元素应用填充,如果您希望父元素尽可能小,则必须在 :parent 样式中调整填充:
{
selector: ":parent",css: {
...
"padding": "0px" \\ remove padding completely,parent almost touching inner nodes
}
},
边框阴影
这有点棘手,cytoscape.js 只提供了一个普通的边框(比如 "border": "1px solid black")。您可以使用这些样式:
- border-width :节点边框的大小。
- border-style :节点边框的样式;可以是实线、虚线、虚线或双线。
- border-color : 节点边框的颜色。
- border-opacity : 节点边框的不透明度。
这些都没有为我们提供应用单边边框的能力。作为替代方案,我使用了 ghost 样式:
- ghost : 是否使用鬼影效果;可能是也可能不是。
- ghost-offset-x :用于定位重影效果的水平偏移量。
- ghost-offset-y :用于定位重影效果的垂直偏移量。
- ghost-opacity : 鬼影效果的不透明度。
如果稍微调整一下,就可以使用 x 偏移量和一个不错的不透明度值来实现此框阴影:
ghost: "yes","ghost-opacity": 0.5,"ghost-offset-x": 1
这是应用了两项更改的有效 stackblitz。