广度优先搜索的应用——将一个图形切成多块

Posted 2020-10-29 snsart

一、问题概述

如何将下列的一个图形（下图左）用鼠标沿着白色格线切成多块（比如沿着黑色路径切割成下图右的两块）呢？

二、解决思路

把组成图形的每个小方块全部存入数组A中，关键要考虑的是如何根据切割路径将数组A分解为数组A和B，B用来存储切割下来的那块图形中的小方块。要解决此问题需要以下几步：

1.为数组A中的小方块建立链接表，每个小方块有top、bottom、left、right四个属性，分别指向其上下左右的小方块，当小方块不存在时指向null；

2.根据鼠标移动位置，获得图形的切割路径，存储在一数组中；

3.根据切割路径，更新数组A中各小方块的链接关系，切割路径两侧的小方块将断开链接（left、right等属性指向null）；

4.从数组A中任意选择一个方块m，通过广度优先搜索，搜索所有与m有链接关系的方块，将其存入数组B，剩下的即为数组A；

以下为具体实现细节：

（注：本程序的实现借助了createjs框架来管理和绘制图形，并使用了我自己编写的createjsExtend工具库中的相关工具，在使用到这些工具时，我会做出必要的注解）

三、问题实现

一些变量说明：

stage：用createjs构建的舞台

canvas = document.getElementById(“canvas”);

stage = new createjs.Stage(canvas);

root： 一个容器，包含用flashcc创建的所有元素，此实例中所创建的所有图形也将加载到root中，首先需要将root加入stage中

stage.addChild(root);

用到的全局变量

var rows=4,columns=9;//初始图形包含4行9列的小方块
var rectHeight=rectWidth=50;//每个小方块的宽高
var shapeConts=[];//存储舞台上切割出来的所有图形，初始只有一个
var pathShape;//切割路径
var cutState=false;//判断是否处于切割状态
var mousedown=false;//判断鼠标是否按下

1.创建初始图形并为图形中的小方块建立链接关系

用createjs创建一个影片剪辑shapescont作为图形的容器，此容器包含此图形中的各个小方块，shapescont拥有的属性如下：

shapescont.shapes，一个数组，用来存储此图形中的所有小方块；

shapescont.linkpots,一个数组，存储图形中小方块之间链接点坐标，即所有小方块的顶点坐标；

shapesCont.cutPath，一个数组，存储此图形被切割过的所有链接点；

shapesCont.cutfinished，布尔值，在对图形切割过程中，此值为false，切割完成后为true；

创建初始图形代码如下：

 1 function createInitShapes(){
 2     var initShapes=[];//一个二维数组，存储图形中的小方块
 3     var shapesCont=new createjs.MovieClip();
 4     shapesCont.shapes=[];//存储图形形状
 5     shapesCont.linkPots=[];//存储图形中各链接点坐标,相对于shapesCont
 6     shapesCont.cutPath=[];//存储图形中的切割路径，相对于shapesCont
 7     for(var row=0;row<rows;row++){
 8         var rowArr=[];
 9         for(var column=0;column<columns;column++){
10             var shape=new createjs.Shape();
11             shape.graphics.setStrokeStyle(2).beginStroke("#ffffff").beginFill("red").drawRect(0,0,rectWidth,rectHeight);//画一个小方块
12             shape.x=rectWidth*column;
13             shape.y=rectHeight*row;
14             shapesCont.shapes.push(shape);
15             shapesCont.addChild(shape);
16             rowArr.push(shape);
17         }
18         initShapes.push(rowArr);
19     }
20     shapesCont.x=250;
21     shapesCont.y=100;
22     shapesCont.linkPots=getLinkPot(shapesCont);//得到shapesCont中的链接结点
23     shapesCont.addDragAction(new createjs.Rectangle(0,0,1024,768),stage,false,false);//这里为shapesCont图形添加拖动效果
24     shapeConts.push(shapesCont);
25     root.addChild(shapesCont);
26     
27     //为每个方块设置上下左右的图形链接；
28     (function setLinkShapes(){
29         for(var row=0;row<rows;row++){
30             for(var column=0;column<columns;column++){
31                 initShapes[row][column].left=column-1<0?null:initShapes[row][column-1];
32                 initShapes[row][column].top=row-1<0?null:initShapes[row-1][column];
33                 initShapes[row][column].right=column+1>8?null:initShapes[row][column+1];
34                 initShapes[row][column].buttom=row+1>3?null:initShapes[row+1][column];
35             }
36         }
37     })();
38 }

获得图形中方块间各个链接结点的方法，求解思路：遍历图形中各方块的四个顶点，根据顶点位置判断两个方块的顶点是否重叠，防止重复加入

 1 //获得shapeCont中所有小方块之间的链接点
 2 function getLinkPot(shapeCont){
 3     var arr=new Array();
 4     for(var i=0;i<shapeCont.shapes.length;i++){
 5         
 6         var pot1={x:shapeCont.shapes[i].x,y:shapeCont.shapes[i].y};
 7         var pot2={x:shapeCont.shapes[i].x+rectWidth,y:shapeCont.shapes[i].y};
 8         var pot3={x:shapeCont.shapes[i].x,y:shapeCont.shapes[i].y+rectHeight};
 9         var pot4={x:shapeCont.shapes[i].x+rectWidth,y:shapeCont.shapes[i].y+rectHeight};
10         if(myarrayIndexOf(arr,pot1)==-1){
11             arr.push(pot1);
12         }
13         if(myarrayIndexOf(arr,pot2)==-1){
14             arr.push(pot2);
15         }
16         
17         if(myarrayIndexOf(arr,pot3)==-1){
18             arr.push(pot3);
19         }
20         
21         if(myarrayIndexOf(arr,pot4)==-1){
22             arr.push(pot4);
23         }
24     }
25     return arr;
26     
27     //根据坐标位置判断两个点是否一样
28     function myarrayIndexOf(arr,pot){
29         if(arr.length==0){
30             return -1;
31         }
32         for(var i=0;i<arr.length;i++){
33             if(arr[i].x==pot.x&&arr[i].y==pot.y){
34                 return i;
35             }
36         }
37         return -1;
38     }
39 }

2.切割图形，获得shapescont的切割路径，存入shapescont的cutPath数组中

鼠标按下并移动时开始切割图形，切割过程中会根据鼠标离shapescont各链接结点的距离，来不断的将链接结点加入shapescont的cutPath数组中，从而最终形成shapescont的切割路径，如下图，蓝色点为切割路径

 1 //添加鼠标移动事件
 2 stage.addEventListener("stagemousemove",function(e){
 3         if(mousedown&&cutState){
 4             for(var i=0;i<shapeConts.length;i++){
 5                 cuting(shapeConts[i]);
 6             }
 7         }
 8     });    
 9 
10 //开始切割
11 function cuting(shapeCont){
12     shapeCont.cutfinish=false;
13     //鼠标在图形上的位置
14     var mouse={x:stage.mouseX-shapeCont.x,y:stage.mouseY-shapeCont.y};
15     drawCutPath(shapeCont);
16     for(var i=0;i<shapeCont.linkPots.length;i++){
17         //根据鼠标离链接结点的距离，来判断将哪一个链接结点加入切割路径中
18         if(createjsExtend.getDistance(mouse,shapeCont.linkPots[i])<10){
19             if(shapeCont.cutPath.length==0){
20                 arrayUtils.addSingleEleToArray(shapeCont.cutPath,shapeCont.linkPots[i]);
21             }else if(Math.abs(createjsExtend.getDistance(shapeCont.linkPots[i],shapeCont.cutPath[shapeCont.cutPath.length-1])-50)<15){
22                 arrayUtils.addSingleEleToArray(shapeCont.cutPath,shapeCont.linkPots[i]);
23             }
24         }
25     }
26 }

说明：arrayUtils.addSingleEleToArray(arr,ele);自己写的一个数组工具，作用为将ele加入arr中，保证ele在arr中的唯一性；

 3.根据切割路径，更新shapescont中各小方块的链接关系

这里首先需要根据每一段切割路经，获得其路经两侧的小方块（下图绿色部分），使两侧的小方块不再链接

首先需要知道每一小段切割路经是水平还是垂直，当为水平时，需要得到路经上下两侧的方块，否则要得到左右两侧的方块。

如下图，A、B为切割路径上相连的两点，可以根据A、B点x坐标是否相等来判断AB是否垂直，当垂直时，取得y坐标较小的点的坐标（B点）即为路径右侧即方块m点的坐标（小方块注册点在左上角，坐标系中y轴正方向朝下），m.left即为路径左侧的方块。同样的思路可以取得路径上下两侧的方块。

切断路径两侧方块链接的代码如下：

 1 //根据shapeCont中的切割路径，更新形状之间的链接状态，被切开的两块形状将不再链接
 2 function updateLinkState(shapeCont){
 3     for(var i=0;i<shapeCont.cutPath.length-1;i++){
 4         //获得每一小段切割路径两端的坐标
 5         var startPos=shapeCont.cutPath[i];
 6         var endPos=shapeCont.cutPath[i+1];
 7         if(startPos.x==endPos.x&&Math.abs(Math.abs(startPos.y-endPos.y)-50)<15){
 8             var pos=startPos.y<endPos.y?startPos:endPos;
 9             for(var j=0;j<shapeCont.shapes.length;j++){
10                 if(shapeCont.shapes[j].x==pos.x&&shapeCont.shapes[j].y==pos.y){
11                     var rightShape=shapeCont.shapes[j];
12                 }
13             }
14             if(rightShape!=null&&rightShape.left!=null){
15                 rightShape.left.right=null;    
16                 rightShape.left=null;
17             }
18         }
19         
20         if(startPos.y==endPos.y&&Math.abs(Math.abs(startPos.x-endPos.x)-50)<20){
21             var pos=startPos.x<endPos.x?startPos:endPos;
22             for(var j=0;j<shapeCont.shapes.length;j++){
23                 if(shapeCont.shapes[j].x==pos.x&&shapeCont.shapes[j].y==pos.y){
24                     var buttomShape=shapeCont.shapes[j]
25                 }
26             }
27             if(buttomShape!=null&&buttomShape.top!=null){
28                 buttomShape.top.buttom=null;
29                 buttomShape.top=null;
30             }
31         }
32     }
33 }

4.使用广度优先算法，将图形分成两块

经过上面的处理，路径两侧的图形将不再拥有链接关系，接下来要如何将路径两侧的方块分在两个组呢，这里可用广度优先算法的思路求解，方法如下：

1.从图形中任意选择一个方块比如m，定义一数组linkShapes，用来存储能与m连通的所有方块，定义队列checkShapes存储待检查的所有方块，将m加入checkShapes中

2.从队列checkShapes的队头取一方块k（第一次取到m），遍历k四周的方块，将能查找到的方块加入待检查数组checkShapes，将k加入linkShapes

3.重复第2步，直到checkShapes为空

这样就将与m连通的所有方块分到了一个组，实现代码如下：

 1 //查找所有与shape能联通的方块
 2 function getAllLinksShape(shape){
 3     var linkShapes=[];
 4     var checkShapes=[];
 5     checkShapes.push(shape)
 6     while(checkShapes.length>0){
 7         var shape=checkShapes.shift();
 8         if(shape.right!=null&&linkShapes.indexOf(shape.right)==-1&&checkShapes.indexOf(shape.right)==-1){
 9             checkShapes.push(shape.right);
10         }
11         
12         if(shape.buttom!=null&&linkShapes.indexOf(shape.buttom)==-1&&checkShapes.indexOf(shape.buttom)==-1){
13             checkShapes.push(shape.buttom);
14         }    
15         
16         if(shape.left!=null&&linkShapes.indexOf(shape.left)==-1&&checkShapes.indexOf(shape.left)==-1){
17             checkShapes.push(shape.left);
18         }    
19         
20         if(shape.top!=null&&linkShapes.indexOf(shape.top)==-1&&checkShapes.indexOf(shape.top)==-1){
21             checkShapes.push(shape.top);
22         }
23         linkShapes.push(shape);    
24     };    
25     return linkShapes;    
26 }

 

四、运用场景设想

运用本实例的制作思路，可以实现很多非常有趣的小游戏，比如可以用一张照片填充本实例的小方块，制作一款自己可以随意切割的拼图小游戏。

（原创博文，转载请注明出处）