Question

我想像所有设备的第一张图片一样绘制网格＆amp;用户只能通过拖动网格作为第二张图片来填充路径，我已经尝试了很多东西但没有使用它，请建议我应该如何制作？

Answer 1

关键理念

首先，您需要覆盖UIView，这样您就可以利用某些东西。
其次你需要知道height＆amp; width之前提取整个董事会。
第三需要维护一个数据结构，以便跟踪绘制的位置。哪里不去。

第一点很简单，我们需要覆盖UIView类。我们将在drawRect方法中完成大部分任务。出于示例目的，说扩展类名是CustomGridView。

在讨论第2点之前，我们将讨论＃3。

每个网格可以处于三种状态之一

为空（此网格周围没有框）
包围（围绕此网格绘制的框）
填充包围（框绘制并填充蓝色）

所以我们将为这三个州声明enum

typedef enum{
    EMPTY_BLOCK = 0,
    SURROUNDED_BLOCK,
    FILLED_SURROUNDED_BLOCK
}

现在我们将使用如下所述的二维数字数组来跟踪网格：

 NSMutableArray<NSMutableArray<NSNumber*>*>* gridStructure;

使用EMPTY_BLOCK＆amp;初始化数组SURROUNDED_BLOCK因为需要在网格中显示。例如，假设你想要一个高度为5块的网格。宽4块。所有外部块都是SURROUNDED_BLOCK，然后数组应该如下所示。

1,1,1,1

1,0,0,1

1,0,0,1

1,0,0,1

1,1,1,1

现在，当用户触摸网格时，请使用FILLED_SURROUNDED_BLOCK填充该网格位置。

现在最重要的是＃2，最乏味的事情。在drawRect中，您将使用rect来指定，height表示width＆amp; CustomGridView的{{1}}。在这里，您将根据阵列坐标绘制网格。您必须将整个视图拆分为grid_width * grid_height个空格。然后根据二维数组的值，您将进行绘图。例如

如果你找到了EMPTY_BLOCK，那么就不会画任何东西，其余部分如下。

其他资源：

添加UIPangestureRecognizer以跟踪用户触摸路径＆amp;跟踪二维网格阵列中的位置。更新二维数组网格后，更新视图的drawRect调用[self setNeedsDisplay]。
画出4行代表FILLED_SURROUNDED_BLOCK的东西。
如何绘制线条已被解答here

祝你好运。

根据上述想法，这是一个示例实现

<强> GridView.h

#import <UIKit/UIKit.h>

IB_DESIGNABLE @interface GridView : UIView
@end

<强> GridView.m

#import "GridView.h"

enum GRID_BOX_TYPE
{
    GRID_BOX_BLANK = 0,
    GRID_BOX_RED,
    GRID_BOX_BLUE
};

#define NUMBER_OF_ROWS  5
#define NUMBER_OF_COLS  4

#define GRID_LINE_WIDTH 2

@implementation GridView
{
    enum GRID_BOX_TYPE twoDGrid[NUMBER_OF_ROWS][NUMBER_OF_COLS];
    CGSize gridSizeRatio;
}
#pragma mark init methods
-(id)initWithFrame:(CGRect)frame
{
    self = [super initWithFrame:frame];
    if(self){
        //do initialization here
        [self commonInitializer];
    }
    return self;
}

-(id)initWithCoder:(NSCoder *)aDecoder
{
    self = [super initWithCoder:aDecoder];
    if(self){
        //do initialization here
        [self commonInitializer];
    }
    return self;
}

// Only override drawRect: if you perform custom drawing.
// An empty implementation adversely affects performance during animation.
- (void)drawRect:(CGRect)rect {

    CGContextRef context = UIGraphicsGetCurrentContext();
//    CGContextClearRect(context, rect);

    //global settings
    CGContextSetFillColorWithColor(context, [UIColor whiteColor].CGColor);


    for(int i=0;i<NUMBER_OF_ROWS;i++)
    {
        for(int j=0;j<NUMBER_OF_COLS;j++)
        {
            enum GRID_BOX_TYPE blockType = twoDGrid[i][j];

            switch (blockType) {
                case GRID_BOX_BLANK :
                {
                    //draw white box
                    CGContextSetStrokeColorWithColor(context, [UIColor whiteColor].CGColor);

                    CGContextStrokeRectWithWidth(context, CGRectMake(j * rect.size.width * gridSizeRatio.width,
                                                         i * rect.size.height * gridSizeRatio.height,
                                                         rect.size.width * gridSizeRatio.width - GRID_LINE_WIDTH,
                                                         rect.size.height * gridSizeRatio.height - GRID_LINE_WIDTH), GRID_LINE_WIDTH);
                    CGContextDrawPath(context, kCGPathFill);
                }
                    break;
                case GRID_BOX_RED:
                {
                    //draw red box
                    CGContextSetStrokeColorWithColor(context, [UIColor redColor].CGColor);

                    CGContextStrokeRectWithWidth(context, CGRectMake(j * rect.size.width * gridSizeRatio.width,
                                                         i * rect.size.height * gridSizeRatio.height,
                                                         rect.size.width * gridSizeRatio.width - GRID_LINE_WIDTH,
                                                         rect.size.height * gridSizeRatio.height - GRID_LINE_WIDTH), GRID_LINE_WIDTH);

                    CGContextDrawPath(context, kCGPathFill);
                }
                    break;
                case GRID_BOX_BLUE:
                {
                    //draw blue box
                    CGContextSetStrokeColorWithColor(context, [UIColor blueColor].CGColor);

                    CGContextStrokeRectWithWidth(context, CGRectMake(j * rect.size.width * gridSizeRatio.width,
                                                         i * rect.size.height * gridSizeRatio.height,
                                                         rect.size.width * gridSizeRatio.width - GRID_LINE_WIDTH,
                                                         rect.size.height * gridSizeRatio.height - GRID_LINE_WIDTH), GRID_LINE_WIDTH);
                    CGContextDrawPath(context, kCGPathFill);
                }
                    break;
                default:
                    break;
            }


        }
    }
}

#pragma mark private initializer
-(void)commonInitializer
{
    twoDGrid[0][0]= GRID_BOX_RED;
    twoDGrid[0][1]= GRID_BOX_RED;
    twoDGrid[0][2]= GRID_BOX_RED;
    twoDGrid[0][3]= GRID_BOX_RED;
    twoDGrid[1][0]= GRID_BOX_RED;
    twoDGrid[1][1]= GRID_BOX_BLANK;
    twoDGrid[1][2]= GRID_BOX_BLANK;
    twoDGrid[1][3]= GRID_BOX_RED;
    twoDGrid[2][0]= GRID_BOX_RED;
    twoDGrid[2][1]= GRID_BOX_BLUE;
    twoDGrid[2][2]= GRID_BOX_BLUE;
    twoDGrid[2][3]= GRID_BOX_RED;
    twoDGrid[3][0]= GRID_BOX_RED;
    twoDGrid[3][1]= GRID_BOX_BLANK;
    twoDGrid[3][2]= GRID_BOX_BLANK;
    twoDGrid[3][3]= GRID_BOX_RED;
    twoDGrid[4][0]= GRID_BOX_RED;
    twoDGrid[4][1]= GRID_BOX_RED;
    twoDGrid[4][2]= GRID_BOX_RED;
    twoDGrid[4][3]= GRID_BOX_RED;

    gridSizeRatio = CGSizeMake(1.0/NUMBER_OF_COLS, 1.0/NUMBER_OF_ROWS);
}
@end

预览

我想用以下路径绘制网格＆amp;用户可以填写如ios中的图像所示

1 个答案: