以编程方式绘制图像

Question

我的宾果应用程序遇到问题,每当在我的数字生成器中选择一个数字时,我都尝试以编程方式绘制一个圆圈.

我尝试了这个代码,它在图像中绘制圆圈,然后将其保存到documentsDirectory.我也有一个加载实现,当我调用它时,我在视图中加载它.

//画

-(void)draw
{
    UIImage *image = [UIImage imageNamed:@"GeneralBingoResult.png"];
    UIImage *imageWithCircle1 = [self imageByDrawingCircleOnImage1:image];

    // save it to documents

    NSString *documentsPath = [NSSearchPathForDirectoriesInDomains(NSDocumentDirectory,
                                                                   NSUserDomainMask, YES) lastObject];
    NSString *filePath = [documentsPath stringByAppendingPathComponent:@"Output.png"];
    NSData *imageData = UIImagePNGRepresentation(imageWithCircle1);
    [imageData writeToFile:filePath atomically:YES];
    NSLog(@"Saved new image to %@", filePath);

UIImage *image1 = [self loadImage];
    [imageToDisplay setImage:image1];

}

//在图像中绘制圆圈

- (UIImage *)imageByDrawingCircleOnImage1:(UIImage *)image
{
    // begin a graphics context of sufficient size
    UIGraphicsBeginImageContext(image.size);
    // draw original image into the context
    [image drawAtPoint:CGPointZero];
    // get the context for CoreGraphics
    CGContextRef ctx = UIGraphicsGetCurrentContext();

    // set stroking color and draw circle
    [[UIColor redColor] setStroke];

    // make circle rect 5 px from border
    CGRect circleRect = CGRectMake(420,40,
                                   90,
                                   90);
    circleRect = CGRectInset(circleRect, 5, 5);

    // draw circle
    CGContextStrokeEllipseInRect(ctx, circleRect);

    // make image out of bitmap context
    UIImage *retImage = UIGraphicsGetImageFromCurrentImageContext();
    // free the context
    UIGraphicsEndImageContext();
    return retImage;
}

//从doc目录加载

- (UIImage*)loadImage
{
    NSArray *paths = NSSearchPathForDirectoriesInDomains(NSDocumentDirectory, 
                                                         NSUserDomainMask, YES);
    NSString *documentsDirectory = [paths objectAtIndex:0];
    NSString* path = [documentsDirectory stringByAppendingPathComponent: 
                      [NSString stringWithString: @"Output.png"] ];
    UIImage* image = [UIImage imageWithContentsOfFile:path];
    return image;
}

我成功地在我的图像中绘制了一个圆圈,但我的问题是当我用圆圈保存图像时documentsDirectory我希望能够加载保存的图像并再次使用该图像绘制.或者更确切地说,我将如何像宾果游戏应用程序一样实现它,如下所示:

示例:首先,在数字生成器中选择数字7.输出:

接下来,挑选数字55.它为数字添加了另一个圆圈.输出:

顺便说一句,我正在使用UIScrollview.我正在实施它ScrollViewDidEndScrolling.谢谢.

我也尝试过这段代码,但每次UIScrollView停止时它只显示一个圆圈.

 - (void) scrollViewDidEndScrollingAnimation:(UIScrollView *)scrollview{

    if ([[images objectAtIndex:index] intValue] == 1){
                [circle setFrame:CGRectMake(420,40,90,90)];
                [self.view addSubview:circle];       
    }else if([[images objectAtIndex:index] intValue] == 2){
                [circle setFrame:CGRectMake(460,40,90,90)];
                [self.view addSubview:circle];   
     }
}

Answer 1

最简单的选择是在photoshop或其他类似程序中创建一个图像,该图像是所需的大小,并且具有透明背景.将其另存为.png文件.然后,当你想在棋盘上添加圆圈时,你只需要在网格中的正确位置添加一个新的UIImageView:

UIImageView *circle;
circle = [[UIImageView alloc] initWithFrame:CGRectMake(xLocation, yLocation, myCircleWidth, myCircleHeight)];
circle.image = [UIImage imageNamed:@"myCircle.png"];
[self.view addSubview:circle];

另一种选择是创建一个继承自UIView的视图.您可以向此类添加方法,以便将位置设置为圆圈.然后在drawRect代码中,您只需在已标记的所有位置上绘制圆圈.

- (void)drawRect:(CGRect)rect {
// Circle your marked locations here
}

这种情况下的最后一步是在包含BINGO板的原始视图上添加新视图.

编辑:

这是用于执行视图叠加的扩展示例代码.首先,OverlayView.h:

@interface OverlayView : UIView {

}

- (void)clearPoints;
- (void)addPointX:(int)whichX Y:(int)whichY;
@end

请注意,我在这里使用C++向量,因此这是在OverlayView.mm文件中:

#import "OverlayView.h"
#import <UIKit/UIKit.h>
#include <vector>

@implementation OverlayView

std::vector<int> points;

- (id)initWithFrame:(CGRect)frame {
    if (self = [super initWithFrame:frame]) {
        // Initialization code
        [self setOpaque:NO];
        [self setUserInteractionEnabled:false];
    }
    return self;
}

- (void)drawRect:(CGRect)rect {
    if (points.size() == 0)
        return;
    CGContextRef context = UIGraphicsGetCurrentContext(); 
    CGContextSetLineWidth(context, 15.0);

    CGContextSetRGBStrokeColor(context, 1.0, 0.0, 0, 0.5);
    for (int x = 0; x < points.size(); x++)
        CGContextStrokeEllipseInRect(context, CGRectMake(points[x]%width-resolution/2,
                                                         points[x]/width-resolution/2,
                                                         resolution, resolution));

}

- (void)dealloc {
    //printf("Deallocating OverlayView\n");
    [super dealloc];
}


- (void)clearPoints {
    points.resize(0);
    [self setNeedsDisplay];
}

- (void)addPointX:(int)whichX Y:(int)whichY {
    points.push_back(whichX+whichY*width);

    [self setNeedsDisplay];
    printf("Adding point (%d,%d)\n", whichX, whichY);
}

您只需要在与您的电路板相同的视图中添加此视图.调用addPoint函数以添加以该点为中心的圆.您需要为自己定义视图的分辨率和宽度.