ios - UIScrollViewのオーバーフローをどのように暗くしますか?

Question

iOS のカメラ 'Zoom & Crop' と同じ機能を実装したいとします... スクロールして画像をトリミングすることができます。

トリミング領域のサイズを超える画像のセクションはグレー表示されます。まさにそれを再現しようとしています。フラグ「clipToBounds」が NO に設定されている場合、サブビュー全体を表示できます。

ただし、UIScrollView のサブビュー オーバーフローをグレー表示するのは少し難しいと思います。

それをどのように実装しますか？前もって感謝します！

Answer 1

UIViewこれを行うには、オーバーフロー領域で半透明、「クロップ」領域で透明なのサブクラスを作成し、それを自分の上に配置しUIScrollViewて、オーバーフローを覆うように拡張します。

実装する必要がある主なメソッドは次のinitWithFrameとおりです。

#define kIDZAlphaOverlayDefaultAlpha 0.75

- (id)initWithFrame:(CGRect)frame
{
    self = [super initWithFrame:frame];
    if (self) {
        mAlpha = kIDZAlphaOverlayDefaultAlpha;
        self.backgroundColor = [UIColor colorWithRed:0.0 green:0.0 blue:0.0 alpha:mAlpha];
        self.userInteractionEnabled = NO;
    }
    return self;
}

そうしuserInteractionEnabled = NOないと、スクロール ビューにイベントが表示されません。

とdrawRect

- (void)drawRect:(CGRect)rect
{    
    CGRect apertureRect = /* your crop rect */;
    CGContextRef context = UIGraphicsGetCurrentContext();
    /* draw the transparent rect */
    CGContextSetRGBFillColor(context, 0.0, 0.0, 0.0, 0.0);
    CGContextSetBlendMode(context, kCGBlendModeCopy);
    CGContextFillRect(context, apertureRect);
    /* draw a white border */
    CGContextSetRGBStrokeColor(context, 1.0, 1.0, 1.0, 1.0);
    CGContextStrokeRect(context, apertureRect);
}

ここで重要な点はkCGBlendModeCopy、半透明の背景に透明な四角形を描画 (またはカット) できることです。

透明な四角形を角丸四角形にしたい場合は、トリミングされた画像のプレビューを含めると、次の画面のようになります。

申し訳ありませんが、スクリーン ショットのすべてのコードを共有することはできません。クライアントプロジェクトからのものです:-(

Answer 2

私はこの問題を解決しました...：

• 次のコードを使用して、新しいヘルパー クラス「ApertureOverlay」(UIView のサブクラス) を追加します。

  • (void)drawRect:(CGRect)rect {

    if(CGRectEqualToRect(_apertureRect, CGRectZero) == NO)

    {

    CGContextRef context = UIGraphicsGetCurrentContext();
    
    CGContextSetShouldAntialias(context, false);
    
    CGContextSetRGBFillColor(context, 1.0f, 1.0f, 1.0f, 1.0f);
    CGContextFillRect(context, _apertureRect);
    
    CGContextSetShouldAntialias(context, true);
    

    }

  }

• ApertureOverlay には、アルファ バイトが 50% に設定された背景があります。

  [self setBackgroundColor:[UIColor colorWithRed:1.0f 緑:1.0f 青:1.0f アルファ:0.5f]];

これまでのところ... 背景が透明なビューと、白い四角形 (_apertureRect 位置 + サイズで描画) が得られました。

このクラスを実装した後、画像を内部に含む ScrollView の「マスク」属性を設定しました。

[[self layer] setMask:[_apertureOverlayView layer]];

それでおしまい！。ApertureOverlay の「_apertureRect」属性を更新する場合は、「setNeedsDisplay」を呼び出す必要があるため、再描画されます。

もう一つ。アンチエイリアスを false (ApertureOverlay) に設定すると、かなりスムーズに動作します。