超出容器范围时模糊 konna-react 元素的外部

Question

我使用 react-konva 库来操纵画布的元素，并且我试图在元素从容器中出来时使元素的外部模糊（元素的内部部分没有改变）。 类似polotno中的拖动元素：https://polotno.com/docs/demo-full-editor

您可以查看下面的代码和框，在这个例子中，当将 circle 拖出 rect 的范围时，circle 的外部将被模糊。

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

Answer 1

我没有看到任何简单的方法可以在 Konva 中制作这种模糊。如果你想有一个效果，类似于 Polotno 你可以在你的场景顶部画一个半透明的形状：

  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