Blur the outer part of the konna-react element when out of the container's range

Question

I use the react-konva library to manipulate the elements of the canvas and I am trying to make the outside of an element blur when it comes out of the container (the inside part of element is not changed). Similar to drag elements in polotno: https://polotno.com/docs/demo-full-editor

You can check out the codesandbox below and in this example I wanna when dragging the circle out of scope of the rect, that outer part of the circle will be blurred.

https://codesandbox.io/s/crimson-sound-i7liy3?file=/src/index.js

score 1 · Answer 1 · answered Apr 16 '23 at 03:46

I don't see any simple ways to make such blur in Konva. If you want to have an effect, similar to Polotno you can just draw semi-transparent shape on top of your scene with the hole:

  const width = window.innerWidth;
  const height = window.innerHeight;
  const xPadding = (window.innerWidth - 200) / 2;
  const yPadding = (window.innerHeight - 200) / 2;

<Line
  points={[
    0,
    0,
    width,
    0,
    width,
    height,
    0,
    height,
    0,
    0,
    xPadding,
    yPadding,
    xPadding,
    height - yPadding,
    width - xPadding,
    height - yPadding,
    width - xPadding,
    yPadding,
    xPadding,
    yPadding
  ]}
  listening={false}
  closed
  fill="white"
  opacity={0.7}
/>

https://codesandbox.io/s/great-boyd-ryfkle?file=/src/index.js

Blur the outer part of the konna-react element when out of the container's range

1 Answers1