Transparent (Opacity) Property to Shapes

GoJS
1

Is there any property to set Transparency level for shapes between range of 0 - 100 ?

Setting Fill = “transparent” makes the complete shape/node transparent.

2

As always, GoJS uses fractions, not percentages.

3

Can opacity set only to fill color ?

Setting opacity to 0 complete shape becomes invisible. I need border of the shapes to be visible when opacity is set to 0.

4

Use “rgba” syntax for CSS colors: <color> - CSS: Cascading Style Sheets | MDN

5

Is it possible to set opacity for TextBlock stroke. ?

I am trying to set the rgba color value but it doesn’t make any change on UI.

Applying rgba value for fill and stroke property gives effect of opacity/transpereny effect.

6

What did you try?

7

I have following template code -

     current.goObj(go.TextBlock,  // the center text
      {
          alignment: go.Spot.Center, textAlign: "center", margin: 12, cursor: "move",
          editable: true,
      },
      new go.Binding("text").makeTwoWay(),
      new go.Binding("font","font").makeTwoWay(),
      new go.Binding("stroke","textColor").makeTwoWay()

And textColor value is rgba color.

Trying to provide style component like the one in powerpoint.

8

And what is the value of data.textColor?

9

data.textColor is “rgba(255,0,0,0.52)”

This works when fill or stroke is binded to “fillColor” or “stroke” having same value.

10

I just tried setting TextBlock.stroke to your rgba color string:

    myDiagram.nodeTemplate =
      $(go.Node, "Auto",
        $(go.Shape, { fill: "white" },
          new go.Binding("fill", "color")),
        $(go.TextBlock,
          { margin: 8, stroke: "rgba(255, 0, 0, 0.52)" },
          new go.Binding("text"))
      );

and it produced:

as expected.

11

Sorry Walter,

Its working for me now. There was a typo mistake.

For changing colors and transparency level, initially i had 6 functions ( fill, border and text ).
One of function parameter passed was “textcolor” instead of “textColor”.

This gets fixed after refactoring the code to 2 functions with extra parameter. And then I noticed it.