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