html.canvasのdrawImageをiOSで実装してみる.(iOS, Objective-C)

canvasはjavascriptを使っていろんな絵を描画できます. この中に,drawImageというものがあります. これはcanvasに画像を描画するためのメソッドです. toDataURLで作った画像を保存することもできる大変便利なやつです. (ちなみに他ドメインの画像は描画することはできますが,toDataURLで出力することはできません涙).

さて,今回はObjective-CでdrawImageを実装してみたいと思います. 難しそうだったんですけど意外と簡単にできました. ちなみにこんな感じの画像を作れます.

wpid-2014-01-31-18-53-55.jpg

コードはこんな感じです.

CGFloat screenHeight = [UIScreen mainScreen].bounds.size.height;
CGFloat screenWidth = [UIScreen mainScreen].bounds.size.width;
CGFloat insetX = 20;
CGFloat insetY = 100;
CGFloat marginX = 1;
CGFloat marginY = 1;
CGFloat size = screenWidth - 2*insetX;
UIImageView *canvas = [[UIImageView alloc]initWithFrame:CGRectMake(insetX, insetY, size, size)];
UIImage *img = [UIImage imageNamed:@"OrangeLogo.jpg"];
int numX = 3; int numY = 3;

int x = marginX; int y = marginY;
int imageWidth = (size - (marginX*numX+1)) / numX;
int imageHeight = (size - (marginY*numY+1)) / numY;
UIGraphicsBeginImageContext(canvas.frame.size);

for (int i=0; i<numX*numY; i++) {
    if (i != 0 && i%numX == 0) {
        x = marginX;
        y = y + imageHeight + marginY;
    }
    [img drawInRect:CGRectMake(x, y, imageWidth, imageHeight)];
    x = x + imageWidth + marginX;
}

canvas.image = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();
[self.view addSubview:canvas];

ほとんどはサイズとかマージンの設定なので必要な部分を抜き出すとこんな感じです.

// 描画用UIImageView
UIImageView *canvas = [[UIImageView alloc]initWithFrame:CGRectMake(insetX, insetY, size, size)];
// テスト画像
UIImage *img = [UIImage imageNamed:@"OrangeLogo.jpg"];
// 描画領域の作成 今は領域いっぱいに
UIGraphicsBeginImageContext(canvas.frame.size);  
// テスト画像を描画
[img drawInRect:CGRectMake(x, y, imageWidth, imageHeight)];
// 描いたものをcanvasへ設定 表示させないならなくてもよい
canvas.image = UIGraphicsGetImageFromCurrentImageContext();
// 描画終了
UIGraphicsEndImageContext();

UIImageViewをcanvas,drawInRectをdrawImageだと考えると分かりやすいですかね. こんな感じでcanvasのdrawImageをObjective-Cでも実装することができました. これ,保存できるんですかねー.ということで次回は保存を.

コメントを残す

以下に詳細を記入するか、アイコンをクリックしてログインしてください。

WordPress.com ロゴ

WordPress.com アカウントを使ってコメントしています。 ログアウト / 変更 )

Twitter 画像

Twitter アカウントを使ってコメントしています。 ログアウト / 変更 )

Facebook の写真

Facebook アカウントを使ってコメントしています。 ログアウト / 変更 )

Google+ フォト

Google+ アカウントを使ってコメントしています。 ログアウト / 変更 )

%s と連携中