Open geeeger opened 3 years ago
2020/4 月份收到一份需求，需要以下功能
当时提出了多种可能的解决方案
由于当时时间紧迫 尝试1被排除了，因为我没时间画遮罩，且不太会用，没有做彻底的实验 尝试2被排除了，因为背景是视频，透明渲染渗透不到视频上 尝试3被排除了，当时没画出来遮罩 尝试4被以一种怪异的方式实现，即生成图片，抠除纯色区域，最终也被排除，原因是文字会有毛边，在尝试将rbg转换为lab色彩空间后，再抠除文字颜色，发现抠多了UI展示效果不佳，文字整体偏粗，再者，由于文字有行高，不好控制位置。
今天尝试用svg mask来实现该功能，效果还不错 https://codepen.io/geeeger/pen/NWRyWVM
2020/4 月份收到一份需求，需要以下功能
当时提出了多种可能的解决方案
由于当时时间紧迫 尝试1被排除了，因为我没时间画遮罩，且不太会用，没有做彻底的实验 尝试2被排除了，因为背景是视频，透明渲染渗透不到视频上 尝试3被排除了，当时没画出来遮罩 尝试4被以一种怪异的方式实现，即生成图片，抠除纯色区域，最终也被排除，原因是文字会有毛边，在尝试将rbg转换为lab色彩空间后，再抠除文字颜色，发现抠多了UI展示效果不佳，文字整体偏粗，再者，由于文字有行高，不好控制位置。
今天尝试用svg mask来实现该功能，效果还不错 https://codepen.io/geeeger/pen/NWRyWVM