以编程方式绘制图像

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

Answer 2

只需通过UIImageView以正确的坐标将其粘贴到宾果板的顶部（宾果板的尺寸都相同，我认为？应该很容易计算）。或者我错过了你想要做的事情？

Answer 3

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