84669 人が学習中
152542 人が学習中
20005 人が学習中
5487 人が学習中
7821 人が学習中
359900 人が学習中
3350 人が学習中
180660 人が学習中
48569 人が学習中
18603 人が学習中
40936 人が学習中
1549 人が学習中
1183 人が学習中
32909 人が学習中
无意中发现了http://css.v2bo.com这个在线的css sprite工具,试用了一下那个“示例”,发现它能自动框选图标,自动绕开透明区域,感觉非常神奇,但是代码经过压缩了的,不知道怎么实现的,有前端大神解释一下原理吗?
欢迎选择我的课程,让我们一起见证您的进步~~
具体算法猜不出,但基本原理应该不难呢。
canvas可以得到图片的某一点上的颜色值,自然也可以得到透明度,有这个基础随便怎么玩都行了。
抛砖引玉下: 1、依次对每条边的像素进行检查,有不透明的就扩展那条边,继续检查直到这条边没有不透明像素为止 2、重复上面步骤直到所有边都没有不透明像素为止(后面边的调整可能会影响到前面边的长度) 3、至此,选中的图形一定全部在这个框内了,或者说根本什么都没选中。。。 4、收缩选框的四条边,跟1、2同理,改成有透明像素就收缩那条边,若干次重复后所有边都紧贴选中图形/或者选框面积为0,就是没选中任何东西
可能的优化: 对第1步:找到第一个不透明像素后,后续的检查就在它附近为起点,不透明像素大部分是扎堆出现的。 对第2步:1、2步只扩展不搜索,所以第二次检查某条边是可以保证即使这条边长度(覆盖的像素点)变了,也只加不减,只要检查增长的部分就行了。(选框很大时可能会有点用吧。。。)
没学过计算机图形学,不过直觉上上面的算法应该也是能接受的。
好学好用githubspriteCow
具体算法猜不出,但基本原理应该不难呢。
canvas可以得到图片的某一点上的颜色值,自然也可以得到透明度,有这个基础随便怎么玩都行了。
抛砖引玉下:
1、依次对每条边的像素进行检查,有不透明的就扩展那条边,继续检查直到这条边没有不透明像素为止
2、重复上面步骤直到所有边都没有不透明像素为止(后面边的调整可能会影响到前面边的长度)
3、至此,选中的图形一定全部在这个框内了,或者说根本什么都没选中。。。
4、收缩选框的四条边,跟1、2同理,改成有透明像素就收缩那条边,若干次重复后所有边都紧贴选中图形/或者选框面积为0,就是没选中任何东西
可能的优化:
对第1步:找到第一个不透明像素后,后续的检查就在它附近为起点,不透明像素大部分是扎堆出现的。
对第2步:1、2步只扩展不搜索,所以第二次检查某条边是可以保证即使这条边长度(覆盖的像素点)变了,也只加不减,只要检查增长的部分就行了。(选框很大时可能会有点用吧。。。)
没学过计算机图形学,不过直觉上上面的算法应该也是能接受的。
好学好用github
spriteCow