蜜蜂拼图 Objective-C

BeePuzzle

蜜蜂拼图 https://github.com/iOSJYF/BeePuzzle

github地址：BeePuzzle

项目使用了cocospod，又设置了忽略文件，所以下载的时候请自行 pod install 一下

而且采用了之前蜜蜂的图片封装，详见 beeCustomPhoto

首先来一波效果图:

gif

gif

拼图默认是正方形的裁剪，所以一开始进去截图比例是1：1，默认横竖切割数一样，难度对应切割分别为3、4、5。

首页

• 对应控制器：ViewController
  
  首先进行图片的选择之后，在代理方法里我对图片进行了压缩（如果不进行压缩，图片太大会导致显示卡顿，因为拼图界面是对图片进行切割，图片太大可能导致CPU负载过多而崩溃）
  
  压缩方法如下:
  

#pragma mark - 压缩图片至指定大小
- (NSData *)beeCustomPic:(UIImage *)image ToCustomSize:(CGSize)size
{

   CGSize mysize = size;
   CGSize resize = image.size;
   if(resize.width > mysize.width){
        resize = CGSizeMake(mysize.width, mysize.width/resize.width * resize.height);
   }
   if(resize.height > mysize.height){
       resize = CGSizeMake(mysize.height/resize.height * resize.width, mysize.height);
    }
   if (resize.width <= 0 || resize.height <= 0) return nil;
   UIGraphicsBeginImageContextWithOptions(resize, NO, image.scale);
   [image drawInRect:CGRectMake(0, 0, resize.width, resize.height)];
   UIImage *newimage = UIGraphicsGetImageFromCurrentImageContext();
   UIGraphicsEndImageContext();
   NSData *data = UIImageJPEGRepresentation(newimage, 1);
   return data;
}

拼图页面

• 对应控制器：BeeSlicingViewController
  
  这里我用了collectionView 作为拼图的基础控件，在cololectionView上加手势来进行判断
  
  首先对传过来的image进行相对应的切割
  
  行数: kColumns
  
  列数: kRows
  
  总共 kNumbers 块拼图 kNumbers = kColumns * kRows
  

-(NSArray *)cutImage:(NSString *)imageName
{
    NSMutableArray *array=[[NSMutableArray alloc]init];
    UIImage *image = self.image;
    for(int i=0;i

此时通过调用此方法可以得到 kNumbers 个图片，collectionView 相对应的设置 kNumbers 个cell，然后对此数组进行打乱，赋值于cell

-(NSArray *)randomArray
{
    NSMutableArray *startArray=[[NSMutableArray alloc]initWithArray:self.cutImageArray];
    NSMutableArray *resultArray=[[NSMutableArray alloc] initWithCapacity:0];
    NSInteger m=kNumbers;
    for (int i=0; i

在此方法中，我记录当前for循环随机出来的元素属于第几个，然后放到sxArray中，这样可以得到随机数组的一个排序，用以判断顺序，如果最后该数组的排序跟以顺序排列的数组 TheNumArray 一样，则可以判断完成拼图

之后就是手势的操作了，先在collectionView上添加手势

 UIPanGestureRecognizer *pan = [[UIPanGestureRecognizer alloc] initWithTarget:self action:@selector(changeLocation:)];
  [self.collectionView addGestureRecognizer:pan];

手势对应操作

这里手势方法在你拖拉的时候会触发三次，分别为：

• UIGestureRecognizerStateBegan 点击
• UIGestureRecognizerStateChanged 拖拽
• UIGestureRecognizerStateEnded 放开
  
  
  
  
• 在 UIGestureRecognizerStateBegan 中，通过 point 拿到对应的 indexPath,定义开始的 indexPath 为 sourceIndexPath
  
• 在 UIGestureRecognizerStateChanged 中用拖拽后停下来的 indexPath 与 sourceIndexPath 做比较进行计算，直接调用 collectView 的方法
  
  
  

- (void)moveItemAtIndexPath:(NSIndexPath *)indexPath toIndexPath:(NSIndexPath *)newIndexPath;

用此方法进行cell的替换操作，本来蜜蜂认为这样就简单完事了，后来发现这样只能实现相邻row的一个替换，如果cell上下移动，实际上是相隔了好几个row，从而会导致顺序有点错乱，仔细研究了一下，发现这个方法其实是把前面的indexPath给remove然后在后面加上，而不是我们想要的A替换为B，B替换为A的操作，所以我在后面加了两个for循环处理，如果 sourceIndexPath 小于 indexPath，证明是向下滑动，会走进第一个for循环，我就反过来把indexPath一个个moveItem到sourceIndexPath的位置。同理可处理 sourceIndexPath 大于 indexPath 的情况，然后对sxArray进行一个排序更换，从而得到你排列的顺序

• 在 UIGestureRecognizerStateEnded 中将 sourceIndexPath 设为nil，并且对sxArray进行判断，如果排序跟 TheNumArray 一样，则拼图的顺序已经正确，
  进行拼图成功操作

- (void)changeLocation:(id)sender
{
    
    UIPanGestureRecognizer *pan = (UIPanGestureRecognizer *)sender;
    UIGestureRecognizerState state = pan.state;
    
    CGPoint point = [pan locationInView:self.collectionView];
    NSIndexPath *indexPath = [self.collectionView indexPathForItemAtPoint:point];
    
    static NSIndexPath *sourceIndexPath = nil; //手势开始的cell的indexPath
    
    switch (state) {
        case UIGestureRecognizerStateBegan:
        {
            if (indexPath)
            {
                sourceIndexPath = indexPath;
            }
            break;
        }
            
        case UIGestureRecognizerStateChanged:
        {
            
            //如果改变位置的cell存在 且与源cell位置不同 且2个cell处于同一个分区
            if (indexPath && ![indexPath isEqual:sourceIndexPath] && indexPath.section == sourceIndexPath.section)
            {
                
                [self.collectionView moveItemAtIndexPath:sourceIndexPath toIndexPath:indexPath];
                
                // 处理向下拖拽顺序错乱
                for (int i = (int)indexPath.row-1; i > (int)sourceIndexPath.row; i --) {
                    NSIndexPath *index = [NSIndexPath indexPathForRow:i inSection:0];
                    NSIndexPath *index2 = [NSIndexPath indexPathForRow:i-1 inSection:0];
                    [self.collectionView moveItemAtIndexPath:index toIndexPath:index2];
                }
                // 处理向上拖拽顺序错乱
                for (int i = (int)indexPath.row+1; i < (int)sourceIndexPath.row; i ++) {
                    NSIndexPath *index = [NSIndexPath indexPathForRow:i inSection:0];
                    NSIndexPath *index2 = [NSIndexPath indexPathForRow:i+1 inSection:0];
                    [self.collectionView moveItemAtIndexPath:index toIndexPath:index2];
                }

                int a = [self.sxArray[sourceIndexPath.row]intValue];
                
                [self.sxArray removeObjectAtIndex:sourceIndexPath.row];
                [self.sxArray insertObject:[NSNumber numberWithInt:a] atIndex:indexPath.row];
                sourceIndexPath = indexPath;

            }
            break;
        }
            
        default:
        {
            sourceIndexPath = nil;
            if ([self.sxArray isEqualToArray: self.TheNumArray]) {
                [self doTheSuccess];
            }
            break;
        }
    }
}

新手开车，大神们多多指教~！