本文作者：李依晓对于前端来说，处理视觉稿是必不可少的，因为我们需要根据视觉稿来确定元素的位置、大小等信息。如果是比较简单的页面，手动调整每个元素带来的工作量还是可以接受的；但是，当模型中的材料数量很多时，手动调整每个元素不再是一种可接受的策略。在最近的活动开发中，笔者正好遇到了这个问题。本次活动的开展需要完成一款大富翁游戏，而作为一款大富翁游戏，地图自然是少不了的。在整张地图中，有着许多不同类型的方块。如果手动一一调整位置，工作量会非常大。那么有没有一种解决方案可以帮助我们快速确定网格的位置和类型呢？以下是作者使用的方法。方案简述站点地图首先，我们需要视觉同学提供的一张特殊的图片，我们称之为站点地图。这张图片必须满足以下要求：每个方块的左上角放置一个1px的像素，不同类型的方块用不同的颜色表示。背景颜色是纯色：很容易区分背景和网格。大小与地图背景图相同：可以直接使用地图上易于阅读的坐标。上图为例，每个路径方块的左上角有一个1px的像素点。为了看起来更明显，这里用红点表示。在实际情况中，不同的点由于网格的类型不同而具有不同的颜色。上图中，材质贴图的轮廓用黑色边框标出。可以看出，红点与各个路径方块之间存在一一对应关系。读取locusmap在上面的locusmap中，标注了所有方块的位置和类型信息。接下来我们要做的就是读取信息，生成json文件，供我们后续使用。constJImp=require('jimp');constnodepath=require('路径');functionparseImg(filename){JImp.read(filename,(err,image)=>{const{width,height}=image.bitmap;constresult=[];//左上角像素的颜色图片，即背景图片的颜色constmask=image.getPixelColor(0,0);//过滤掉非mask位置点for(lety=0;y{//根据距离从小到大排序constpp=[...points].filter((i)=>i!==point);const[one,two]=pp.sort((a,b)=>measureLen(point,a)-measureLen(point,b));if(!one){返回[];}//如果两条距离比较小，穷举出两条路线，选择最短的连通图路径。如果（二&&measureLen（一，二）<20000）{返回[一，二];}返回[一个];})();让最小值=无穷大；让minPath=[];for(leti=0;i为了处理图像颜色的错误，不要用相等来判断constisDifferentColor=(color1,color2)=>Math.abs(color1-color2)>0xf000ff;//判断(x,y)是否越界constisWithinImage=({x,y})=>x>=0&&x<图片。width&&y>=0&&y{/*...*/};//选择左上角的坐标constselectTopLeftDot=(reginDots)=>{/*...*/};//区域合并constreginMerge=({x,y})=>{constcolor=image.getPixelColor(x,y);//扫描点constreginDots=[{x,y,color}];//所有扫描点的颜色->扫描后，选择颜色值最多的作为该区域的颜色constdotColors={};点颜色[颜色]=1;for(leti=0;i{constcandidates=[/*left,right,up,down,upperleft,lowerleft,upperright,lowerright*/];returncandinates//移除超出边界的点。filter(isWithinImage)//获取每个点的颜色。map(({x,y})=>({x,y,color:image.getPixelColor(x,y)}))//移除与背景颜色相似的点。filter((item)=>isDifferentColor(item.color,maskColor));})();对于（种子的常量种子）{const{x:seedX,y:seedY,color:seedColor}=seed;//将这些点加入regionDots，作为下一次扫描区域的边界regionDots.push(seed);//设置点为背景色，避免重复扫描image.setPixelColor(maskColor,seedX,seedY);//这个点的颜色是新的没有被扫描过的颜色，把这个颜色加入到dotColors中if(dotColors[seedColor]){dotColors[seedColor]+=1;}else{//颜色为旧颜色，增加颜色的计数值dotColors[seedColor]=1;}}}//扫描完成后，选取编号最大的颜色值作为该区域的颜色consttargetColor=selectMostColor(dotColors);//选择左上角的坐标作为当前区域的坐标consttopLeftDot=selectTopLeftDot(reginDots);返回{...topLeftDot,color:targetColor,};};constparseBitmap=(filename)=>{JImp.read(filename,(err,img)=>{constresult=[];const{width,height}=image.bitmap;//背景颜色maskColor=image.getPixelColor(0,0);image=img;for(lety=0;yMath.abs(color1-color2)>0xf000ff;判断两种颜色不相等的0xf000ff是怎么来的呢？任何你想要的。这与图片中包含的颜色有关。如果你的背景颜色和图片上点的颜色很相似，这个值需要小一些；如果背景颜色与图片上点的颜色相差较大，这个值可以大一些。.参考资料https://zhuanlan.zhihu.com/p/89488964https://codeantenna.com/a/B5fEty3uiP
