Change Opacity of Style

Question

Is there any convenient way to change the opacity of a ol.style.Fill or ol.style.Stroke Object?

As far as I understand it, there are 2 ways to define a color with an opacity.

fill.color = [255,0,0,myOpcitay];

or

fill.color = 'rgba(255, 0,0,myOpacity)';

But what If I get a color attribute in hex format, like

var color = myStyle.getFill().getColor() // color #FF0000;

Do I really have to decompose the hex color definition in order to add the opacity? There must be a more user-friendly way to achieve this...

Answer 1

You can use ol.color.asArray method for that. Fourth element of array is then opacity:

var color = myStyle.getFill().getColor();
var colorArray = ol.color.asArray(color);
var opacity = colorArray[3];

EDIT: As Mike rightfully pointed out, above code is suitable only for reading opacity. Since asArray() method returns cached color, if we want to change color and use it independantly, copy of the color has to be created with slice() method (Mike's code):

var color = myStyle.getFill().getColor();
var colorArray = ol.color.asArray(color).slice();
colorArray[3] = 0.5;
myStyle.getFill().setColor(colorArray);

Answer 2

Would a 8-digit hex-code work?

See also:

• https://drafts.csswg.org/css-color/#hex-notation
• https://css-tricks.com/8-digit-hex-codes

Have also a look at this page:

• https://stackoverflow.com/a/28033076/42659

Answer 3

This is old but, in May 2024, I got it to work by creating conversion functions. Ol does not accept rgba(...), but rgb(...) is fine and you can still include the opacity.

1. hexToRgb takes two arguments: hex, opacity
2. Because we want to use rgb values, we assume the current style's color is already rgb, so in rgbToHex, convert rgb to hex using the first three values(removes opacity).
3. Convert the hex to rgb and embed new opacity.

export const hexToRgb = (hex: string, opacity: number): string => {
  let r = '0', g = '0', b = '0';

  if (hex.length === 4) {
    r = hex[1] + hex[1];
    g = hex[2] + hex[2];
    b = hex[3] + hex[3];
  }

  if (hex.length === 7) {
    r = hex[1] + hex[2];
    g = hex[3] + hex[4];
    b = hex[5] + hex[6];
  }

  return `rgb(${parseInt(r, 16)}, ${parseInt(g, 16)}, ${parseInt(b, 16)}, ${opacity})`;
}

export const rgbToHex = (rgb: string): string => {
  let [r, g, b, _a] = rgb.split(',').map((color) => parseInt(color));
  return `#${r.toString(16)}${g.toString(16)}${b.toString(16)}`;
}

Below is how I used it in a React component that allows the user to style features on the fly.

 const handleChange = (_e: any) => {
    let color = _e.target?.value || `#FFFFFF`;
    let newStyles = props.styles;
    // @ts-ignore
    newStyles[mode]['circle-fill-color'] = hexToRgb(color, props.styles[mode]['fill-opacity'])
    setStyles(newStyles);
  };