首页 > 编程知识 正文

前端点击变色效果实现,js实现下拉菜单效果

时间:2023-05-06 08:51:33 阅读:221408 作者:429

注:我所实现的 low poly 效果是基于这篇论文所实现的,我只是做了一个 c 版本的实现。

我们先看下 low poly 的效果和实现步骤。

过程图 图像组成(可跳过)

看完效果图后先不详细说这个效果如何制作的,我们先简单了解下图像到底是怎么组成的。

比如有一张图片,它的大小是 100x100,那么这张图片的颜色信息是如何存储的呢?简单的说,这张图片一共有 10000 个点,每个点表示了一个颜色,一行 100 个点,这就是宽,一共 100 行,这就是高。那么颜色是怎么表现的呢,就是我们常见的 RGBA。

下面是我画的一个矩形,它非常的小,大小是 2x2,对应成数据结构相关的话,它可以用这样一个二维数组来表示
[
[#FF0000,#000000],
[#00FF00,#0000FF]
]
我们在 iOS 里面使用起来的话会是下面的一维数组方式,一个颜色占 4 个位置,分别来表示 RGBA ,当然,图片有许许多多的格式,所以图片的的存储肯定不是这么简单的把颜色给存进去就行了,不同格式会有不同的存储方式,这里不做讨论,只要理解这个一维数组就可以了。

理解之后再去理解一些常见的图像效果就不难了,比如灰度算法,把一张彩色的图片转成黑白效果,可以用下面这个公式。

Gray = (Red + Green + Blue) / 3

比如 R=210,G=90,B=60,这是一个橘色,采用上面的公式,计算得出 Gray=120,于是变成了 R=120,G=120,B=120,这就从橘色变成了灰色。

before after

所以那些图像处理的效果,比如美白,泛黄,朦胧等种种效果都可以理解为,将原有的颜色(数字),经过数学公式处理,变成了另外一个颜色(数字)。

low poly

下面来说下 low poly 的图像效果实现,我是使用了这篇论文的算法,这个作者在知乎的上回答其实已经讲的很清楚了,所以我只是对她的算法进行了实现,并没太大难度。

这里还是简单说下是如何实现的吧,一共分三个步骤。

使用 Sobel 算法找到边缘点,对应上图里的 Find Edge使用 Delaunay 算法将顶点组成许许多多的三角形,对应上图里的 Delaunay取各个三角形中心点坐标的色值来填充三角形,对应上图里的 Fill Color

还有个细节就是添加一些随机顶点,避免出现非常夸张的锐角三角形,具体的分析大家可以看那个回答,我这里就不赘述了。还有就是有人建议作者对随机顶点进行泊松采样,可以让三角形的大小更一致,这个我也已经实现了,现在项目里默认启用泊松采样的效果。至于泊松采样和其他随机的区别可以看下图。

Poisson disc

这个效果我本来是想打算纯 c 实现的,这样放到 Android 上面的话就很简单了,JNI 搞一下就成,但是比较蛋疼的是在去重那一步骤,我借助了 NSSet,本来想自己写个 c 版本的,失败了,所以优化的地方还有很多,如果有啥问题和想法,欢迎大家去提 issue。代码我放到了 Github 上面,可以点这里查看。

其他

写完才发现内容有点少,这里就再补充一张我之前思考做拼接长图的方案图吧。
简单的两张图拼接其实很简单,就是数组合成,但如果是 QQ 聊天界面这种上下有重复的话就需要做一些检测,然后再合成起来。

图像拼接

然后再放个我做的 demo 效果图,如果大家对这个功能有兴趣我到时候再整理下放到 Github 上面。地址:https://github.com/DevinShine/Fusion

图像拼接 小结

本文说到了两个图片效果处理,一个是 low poly 效果,一个是长图拼接,其实说到底,都是通过一定的算法对数组进行处理,然后再将数组变回图片就行了。BTW,我之前傻乎乎的用纯 swift 来做上面那个图片拼接,图片一多,执行就要好几秒,然后全部换成 c 来实现就没问题了。

版权声明:该文观点仅代表作者本人。处理文章:请发送邮件至 三1五14八八95#扣扣.com 举报,一经查实,本站将立刻删除。