iphone - 以编程方式绘制图像

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;
}

//从文档目录加载

- (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 函数以添加一个以该点为中心的圆。您需要自己定义视图的分辨率和宽度。

Answer 2

只需通过 UIImageView 在正确的坐标处将其粘贴到您的宾果板顶部（我认为宾果板的大小都相同？应该很容易计算）。还是我错过了你想要做的事情？

Answer 3

试试这个

UIImage *image1 = [UIImage imageNamed:@"image1.png"]; 
UIImage *image2 = [UIImage imageNamed:@"image2.png"]; 

CGSize newSize = CGSizeMake(width, height);
UIGraphicsBeginImageContext( newSize );

[image1 drawInRect:CGRectMake(0,0,newSize.width,newSize.height)];

[image2 drawInRect:CGRectMake(0,0,newSize.width,newSize.height) blendMode:kCGBlendModeNormal alpha:0.8];
UIImage *finalImage = UIGraphicsGetImageFromCurrentImageContext();

UIGraphicsEndImageContext();

Answer 4

如果你想要像宾果游戏这样的动画，你可以使用 Cocos2D 框架来构建你的应用程序。