如何更改cytoscape.js中覆蓋圖的形狀和z-index？

我想有一個疊加層不在標籤上，它的形狀與它所在的節點相同。我怎麼能擴展cytoscape.js或重用現有的功能性來做到這一點？如何更改cytoscape.js中覆蓋圖的形狀和z-index？

我試圖使用邊框來實現這個效果，但是我不喜歡這個，就是邊框在圖形內部可以看到的事實。

node with a border of 10px

來源

2015-02-11 Melanie

邊框是在畫布中風。這就是API在瀏覽器中的工作原理，這就是API用於創建Cy.js可視化。

在裁剪節點體之前繪製邊框可能會使邊框變得不那麼簡單，但是會帶來很高的花費 - 當許多用戶需要高性能圖時，這是不可接受的。在美學和性能方面，半透明邊界是一個很好的折衷方案。

關於覆蓋：不，以通用的方式做到這一點。對於某些形狀，將節點主體形狀繪製爲覆蓋圖就足夠了，但只需要更大的尺寸 - 但這對於諸如triangle等形狀不起作用。

如果我是你，我會用半透明的邊框去 - 至少現在。或者，您可以使用較小的覆蓋圖，以使其更緊密。

如果你真的想要的話，我可以指示你修改代碼的方向。

編輯：或者，（新）border-z-order樣式屬性或類似的會爲你工作？如果你的節點是不透明的，那麼把邊框放在後面不需要剪裁......

來源

2015-02-11 19:29:28 maxkfranz

我意識到我試圖達到的效果實際上是一種陰影效果。在我的實際形狀後面繪製的形狀。我已經將它全部添加到細胞景觀中（想出瞭如何添加新的樣式屬性 - 陰影不透明等等），並且它似乎可行。直到我讀到你的答案爲止：某種形狀只是讓它變大並不能完全消除這個詭計！ – Melanie 2015-02-11 19:56:58

爲了回答你的問題，是的，我的形狀是不透明的。 – Melanie 2015-02-11 19:57:21

現在我只是意識到在canvas中有一個shadowBlur屬性，可以用來實現我想要的效果！你認爲這是值得貢獻陰影屬性cytoscape？ – Melanie 2015-02-11 20:11:08

如何更改cytoscape.js中覆蓋圖的形狀和z-index？

回答

相關問題