ビューと2D描画
昨日も書いたが、iOSで書いたカスタムビューをandroidに移植している。
主な機能としては、昨日も書いたように画像のプレビューの他に、
-
- タップした箇所にポインタ(円)を描画
- ポインタ同士を線分で描画して接続
- 3点以上をタップした際にポインタで閉じた領域を塗り潰し
これらを実装している。
つまり、タップに合わせて、円と線を描画する必要がある訳だ。
カスタムビューでの独自の描画はandroidもiOSも非常によく似ている。
android
@Override protected void onDraw(Canvas canvas) { //canvasを使って描画 }
iOS
- (void)drawRect:(CGRect)rect { [super drawRect:rect]; CGContextRef ctx = UIGraphicsGetCurrentContext(); //CGContextRefを使って描画 }
両プラットホームとも、このようにフレームワークからのコールバックメソッドをオーバライドすることでビューに直接描画を実行することができる。
更には両プラットホームとも線、円、多角形などのシェイプの描画を行う命令があり、一連の操作をまとめて実行することのできる「パス」というベクタグラフィクス風のメソッドがあるのも同じである。
パスを使って円を描画する
android
@Override protected void onDraw(Canvas canvas) { canvas.drawColor(Color.WHITE); Paint paint = new Paint(); paint.setAntiAlias(true); paint.setColor(Color.BLUE); path.addCircle(10, 10, 10, Path.Direction.CCW); canvas.drawPath(path, paint); }
iOS
- (void)drawRect:(CGRect)rect { CGContextRef ctx = UIGraphicsGetCurrentContext(); CGContextAddEllipseInRect(ctx, rect); CGContextSetFillColorWithColor(ctx, [UIColor blueColor].CGColor); CGContextFillPath(ctx); }
とよく似たプログラミング方法なのだが、大きな違いがあった。 と、今日はここで時間切れ。