2

I have an Image component in react-konva and want to add border-radius: 8px. Which is the easiest way?

dmraptis
  • 909
  • 1
  • 10
  • 22

2 Answers2

3

Having this amazing comment as reference the problem can be easily solved:

  ...

  <Group
    clipFunc={ctx => calcClipFunc(ctx, x, y, width, height, radius)}
  >
    <Image
      image={image}
      width={width}
      height={height}
      x={x}
      y={y}
    />
  </Group>

And the calcClipFunc() function from the previous comment:

function calcClipFunc(ctx, x, y, width, height, radius) {
  ctx.beginPath();
  ctx.moveTo(x + radius, y);
  ctx.lineTo(x + width - radius, y);
  ctx.quadraticCurveTo(x + width, y, x + width, y + radius);
  ctx.lineTo(x + width, y + height - radius);
  ctx.quadraticCurveTo(x + width, y + height, x + width - radius, y + height);
  ctx.lineTo(x + radius, y + height);
  ctx.quadraticCurveTo(x, y + height, x, y + height - radius);
  ctx.lineTo(x, y + radius);
  ctx.quadraticCurveTo(x, y, x + radius, y);
  ctx.closePath();
}
dmraptis
  • 909
  • 1
  • 10
  • 22
0

Clip your image in Stage:

  // image.width, image.height
  <Stage width={200} height={200} style={{borderRadius: '8px', overflow: 'hidden'}}>
    <Layer >
      <Image image={this.state.image} />
    </Layer>
  </Stage>
Babak Yaghoobi
  • 1,892
  • 9
  • 18
  • Thanks, Babak! That could work in certain circumstances. However, I have several other layers inside my Stage component and the Image component doesn't fit the whole Stage. By bad not mentioning it earlier. – dmraptis Dec 24 '19 at 22:05