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

//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このコードも試しましたが、停止するたびに1つの円しか表示されません。

 - (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

最も簡単なオプションは、フォトショップまたは他の同様のプログラムで、必要なサイズで背景が透明な画像を作成することです。これを.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フレームワークを使用してアプリを作成できます。