0

I would like to have an overlay that is not over the label and that has the same shape than the node it is on. How could I extend cytoscape.js or reuse existing functionnality to do so?

I tried to use border to achieve this result, but what I don't like about that is the fact that border goes inside the shape as you can see in the attached image.

node with a border of 10px

Melanie
  • 1,198
  • 2
  • 17
  • 42

1 Answers1

1

A border is a stroke in the canvas. That's how the API works in the browser, and that's the API is used to create the Cy.js visualisation.

Drawing the border prior to the node body with clipping could make the border less like a stroke, but that comes with a high expense -- unacceptable when many users need high performance graphs. Semitransparent borders are a good compromise aesthetically and with respect to performance.

With regards to the overlay: No, it is not possible to do that in a generic manner. For some shapes, it would be sufficient to draw the node body shape as the overlay but with just a larger size -- but this does not work for shapes such as triangle.

If I were you, I would go with the semitransparent border -- at least for now. Alternatively, you could use a smaller overlay such that it's a tighter fit.

If you really want, I could point you in the direction of the code to modify.

Edit: Or maybe a (new) border-z-order style property or similar would work for you? If your nodes are opaque, then having the border behind does not require clipping...

maxkfranz
  • 11,896
  • 1
  • 27
  • 36
  • I realized that what I was trying to achieve was in fact a shadow effect. A shape drawn behind my actual shape. I had it all added to cytoscape (figured out how to add new style property - shadow-opacity and such - and everything) and it seemed to work. Until I read your answer: for some shape just making it bigger doesn't exactly do the trick! – Melanie Feb 11 '15 at 19:56
  • And to answer your question, yes my shapes are opaque. – Melanie Feb 11 '15 at 19:57
  • And now I just realized that there is a shadowBlur property in canvas that I could use to achieve the effect that I want! Do you think it would worth contributing shadows properties to cytoscape? – Melanie Feb 11 '15 at 20:11
  • I've added the shadow functionality using canvas shadows properties to cytoscapejs. If you want, I can put that in github and create a pull request. – Melanie Feb 11 '15 at 23:30