这种像素化效果可以用raphael.js实现吗?

Can this pixelation effect be achieved using raphael.js?

本文关键字：raphael js 实现 像素      更新时间：2023-09-26

我想在网页上逐步像素化图像，并将像素化作为过渡动画。像素化将从使用小像素开始，像素将逐渐变大。最后，像素化会反转，然后显示第二张图像。

我正在寻找一个效果像像素效果在这里-你需要选择像素作为过渡，然后点击图像。

是的，我可以使用这个库，但我已经有一个拉斐尔画布，我有兴趣知道是否(以及如何)这可能是可能的。

Raphael并不是真正用来处理光栅图形的，它是一个矢量库。在canvas中实现

我认为最好的选择是使用另一个库进行像素化(就像您链接的那个，如果您不介意许可证的话)。拉斐尔.js不支持这种效果，因为它是一个矢量库。您可以将拉斐尔.js SVG转换为图像并在其上运行效果-参见这个。

注意:这不是你问题的直接解决方案，但它提供了另一种实现像素化效果的方法(供其他用户寻找解决方案)。

有一个近像素项目。这是一个能够使用HTML5画布元素将图像转换为像素化版本的脚本，并根据MIT许可获得许可。

GitHub项目页面在这里。

用法: 

document.getElementById('portrait-image').closePixelate([
  { resolution : 24 },
  { shape : 'circle', resolution : 24, size: 16, offset: 12, alpha: 0.5 }
]);

对于ie来说，这真的很简单，因为像素效果是默认支持的扩展CSS属性。

像素化效果的CSS属性:

-ms-filter: "progid:DXImageTransform.Microsoft.Pixelate(MaxSquare=30, Duration=1)";
filter: progid:DXImageTransform.Microsoft.Pixelate(MaxSquare=30, Duration=1);

对于其他浏览器，您可以基于如下代码开发自己的解决方案:

http://phrogz.net/tmp/canvas_image_zoom.html

相关文章：