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

Posted 2023-03-25

【中文标题】Konva/Canvas 背景模糊/磨砂玻璃效果

【英文标题】：Konva/Canvas Background Blur / Frosted Glass effect

【发布时间】：2021-11-12 22:06:18

【问题描述】：

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

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

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

【参考方案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>