0

多くのUIViewサブビューを含むUIScrollView内にUIViewがあります。これらの各サブビューには、CATiledLayerレイヤーがあります。さらに、(すべてのサブビューとともに)コンテキスト内にコンテナーUIViewを描画する拡大ルーペ機能があります。関連するコード:

これは、ルーペのdrawRectメソッドです。

- (void)drawRect:(CGRect)rect 
{
CGContextRef context = UIGraphicsGetCurrentContext();

CGContextClipToMask( context , loupeRect, self.maskImage);
CGContextSetFillColorWithColor(context, [[UIColor whiteColor] CGColor]);
CGContextFillRect(context, loupeRect);

CGContextSaveGState( context );
CGContextScaleCTM(context, gridScale,  gridScale);
CGContextTranslateCTM(context, offset.x, offset.y);

CGRect rectToDraw = CGRectMake(-offset.x, -offset.y, 512, 512);
[appDelegate.gridViewController.objectContainerView drawInContext:context forRect:rectToDraw];

CGContextRestoreGState( context );

[overlayImage drawAtPoint:CGPointZero]; 
}

そして、これは、サブビューが描画されるコンテナUIViewのdrawInContext:forRectメソッドです。

- (void)drawInContext:(CGContextRef)ctx forRect:(CGRect)rect {

CGRect newrect = CGRectMake(rect.origin.x-1024, rect.origin.y-1024, 2048, 2048);    

for (UIView* v in [self subviews]) {
    float viewscale = v.transform.a;        
    if (CGRectIntersectsRect(newrect,v.frame)) {
        CGContextSaveGState(ctx);
        CGContextScaleCTM(ctx, viewscale, viewscale);
        CGContextTranslateCTM(ctx, v.frame.origin.x/viewscale,  v.frame.origin.y/viewscale);
        [v drawLayer:v.layer inContext:ctx];
        CGContextRestoreGState(ctx);
    }
}   

[super drawLayer:self.layer inContext:ctx];
}

そして最後に、これはCATiledLayerを使用したサブビューのdrawRectメソッドです。

- (void)drawRect:(CGRect)rect {
    CGContextRef context = UIGraphicsGetCurrentContext();

    CGFloat scale = CGContextGetCTM(context).a;
    scale = (scale <= .125) ? .125 : (scale <= .250 ? .250 : (scale <= .5 ? .5 : 1));

    CATiledLayer *tiledLayer = (CATiledLayer *)[self layer];
    CGSize tileSize = tiledLayer.tileSize;

    tileSize.width /= scale;
    tileSize.height /= scale;

    int firstCol = floorf(CGRectGetMinX(rect) / tileSize.width);
    int lastCol = floorf((CGRectGetMaxX(rect)-1) / tileSize.width);
    int firstRow = floorf(CGRectGetMinY(rect) / tileSize.height);
    int lastRow = floorf((CGRectGetMaxY(rect)-1) / tileSize.height);


    for (int row = firstRow; row <= lastRow; row++) {
        for (int col = firstCol; col <= lastCol; col++) {           
            UIImage *tile = [self tileForScale:scale row:row col:col];
            CGRect tileRect = CGRectMake(tileSize.width * col, tileSize.height * row,
                                         tileSize.width, tileSize.height);

        tileRect = CGRectIntersection(self.bounds, tileRect);
            [tile drawInRect:tileRect];
        }
    }
}

これで、すべてが意図したとおりに機能しますが、拡大ループがオンになっていて移動していると、アプリの速度が大幅に低下します。問題は、ルーペビューが移動されるたびに、そのdrawRectメソッドが呼び出され(拡大されたコンテンツを更新できるようにするため)、その後、コンテナUIViewなどのdrawInContextメソッドが呼び出されることです...その結果、すべてのCATiledLayersが画像を更新しますルーペが動かされるたびにタイル。

ご覧のとおり、ルーペのコンテキスト内でコンテナビューの大部分を描画しようとしましたが、これが行き詰まっています。このコンテナビューの大部分を「バッファリング」する方法がわかりません。そのため、ルーペを移動すると、再描画される四角形が「バッファリングされた」四角形を超えた場合にのみ、サブビューが再描画されます。

コードがずさんな/新しい場合は申し訳ありません-私はその真っ只中にいて、助けを探しています。

ありがとう!

4

1 に答える 1

1

ルーペ/拡大鏡ビューで表示されるものの事前レンダリングを 1 回だけ行うことはできますか? 拡大しようとしているディスプレイが比較的静的なのか、それとも絶えず変化しているのかはわかりません。

私のアプリでは、ユーザーは画面をタップして他のビューを配置します。タッチして指を動かすと、アイテムが配置される正確な場所が拡大鏡で表示されます。また、拡大鏡をアクティブに使用している間は、背景画像は変更されません (拡大鏡がオンになっている間だけでなく、他の時間にビューをパン/ズーム/移動する場合があります)。

拡大中の表示は静的であるため、「描画」メソッドをオーバーライドしないルーペを実装できました。以下は実装全体です。ViewController/touch ハンドラによってインスタンス化され、保持されます。

以下のトリックは、ウィンドウ全体のスクリーンショットを撮り、それをルーペのlayer.contents. 次に、 を使用しlayer.contentsRectて、タッチ ポイントでスクリーンショットをトリミング、ズーム、および配置します。

  • 発信者のtouchesBegin電話から[_magnifier magnify...
  • そしてtouchesMoved通話から[_magnifier touchPointMovedTo...
  • 最後に、touchesEnded呼び出し[_magnifier removeFromSuperview];

MagnifierView.h

#import <UIKit/UIKit.h>
@interface MagnifierView : UIView {
    float _xscale;
    float _yscale;
    float _loupewidth;
    float _loupeheight;
    float _xzoom;
    float _yzoom;
}

- (void) magnify:(CGPoint) touchPoint;
- (void) touchPointMovedTo:(CGPoint) touchPoint;
@end

MagnifierView.m

#import "MagnifierView.h"
#import <QuartzCore/QuartzCore.h>

#define kMagnifierDiameter 120

@implementation MagnifierView

- (id)initWithFrame:(CGRect)frame {
    self = [super initWithFrame:CGRectMake(0, 0, kMagnifierDiameter, kMagnifierDiameter)];

    if (self) {
        self.layer.borderColor = [[UIColor darkGrayColor] CGColor];
        self.layer.borderWidth = 3;
        self.layer.cornerRadius = kMagnifierDiameter / 2;
        self.layer.masksToBounds = YES;


        UIImageView *crosshair = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"crosshairs.png"]];
        [crosshair setCenter:self.center];
        [self addSubview:crosshair];
        [crosshair release];
    }
    return self;
}

- (void) magnify:(CGPoint)touchPoint
{
    UIView *windowview = [[UIApplication sharedApplication] keyWindow];

    /// grab a screenshot of the window (sloppy; goal is to get a CGImageRef to put into this view's layer)
    UIGraphicsBeginImageContext(windowview.bounds.size);
    CGContextRef context = UIGraphicsGetCurrentContext();
    [windowview.layer renderInContext:context];
    UIImage *screenshot = UIGraphicsGetImageFromCurrentImageContext();  /// autoreleased
    UIGraphicsEndImageContext();


    /// while we have the image size update our positioning and zooming numbers
    _xscale = 1 / screenshot.size.width;    /// layer units are 0.0 - 1.0 so scale the numbers to that range
    _yscale = 1 / screenshot.size.height;
    _loupewidth = _xscale * CGRectGetWidth(self.frame);     /// scaled size of this view
    _loupeheight = _yscale * CGRectGetHeight(self.frame);
    _xzoom = (_xscale * 18);    /// arbitrary 16; make sure it's in scaled units (negative to zoom out)
    _yzoom = (_yscale * 18);


    /// set our layer contents to the imageRef of the screenshot above (again, sloppy; can we skip UIImage altogether?)
    CGImageRef imageRef = CGImageCreateWithImageInRect([screenshot CGImage], CGRectMake(0, 0, screenshot.size.width, screenshot.size.height));
    self.layer.contents = (id)imageRef;
    CGImageRelease(imageRef);

    /// add us to the window view and move us
    [windowview addSubview:self];
    [self touchPointMovedTo:touchPoint];
}

- (void) touchPointMovedTo:(CGPoint)touchPoint
{
    self.center = CGPointMake(touchPoint.x, touchPoint.y - 80); /// arbitrary 80 so we float 'above' your fat finger

    /// touchPoint is the center; figure out the x,y (top,left)
    float xcenter = (_xscale * touchPoint.x);
    float x = xcenter - (_loupewidth / 2);

    float ycenter = (_yscale * touchPoint.y);
    float y = ycenter - (_loupeheight / 2);

    /// with no additional adjustments this rect will just 'see through' to the screenshot
    CGRect seethrough = CGRectMake(x , y, _loupewidth, _loupeheight);

    /// RectInset with the zoom factor to scale up the contents
    self.layer.contentsRect = CGRectInset(seethrough, _xzoom, _yzoom);

}


- (void)dealloc {
    [super dealloc];
}


@end
于 2011-07-01T01:33:21.633 に答える