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

【问题标题】：Konva/Canvas Background Blur / Frosted Glass effectKonva/Canvas 背景模糊/磨砂玻璃效果
【发布时间】：2021-11-12 22:06:18
【问题描述】：

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

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

如何在 Konva 或普通的 Canvas 中做到这一点？

【问题讨论】：

标签： canvas html5-canvas konvajs konva

【解决方案1】：

使用 2D 画布 API 获得这种效果可能非常困难。

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

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

在演示中，您可以尝试拖动红色方块来查看“剪切和粘贴”是如何工作的。

蓝色方块将 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>

【讨论】：