经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置：技术经验 » 移动开发 » iOS » 查看文章
iOS-宫格拼图
来源：cnblogs　　作者：macro小K　　时间：2021/4/12 9:50:09　　对本文有异议

思路

要求设计思路是类似手持拼图游戏，拼图需求要求有一块为空白版，作为移动方块的预留位置用，通过选择图片后在起初对所有图像方块随机打乱顺序时，发现随机打乱顺序，没办法拼图完成，拼图移动是空白快最临近的上下左右四个图像块的移动，在打乱顺序的时候，也要按照这个算法逻辑实现，才能拼图完成；

另外逻辑实现上，用tag来记录图片，用accessibilityValue 来记录图片的实际位置标记；

用三个数组来实现顺序打乱、正序校验、拼图位置的校验等，起初对三个数组进行相同的初始化值；

实现

变量及相关初始化

  1. ///次序，用来排序
  2. @property (nonatomic,strong) NSMutableArray * orderArray;
  3. ///次序，用来乱序打乱拼图
  4. @property (nonatomic,strong) NSMutableArray * disorderArray;
  5. ///次序，用来拼图移动位置记录
  6. @property (nonatomic,strong) NSMutableArray * puzzleArray;
  7. ///图片原图
  8. @property (nonatomic,strong) UIImage * puzzleImage;
  9. ///行、列数【难度】
  10. @property (nonatomic,assign) NSInteger rows;
  11. ///方块图间距
  12. @property (nonatomic,assign) CGFloat itemSpace;
  13. ///四周边距
  14. @property (nonatomic,assign) CGFloat marginSpace;
  16. ///是否允许拼图
  17. @property (nonatomic,assign) BOOL allowJoint;
  18. ///拖动拼图
  19. @property (nonatomic,strong) UIImageView * panImageView;
  20. ///拖动拼图Frame
  21. @property (nonatomic,assign) CGRect  panImageFrame;
  1. - (instancetype)initWithFrame:(CGRect)frame
  2.                          rows:(NSInteger)rows
  3.                   puzzleImage:(UIImage *)puzzleImage{
  4.     self = [super initWithFrame:frame];
  5.     if (self) {
  6.         _rows = rows;
  7.         _puzzleImage = puzzleImage;
  8.         [self setupPP];
  9.     }
  10.     return self;
  11. }
  13. - (void)setupPP{
  14.     self.userInteractionEnabled = NO;
  15.     _allowJoint = YES;
  16.     _orderArray = [NSMutableArray array];
  17.     _disorderArray = [NSMutableArray array];
  18.     _puzzleArray = [NSMutableArray array];
  19.     
  20. //    _rows = 6;
  21.     _itemSpace = floor(_rows*xkScale/(_rows/2));
  22.     _marginSpace = floor(_rows*xkScale);
  23.     
  24.     self.backgroundColor = [UIColor whiteSmoke];
  25.     
  26.     
  27.     [self setupOrderArray:(_rows * _rows)];
  28.     
  29.     ///如果图片的大小大于当前宽度，就压缩
  30.     if (_puzzleImage.size.width > CGRectGetWidth(self.frame)) {
  31.         UIGraphicsBeginImageContextWithOptions(self.bounds.size, NO, 1);
  32.         [_puzzleImage drawInRect:CGRectMake(0,0,self.bounds.size.width,self.bounds.size.height)];
  33.         UIImage* newImage = UIGraphicsGetImageFromCurrentImageContext();
  34.         UIGraphicsEndImageContext();
  35.         _puzzleImage = newImage;
  36.     }
  37.   
  38.     CGFloat pWidth = (CGRectGetWidth(self.frame)  - _itemSpace*(_rows-1) - _marginSpace*2)/_rows;
  39.     CGFloat pHeight = (CGRectGetHeight(self.frame)  - _itemSpace*(_rows-1) - _marginSpace*2)/_rows;
  40.     
  41.     for (int i = 0; i < _rows; i ++) {
  42.         for (int j = 0; j < _rows; j ++) {
  43.             NSInteger order = _rows * i + j;
  44.             NSLog(@"order = %ld",order);
  45.             /*
  46.             NSInteger indexes_x = 0;
  47.             NSInteger indexes_y = 0;
  48.             
  49.             if (order < (_rows *_rows) - 1) {
  50.                 NSInteger location = [_disorderArray[order] integerValue];
  51.                 indexes_y = location/_rows;///第几行
  52.                 indexes_x = location%_rows;///第几个
  53.             }
  54.             else{
  55.                 indexes_y = _rows - 1;
  56.                 indexes_x = _rows - 1;
  57.             }
  58.             CGFloat x_img = _marginSpace + (indexes_x)*(pWidth + _itemSpace);
  59.             CGFloat y_img = _marginSpace + (indexes_y)*(pHeight + _itemSpace);
  60.             */
  61.             CGFloat x = _marginSpace + (j)*(pWidth + _itemSpace);
  62.             CGFloat y = _marginSpace + (i)*(pHeight + _itemSpace);
  63.             
  65.             UIImageView *imgView = [self puzzleImageWithFrame:CGRectMake(x, y, pWidth, pHeight)];
  66.             //将UIImage转化成CGImage
  67.             CGImageRef imageRef = CGImageCreateWithImageInRect(_puzzleImage.CGImage, CGRectMake(x, y, pWidth, pHeight));
  68.             //将CGImage转化成UIImage
  69.             UIImage *imageNew = [UIImage imageWithCGImage:imageRef];
  70.             imgView.image = imageNew;
  71.             ///用来标记view
  72.             imgView.tag = order + 1;
  73.             ///用来记录view位置
  74.             imgView.accessibilityValue = [NSString stringWithFormat:@"%ld",order + 1];
  75.             [self addSubview:imgView];
  76.             
  77.             if (imgView.tag == (_rows * _rows)) {
  78.                 imgView.image = [UIImage imageNamed:@"pp_chunk"];
  79.                 imgView.backgroundColor = [UIColor whiteSmoke];
  80.             }
  81.         }
  82.     }
  83.     
  84.     dispatch_time_t popTime = dispatch_time(DISPATCH_TIME_NOW, 1.5 * NSEC_PER_SEC);
  85.     dispatch_after(popTime, dispatch_get_main_queue(), ^(void){
  86.         [self startDisorganizePuzzleImage];
  87.     });
  88. }
  1. - (void)setupOrderArray:(NSInteger)count{
  2.     for (int i = 1; i<=count; i ++) {
  3.         [_orderArray addObject:[NSString stringWithFormat:@"%d",i]];
  4.         [_disorderArray addObject:[NSString stringWithFormat:@"%d",i]];
  5.         [_puzzleArray addObject:[NSString stringWithFormat:@"%d",i]];
  6.         
  7.     }
  8. }

打乱拼图顺序

打乱拼图顺序的算法和规则，可以根据打乱的程度或者次数，通过递归添加结束条件

  1. - (void)setupDisorganizePuzzleImageNumber:(NSInteger)number{
  2.     if (number <= 0) {
  3.         self.userInteractionEnabled = YES;
  4.         return;
  5.     }
  6.     self.userInteractionEnabled = NO;
  7.     ///获取空白格
  8.     UIImageView *emImg = [self viewWithTag:(_rows * _rows)];
  9.     ///获取空白格的位置
  10.     NSInteger emLocation = [emImg.accessibilityValue integerValue];
  11.     ///通过空白格位置，获取四周可以移动的格子的位置与tag
  12.     NSMutableArray *arrayLoc = [NSMutableArray array];
  13.     NSInteger  upLocation = emLocation - _rows;
  14.     NSInteger  downLocation = emLocation + _rows;
  15.     NSInteger  leftLocation = emLocation - 1;
  16.     NSInteger  righjtLocation = emLocation + 1;
  17.     if (upLocation > 0) {///上
  18.         [arrayLoc addObject:@(upLocation)];
  19.     }
  20.     if (downLocation <= (_rows*_rows)) {///下
  21.         [arrayLoc addObject:@(downLocation)];
  22.     }
  23.     if (leftLocation%_rows != 0 && leftLocation <= (_rows*_rows)) {///左
  24.         [arrayLoc addObject:@(leftLocation)];
  25.     }
  26.     if (righjtLocation%_rows != 1 && righjtLocation <= (_rows*_rows)) {///右
  27.         [arrayLoc addObject:@(righjtLocation)];
  28.     }
  29.     ///随机获取一个转移目标
  30.     NSInteger random = arc4random() % arrayLoc.count;
  31.     NSInteger targetLocation = [arrayLoc[random] integerValue];
  32.     NSInteger targetIndex = [_disorderArray indexOfObject:[NSString stringWithFormat:@"%ld",targetLocation]];
  33.     ///获取目标试图
  34.     UIImageView *targetImg = [self viewWithTag:targetIndex + 1];
  35.     if (targetImg) {
  36.         CGRect targetRect = CGRectMake(CGRectGetMinX(targetImg.frame),
  37.                                        CGRectGetMinY(targetImg.frame),
  38.                                        CGRectGetWidth(targetImg.frame),
  39.                                        CGRectGetHeight(targetImg.frame));
  40.         CGRect emRect = CGRectMake(CGRectGetMinX(emImg.frame),
  41.                                    CGRectGetMinY(emImg.frame),
  42.                                    CGRectGetWidth(emImg.frame),
  43.                                    CGRectGetHeight(emImg.frame));
  44.         [UIView animateWithDuration:0.01 animations:^{
  45.             emImg.frame = targetRect;
  46.             targetImg.frame = emRect;
  47.         } completion:^(BOOL finished) {
  48.             ///处理交换【打乱次序】
  49.             NSInteger emIndex = [_disorderArray indexOfObject:emImg.accessibilityValue];
  50.             [_disorderArray exchangeObjectAtIndex:(targetIndex) withObjectAtIndex:(emIndex)];
  51.             
  52.             ///切换保存顺序【拼图】
  53.             NSInteger accesTarget = [targetImg.accessibilityValue integerValue] - 1;
  54.             NSInteger accesEm = [emImg.accessibilityValue integerValue] - 1;
  55.             [_puzzleArray exchangeObjectAtIndex:(accesTarget) withObjectAtIndex:(accesEm)];
  56.             
  57.             targetImg.accessibilityValue = [NSString stringWithFormat:@"%ld",emLocation];
  58.             emImg.accessibilityValue = [NSString stringWithFormat:@"%ld",targetLocation];
  59.             
  60.             
  61.             [self setupDisorganizePuzzleImageNumber:number - 1];
  62.         }];
  63.     }
  64. }

拼图点击手势（空白格不允许）

  1. ///拼图点击事件
  2. - (void)puzzleImageTapClick:(UITapGestureRecognizer *)tap{
  3.     NSInteger tapTag = tap.view.tag;
  4.     UIImageView *tapImg = [self viewWithTag:tapTag];
  5.     [self puzzleImageTapGestureHandler:tapImg];
  6. }
  8. ///点击手势操作
  9. - (void)puzzleImageTapGestureHandler:(UIImageView *)puzzleImage{
  10.     if (!_allowJoint) {
  11.         return;
  12.     }
  13.     NSInteger emTag = (_rows * _rows);
  14.     NSInteger tapTag = puzzleImage.tag;
  15.     if (emTag == tapTag) {
  16.         return;
  17.     }
  18.     UIImageView *emImg = [self viewWithTag:emTag];
  19.     UIImageView *tapImg = puzzleImage;
  20.     
  21.     CGFloat emMinX = floor(CGRectGetMinX(emImg.frame));
  22.     CGFloat emMaxX = floor(CGRectGetMaxX(emImg.frame));
  23.     CGFloat emMinY = floor(CGRectGetMinY(emImg.frame));
  24.     CGFloat emMaxY = floor(CGRectGetMaxY(emImg.frame));
  25.     
  26.     CGFloat tapMinX = floor(CGRectGetMinX(tapImg.frame));
  27.     CGFloat tapMaxX = floor(CGRectGetMaxX(tapImg.frame));
  28.     CGFloat tapMinY = floor(CGRectGetMinY(tapImg.frame));
  29.     CGFloat tapMaxY = floor(CGRectGetMaxY(tapImg.frame));
  30.  
  31.     BOOL isExchange = NO;
  32.     if ((tapMinX == emMinX) &&
  33.         fabs((tapMaxY + _itemSpace) - emMinY) < 5*xkScale){
  34.         isExchange = YES;
  35.     }
  36.     else if ((tapMinX == emMinX) &&
  37.              fabs((emMaxY + _itemSpace) - tapMinY) < 5*xkScale){
  38.         isExchange = YES;
  39.     }
  40.     else if ((tapMinY == emMinY) &&
  41.              fabs((tapMaxX + _itemSpace) - emMinX) < 5*xkScale){
  42.         isExchange = YES;
  43.     }
  44.     else if ((tapMinY == emMinY) &&
  45.              fabs((emMaxX + _itemSpace) - tapMinX) < 5*xkScale){
  46.         isExchange = YES;
  47.     }
  48.     else{
  49.         isExchange = NO;
  50.     }
  51.     
  52.     CGRect tapRect = CGRectMake(CGRectGetMinX(tapImg.frame),
  53.                                 CGRectGetMinY(tapImg.frame),
  54.                                 CGRectGetWidth(tapImg.frame),
  55.                                 CGRectGetHeight(tapImg.frame));
  56.     CGRect emRect = CGRectMake(CGRectGetMinX(emImg.frame),
  57.                                CGRectGetMinY(emImg.frame),
  58.                                CGRectGetWidth(emImg.frame),
  59.                                CGRectGetHeight(emImg.frame));
  60.     if (isExchange) {
  61.         NSLog(@"允许交换");
  62.         [UIView animateWithDuration:0.3 animations:^{
  63.             _allowJoint = NO;
  64.             emImg.frame = tapRect;
  65.             tapImg.frame = emRect;
  66.         } completion:^(BOOL finished) {
  67.             
  68.             
  69.             NSInteger accesTap = [tapImg.accessibilityValue integerValue];
  70.             NSInteger accesEm = [emImg.accessibilityValue integerValue];
  71.             ///因为accessibilityValue与tag一样，索引需要减1
  72.             [_puzzleArray exchangeObjectAtIndex:(accesTap - 1) withObjectAtIndex:(accesEm - 1)];
  73.             tapImg.accessibilityValue = [NSString stringWithFormat:@"%ld",accesEm];
  74.             emImg.accessibilityValue = [NSString stringWithFormat:@"%ld",accesTap];
  75.             _allowJoint = YES;
  76.             if ([self isPuzzleImageFinish]) {
  77.                 NSLog(@"拼图完成");
  78.                 [self puzzleImageFinishHandler];
  79.             }
  80.             else{
  81.                 NSLog(@"继续加油");
  82.             }
  83.             
  84.         }];
  85.     }
  86.     else{
  87.         NSLog(@"不允许交换");
  88.     }
  89. }

拼图拖动手势（空白格不允许）

  1. /// 拼图拖动
  2. - (void)puzzleImagePanGesture:(UIPanGestureRecognizer *)pan{
  3.     _panImageView = (UIImageView *)pan.view;
  4.     [self bringSubviewToFront:pan.view];
  5.     if (_panImageView.tag == (_rows * _rows)) {///空白格
  6.         
  7.     }
  8.     else{
  9.         if (pan.state == UIGestureRecognizerStateBegan) {
  10.             _panImageFrame = pan.view.frame;
  11.             _panImageView = (UIImageView *)pan.view;
  12.         }
  13.         else if (pan.state == UIGestureRecognizerStateChanged){
  14.             //获取偏移量
  15.             CGPoint transP = [pan translationInView:pan.view];
  16.             // 移动图片控件
  17.             CGRect tapRect = CGRectMake(CGRectGetMinX(pan.view.frame) + transP.x,
  18.                                         CGRectGetMinY(pan.view.frame) + transP.y,
  19.                                         CGRectGetWidth(pan.view.frame),
  20.                                         CGRectGetHeight(pan.view.frame));
  21.             pan.view.frame = tapRect;
  22.             // 复位,表示相对上一次位置复位重置
  23.             [pan setTranslation:CGPointZero inView:pan.view];
  24.         }
  25.         else if (pan.state == UIGestureRecognizerStateEnded){
  26.             if (!_allowJoint) {
  27.                 [UIView animateWithDuration:0.1 animations:^{
  28.                     _allowJoint = NO;
  29.                     _panImageView.frame = _panImageFrame;
  30.                 } completion:^(BOOL finished) {
  31.                     _allowJoint = YES;
  32.                 }];
  33.                 return;
  34.             }
  35.             
  36.             NSInteger emTag = (_rows * _rows);
  37.             UIImageView *emImg = [self viewWithTag:emTag];
  38.             CGPoint point1 = _panImageView.center;
  39.             CGPoint point2 = emImg.center;
  40.             CGFloat distance = sqrt(pow((point1.x - point2.x), 2) + pow((point1.y - point2.y), 2));
  41.             if (distance <= CGRectGetHeight(_panImageFrame)/2) {///中心点相差小于20的，允许判断是否交换位置
  42.                 [self puzzleImagePanGestureHandler:_panImageView defaultFrame:_panImageFrame];
  43.             }
  44.             else{///放回原来位置
  45.                 [UIView animateWithDuration:0.1 animations:^{
  46.                     _allowJoint = NO;
  47.                     _panImageView.frame = _panImageFrame;
  48.                 } completion:^(BOOL finished) {
  49.                     _allowJoint = YES;
  50.                 }];
  51.             }
  52.             
  53.         }
  54.         else{
  55.             
  56.         }
  57.     }
  58. }
  60. ///拖动手势操作
  61. - (void)puzzleImagePanGestureHandler:(UIImageView *)puzzleImage defaultFrame:(CGRect)defaultFrame{
  62.     
  63.     NSInteger emTag = (_rows * _rows);
  64.     NSInteger tapTag = puzzleImage.tag;
  65.     if (emTag == tapTag) {
  66.         return;
  67.     }
  68.     UIImageView *emImg = [self viewWithTag:emTag];
  69.     UIImageView *tapImg = puzzleImage;
  70.     
  71.     CGFloat emMinX = floor(CGRectGetMinX(emImg.frame));
  72.     CGFloat emMaxX = floor(CGRectGetMaxX(emImg.frame));
  73.     CGFloat emMinY = floor(CGRectGetMinY(emImg.frame));
  74.     CGFloat emMaxY = floor(CGRectGetMaxY(emImg.frame));
  75.     
  76.     CGFloat tapMinX = floor(CGRectGetMinX(defaultFrame));
  77.     CGFloat tapMaxX = floor(CGRectGetMaxX(defaultFrame));
  78.     CGFloat tapMinY = floor(CGRectGetMinY(defaultFrame));
  79.     CGFloat tapMaxY = floor(CGRectGetMaxY(defaultFrame));
  80.    
  81.     BOOL isExchange = NO;
  82.     if ((tapMinX == emMinX) &&
  83.         fabs((tapMaxY + _itemSpace) - emMinY) < 5*xkScale){
  84.         isExchange = YES;
  85.     }
  86.     else if ((tapMinX == emMinX) &&
  87.              fabs((emMaxY + _itemSpace) - tapMinY) < 5*xkScale){
  88.         isExchange = YES;
  89.     }
  90.     else if ((tapMinY == emMinY) &&
  91.              fabs((tapMaxX + _itemSpace) - emMinX) < 5*xkScale){
  92.         isExchange = YES;
  93.     }
  94.     else if ((tapMinY == emMinY) &&
  95.              fabs((emMaxX + _itemSpace) - tapMinX) < 5*xkScale){
  96.         isExchange = YES;
  97.     }
  98.     else{
  99.         isExchange = NO;
  100.     }
  101.     
  102.     CGRect emRect = CGRectMake(CGRectGetMinX(emImg.frame),
  103.                                CGRectGetMinY(emImg.frame),
  104.                                CGRectGetWidth(emImg.frame),
  105.                                CGRectGetHeight(emImg.frame));
  106.     if (isExchange) {
  107.         NSLog(@"允许交换");
  108.         [UIView animateWithDuration:0.3 animations:^{
  109.             _allowJoint = NO;
  110.             emImg.frame = defaultFrame;
  111.             tapImg.frame = emRect;
  112.         } completion:^(BOOL finished) {
  113.             NSInteger accesTap = [tapImg.accessibilityValue integerValue];
  114.             NSInteger accesEm = [emImg.accessibilityValue integerValue];
  115.             
  116.             [_puzzleArray exchangeObjectAtIndex:(accesTap - 1) withObjectAtIndex:(accesEm - 1)];
  117.             tapImg.accessibilityValue = [NSString stringWithFormat:@"%ld",accesEm];
  118.             emImg.accessibilityValue = [NSString stringWithFormat:@"%ld",accesTap];
  119.             _allowJoint = YES;
  120.             if ([self isPuzzleImageFinish]) {
  121.                 NSLog(@"拼图完成");
  122.                 [self puzzleImageFinishHandler];
  123.             }
  124.             else{
  125.                 NSLog(@"继续加油");
  126.             }
  127.         }];
  128.     }
  129.     else{
  130.         NSLog(@"不允许交换");
  131.         ///原图归位
  132.         [UIView animateWithDuration:0.3 animations:^{
  133.             _allowJoint = NO;
  134.             tapImg.frame = defaultFrame;
  135.         } completion:^(BOOL finished) {
  136.             _allowJoint = YES;
  137.         }];
  138.         
  139.     }
  140. }

判断拼图是否完成

  1. - (BOOL)isPuzzleImageFinish{
  2.     NSString *order = [_orderArray componentsJoinedByString:@""];
  3.     NSString *after = [_puzzleArray componentsJoinedByString:@""];
  4.     return [order isEqualToString:after];
  5. }

效果

   

 

原文链接：http://www.cnblogs.com/wangkejia/p/14610702.html

 友情链接：直通硅谷 　点职佳 　北美留学生论坛

iOS热门文章

  • snapkit更新约束崩溃的问题
  • iOS 14 UDP收不到广播处理
  • iOS开发用如何用类&quot;SKStoreProductViewController&quot;跳转AppStore点赞评分？
  • Charles抓包iPhone注意点以及SSL Proxying enabled for this host
  • 笔记：long、longlong、int、float、NSString相互转换
  • ios开发UI篇—UITextfield
  • 自定义相机碰到的问题，比如常见的拍照录制视频方向，镜像左右颠倒等问题
  • C 和 Object-C中的 #ifdef #ifndef
  • 使用Hbuilder将自己app发布到App Store（一）
  • iOS开发 - 超级签名实现之描述文件

    • iOS推荐文章

  • iOS开发基础135-Core Data
  • uniapp-vue3-oadmin手机后台实例|vite5.x+uniapp多端仿ios管理系统
  • 苹果支付有哪些坑，为什么苹果支付比支付宝和微信容易丢单？
  • 带你走进灵动岛
  • vue3+ts Axios封装—重复请求拦截
  • axios详解以及完整封装方法
  • 关于 axios 是什么？以及怎么用？
  • iOS气泡提示工具BubblePopup的使用
  • 一篇文章带你详细了解axios的封装 - 公众号-web前端进阶
  • [MAUI]模仿iOS多任务切换卡片滑动的交互实现

    • 本站QQ群：前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

    W3xue 的所有内容仅供测试，对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
    关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接（目前9元/月）请联系QQ：27243702 沸活量
    皖ICP备17017327号-2　皖公网安备34020702000426号