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

一、问题概述

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

二、解决思路

把组成图形的每个小方块全部存入数组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；

创建初始图形代码如下：

function createInitShapes(){
    var initShapes=[];//一个二维数组，存储图形中的小方块
    var shapesCont=new createjs.MovieClip();
    shapesCont.shapes=[];//存储图形形状
    shapesCont.linkPots=[];//存储图形中各链接点坐标,相对于shapesCont
    shapesCont.cutPath=[];//存储图形中的切割路径，相对于shapesCont
    for(var row=0;row<rows;row++){
        var rowArr=[];
        for(var column=0;column<columns;column++){
            var shape=new createjs.Shape();
            shape.graphics.setStrokeStyle(2).beginStroke("#ffffff").beginFill("red").drawRect(0,0,rectWidth,rectHeight);//画一个小方块
            shape.x=rectWidth*column;
            shape.y=rectHeight*row;
            shapesCont.shapes.push(shape);
            shapesCont.addChild(shape);
            rowArr.push(shape);
        }
        initShapes.push(rowArr);
    }
    shapesCont.x=250;
    shapesCont.y=100;
    shapesCont.linkPots=getLinkPot(shapesCont);//得到shapesCont中的链接结点
    shapesCont.addDragAction(new createjs.Rectangle(0,0,1024,768),stage,false,false);//这里为shapesCont图形添加拖动效果
    shapeConts.push(shapesCont);
    root.addChild(shapesCont);
    
    //为每个方块设置上下左右的图形链接；
    (function setLinkShapes(){
        for(var row=0;row<rows;row++){
            for(var column=0;column<columns;column++){
                initShapes[row][column].left=column-1<0?null:initShapes[row][column-1];
                initShapes[row][column].top=row-1<0?null:initShapes[row-1][column];
                initShapes[row][column].right=column+1>8?null:initShapes[row][column+1];
                initShapes[row][column].buttom=row+1>3?null:initShapes[row+1][column];
            }
        }
    })();
}

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

//获得shapeCont中所有小方块之间的链接点
function getLinkPot(shapeCont){
    var arr=new Array();
    for(var i=0;i<shapeCont.shapes.length;i++){
        
        var pot1={x:shapeCont.shapes[i].x,y:shapeCont.shapes[i].y};
        var pot2={x:shapeCont.shapes[i].x+rectWidth,y:shapeCont.shapes[i].y};
        var pot3={x:shapeCont.shapes[i].x,y:shapeCont.shapes[i].y+rectHeight};
        var pot4={x:shapeCont.shapes[i].x+rectWidth,y:shapeCont.shapes[i].y+rectHeight};
        if(myarrayIndexOf(arr,pot1)==-1){
            arr.push(pot1);
        }
        if(myarrayIndexOf(arr,pot2)==-1){
            arr.push(pot2);
        }
        
        if(myarrayIndexOf(arr,pot3)==-1){
            arr.push(pot3);
        }
        
        if(myarrayIndexOf(arr,pot4)==-1){
            arr.push(pot4);
        }
    }
    return arr;
    
    //根据坐标位置判断两个点是否一样
    function myarrayIndexOf(arr,pot){
        if(arr.length==0){
            return -1;
        }
        for(var i=0;i<arr.length;i++){
            if(arr[i].x==pot.x&&arr[i].y==pot.y){
                return i;
            }
        }
        return -1;
    }
}

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

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

//添加鼠标移动事件
stage.addEventListener("stagemousemove",function(e){
        if(mousedown&&cutState){
            for(var i=0;i<shapeConts.length;i++){
                cuting(shapeConts[i]);
            }
        }
    });    

//开始切割
function cuting(shapeCont){
    shapeCont.cutfinish=false;
    //鼠标在图形上的位置
    var mouse={x:stage.mouseX-shapeCont.x,y:stage.mouseY-shapeCont.y};
    drawCutPath(shapeCont);
    for(var i=0;i<shapeCont.linkPots.length;i++){
        //根据鼠标离链接结点的距离，来判断将哪一个链接结点加入切割路径中
        if(createjsExtend.getDistance(mouse,shapeCont.linkPots[i])<10){
            if(shapeCont.cutPath.length==0){
                arrayUtils.addSingleEleToArray(shapeCont.cutPath,shapeCont.linkPots[i]);
            }else if(Math.abs(createjsExtend.getDistance(shapeCont.linkPots[i],shapeCont.cutPath[shapeCont.cutPath.length-1])-50)<15){
                arrayUtils.addSingleEleToArray(shapeCont.cutPath,shapeCont.linkPots[i]);
            }
        }
    }
}

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

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

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

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

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

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

//根据shapeCont中的切割路径，更新形状之间的链接状态，被切开的两块形状将不再链接
function updateLinkState(shapeCont){
    for(var i=0;i<shapeCont.cutPath.length-1;i++){
        //获得每一小段切割路径两端的坐标
        var startPos=shapeCont.cutPath[i];
        var endPos=shapeCont.cutPath[i+1];
        if(startPos.x==endPos.x&&Math.abs(Math.abs(startPos.y-endPos.y)-50)<15){
            var pos=startPos.y<endPos.y?startPos:endPos;
            for(var j=0;j<shapeCont.shapes.length;j++){
                if(shapeCont.shapes[j].x==pos.x&&shapeCont.shapes[j].y==pos.y){
                    var rightShape=shapeCont.shapes[j];
                }
            }
            if(rightShape!=null&&rightShape.left!=null){
                rightShape.left.right=null;    
                rightShape.left=null;
            }
        }
        
        if(startPos.y==endPos.y&&Math.abs(Math.abs(startPos.x-endPos.x)-50)<20){
            var pos=startPos.x<endPos.x?startPos:endPos;
            for(var j=0;j<shapeCont.shapes.length;j++){
                if(shapeCont.shapes[j].x==pos.x&&shapeCont.shapes[j].y==pos.y){
                    var buttomShape=shapeCont.shapes[j]
                }
            }
            if(buttomShape!=null&&buttomShape.top!=null){
                buttomShape.top.buttom=null;
                buttomShape.top=null;
            }
        }
    }
}

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

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

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

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

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

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

//查找所有与shape能联通的方块
function getAllLinksShape(shape){
    var linkShapes=[];
    var checkShapes=[];
    checkShapes.push(shape)
    while(checkShapes.length>0){
        var shape=checkShapes.shift();
        if(shape.right!=null&&linkShapes.indexOf(shape.right)==-1&&checkShapes.indexOf(shape.right)==-1){
            checkShapes.push(shape.right);
        }
        
        if(shape.buttom!=null&&linkShapes.indexOf(shape.buttom)==-1&&checkShapes.indexOf(shape.buttom)==-1){
            checkShapes.push(shape.buttom);
        }    
        
        if(shape.left!=null&&linkShapes.indexOf(shape.left)==-1&&checkShapes.indexOf(shape.left)==-1){
            checkShapes.push(shape.left);
        }    
        
        if(shape.top!=null&&linkShapes.indexOf(shape.top)==-1&&checkShapes.indexOf(shape.top)==-1){
            checkShapes.push(shape.top);
        }
        linkShapes.push(shape);    
    };    
    return linkShapes;    
}

 

四、运用场景设想

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

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