Konva/Canvas 背景模糊/磨砂玻璃效果

Question

我正在使用 Konva/Canvas 绘制多个按 z 顺序排列的半透明矩形。目前，这看起来像下图的右侧。

现在，我想实现一种称为“磨砂玻璃效果”/“背景模糊”的效果，您可以在左侧看到。这个想法是半透明矩形下方的矩形重叠部分将被模糊。

如何在 Konva 或普通 Canvas 中执行此操作？

Answer 1

使用 2D canvas API.

可能很难获得此效果

如果您有静态形状，您可以尝试“剪切并复制”您想要模糊的部分，然后只在其上应用效果。

另一种可能的解决方案是使用 CSS 中的 backdrop-filter 并在 canvas 上绘制矩形 div 并在其上应用此滤镜，它会模糊部分 canvas 内容.

在演示中，您可以尝试拖动红色方块以查看“剪切和粘贴”的效果。

蓝色方块结合使用 div 和 CSS 过滤器。

const stage = new Konva.Stage({
  container: 'container',
  width: window.innerWidth,
  height: window.innerHeight
});

const layer = new Konva.Layer();
stage.add(layer);

const rect1 = new Konva.Rect({
  x: 50,
  y: 50,
  width: 100,
  height: 100,
  fill: 'green'
});
layer.add(rect1);

const group = new Konva.Group({
  x: 100,
  y: 100,
  draggable: true,
})
layer.add(group);

const rect2 = new Konva.Rect({
  width: 50,
  height: 50,
  fill: 'green',
  filters: [Konva.Filters.Blur],
  blurRadius: 20,
});
group.add(rect2);
rect2.cache({ width: 70, height: 70 });

const rect3 = new Konva.Rect({
  width: 100,
  height: 100,
  fill: 'red',
  opacity: 0.4
});
group.add(rect3);


const rect4 = new Konva.Rect({
  y: 100,
  fill: 'blue',
  width: 100,
  height: 100,
  opacity: 0.5,
  draggable: true
});
layer.add(rect4);

const blurEl = document.createElement('div');
stage.content.appendChild(blurEl);
Object.assign(blurEl.style, {
  position: 'absolute',
  width: rect4.width()+ 'px',
    height: rect4.height()+ 'px',
  backdropFilter: 'blur(2px)',
  pointerEvents: 'none'
});

function updateBlur() {
   Object.assign(blurEl.style, {
    top: rect4.y() + 'px',
    left: rect4.x() + 'px'
  });
}
updateBlur();

rect4.on('dragmove', () => {
    updateBlur();
})

<script src="https://unpkg.com/konva@^8/konva.min.js"></script>
<div id="container"></div>

Konva/Canvas 背景模糊/磨砂玻璃效果

Konva/Canvas Background Blur / Frosted Glass effect

canvas

html5-canvas

konvajs

konva