拖动图像并适合正确的边界框

Question

我正在开发一款棋盘游戏，我的棋盘中有 10x10 个单元格，每个单元格由一个 UIImageView 获取，因此当玩家尝试将一块棋子放入单元格时，应将相应的单元格设置为图像。

我想要实现的是当用户拖动一块并尝试将其放在板上时，该块应该适合自己的单元格的 UIImageView。现在的问题是我可以把棋子放在棋盘上的任何地方，甚至在两个单元之间。我能做些什么来修复它？谢谢

----------------更新：----------------

由于我在情节提要中完成了所有操作，因此我可以分享的代码很少。我在 .h 文件中有以下代码行：

@property(retain) IBOutletCollection(UIImageView) NSArray *images;

它们是一个长度为 100 的 UIImageView 数组，每个都对应于 board 中的一个单元格，如下所示：

当前板子上的图标是自动生成的，我要拖到板上的目标图标位于板子的左上角（“X”图标）。以及以下处理拖动的方法：

- (IBAction)handlePan:(UIPanGestureRecognizer *)recognizer {
    CGPoint translation = [recognizer translationInView:self.view];
    recognizer.view.center = CGPointMake(recognizer.view.center.x + translation.x,
                                         recognizer.view.center.y + translation.y);
    [recognizer setTranslation:CGPointMake(0, 0) inView:self.view];
}

现在的问题是我可以将“X”放在板上的任何位置，如下所示：

但我想把它放到板上的一个单元格中。

Answer 1

您可以通过检测翻译结束的单元格来实现这一点。例如：

    - (IBAction)handlePan:(UIPanGestureRecognizer *)recognizer {
        CGPoint translation = [recognizer translationInView:self.view];
        CGPoint origin = yourGrid.frame.origin; //where yourGrid refers to the main game board
        float cellHeight = 30; //enter the corresponding value for cellHeight and cellWidth
        float cellWidth = 30; //I've chosen 30 as an arbitrary value.
        int translationXIndex = (recognizer.view.center.x + translation.x - origin.x)/cellWidth;
        int translationYIndex = (recognizer.view.center.y + translation.y - origin.y)/cellHeight;

//Assuming you count left to right and then up to down
        [[images objectAtIndex: (translationXIndex + (10*translationYIndex))] setImage:[UIImage imageNamed:@"YourImage.png"]];
        recognizer.view.center = CGPointMake(recognizer.view.center.x + translation.x,
                                             recognizer.view.center.y + translation.y);
        [recognizer setTranslation:CGPointMake(0, 0) inView:self.view];
        //You would have to remove the object you just dragged now, since you've changed the image of the corresponding cell
        }

这是如何工作的：识别器寻找翻译的中心并找出它位于哪个单元格内。然后它访问该单元格的 imageView 并将图像更改为目标图像。

希望这会有所帮助。