컷 아웃 원으로 UIView 마스킹

루크

나는를 만든 UIView내 주요 응용 프로그램의보기에 걸쳐 앉아 반투명 검은 배경으로. 여기서 제가 목표로하는 것은 UIView반투명 한 검정색 배경이 보이지 않는 곳에 잘라낸 원 모양을 만들어 원형 영역을 제외한 전체 이미지에 검정색 마스크 효과를주는 것입니다. 해당 영역의 버튼).

나는 CAShapeLayer원형 마스크를 만드는 데 사용할 수 있었지만 이것은 반대 효과를 가졌습니다 (즉,보기의 나머지 부분은 선명하고 원 안쪽은 반투명 검정색입니다. 내가 원하는 것은 바깥 쪽의 모든 것입니다. 반투명 검은 색을 유지하기 위해 원을 클릭 한 다음 내부를 명확하게합니다. 여기에 제가 사용한 코드가 있습니다. 반대 방향으로 작동하게하려면 어떻게해야합니까? My blackMask는 반투명 검은 색 뷰이고 my buttonCircle는 원입니다. 명확하게 유지하고 싶습니다.

어떻게 든 경로를 반전해야할까요?

CAShapeLayer *maskLayer = [[CAShapeLayer alloc] init];
CGRect maskRect = buttonCircle.frame;
CGPathRef path = CGPathCreateWithEllipseInRect(maskRect, NULL);
maskLayer.path = path;
CGPathRelease(path);
blackMask.layer.mask = maskLayer;

편집 : 지금 시도해보십시오. 이것으로 마스크가 전혀 보이지 않습니다.

UIView *circularMaskView = [[UIView alloc] initWithFrame:buttonCircle.frame];
circularMaskView.backgroundColor = [UIColor greenColor];
CAShapeLayer *maskLayer = [[CAShapeLayer alloc] init];

CGPathRef path = CGPathCreateWithEllipseInRect(buttonCircle.frame, NULL);
maskLayer.path = path;
CGPathRelease(path);

circularMaskView.layer.mask = maskLayer;

[blackMask addSubview:circularMaskView];
루크

그래서 여기에 내가 한 일이 있습니다. 다음 과 같이 UIView라는 사용자 지정 하위 클래스를 만들었습니다 BlackoutView.

BlackoutView.h

#import <UIKit/UIKit.h>

@interface BlackoutView : UIView

@property (nonatomic, retain) UIColor *fillColor;
@property (nonatomic, retain) NSArray *framesToCutOut;

@end

BlackoutView.m

#import "BlackoutView.h"

@implementation BlackoutView

- (void)drawRect:(CGRect)rect
{
    [self.fillColor setFill];
    UIRectFill(rect);

    CGContextRef context = UIGraphicsGetCurrentContext();
    CGContextSetBlendMode(context, kCGBlendModeDestinationOut);

    for (NSValue *value in self.framesToCutOut) {
        CGRect pathRect = [value CGRectValue];
        UIBezierPath *path = [UIBezierPath bezierPathWithOvalInRect:pathRect];
        [path fill];
    }

    CGContextSetBlendMode(context, kCGBlendModeNormal);
}

@end

그런 다음 정상적으로 인스턴스화하고 사용할 마스크의 색상과 마스크에서 잘라낼 프레임으로 속성을 설정합니다.

[blackMask setFillColor:[UIColor colorWithWhite:0.0f alpha:0.8f]];
[blackMask setFramesToCutOut:@[[NSValue valueWithCGRect:buttonCircleA.frame],
                               [NSValue valueWithCGRect:buttonCircleB.frame]]];

이것은 타원 이외의 다른 모양을 잘라내어 개선 할 수 있지만 여기에서는 내 목적에 적합하며 나중에 쉽게 적용 할 수 있습니다. 바라건대 이것이 다른 사람들에게 도움이되기를 바랍니다!

이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.

침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제

에서 수정
0

몇 마디 만하겠습니다

0리뷰
로그인참여 후 검토

관련 기사

분류에서Dev

2D 배열의 가장자리에서 잘린 수 많은 원형 마스크 컷 아웃

분류에서Dev

이미지에서 컷 아웃 / 반원 감지

분류에서Dev

단일 UIView로 여러 iOS UIView 마스킹

분류에서Dev

PNG 이미지의 투명 컷 아웃 뒤에있는 회전 목마

분류에서Dev

react-native-svg의 모양에서 텍스트 컷 아웃 효과 만들기

분류에서Dev

레이아웃 제약으로 UIView 교체 애니메이션

분류에서Dev

Flutter에서 텍스트 컷 아웃을 만드는 방법은 무엇입니까?

분류에서Dev

스태킹 div-세로 및 가로 레이아웃 혼합

분류에서Dev

2 열 레이아웃 문제-스태킹 및 플로팅

분류에서Dev

고정 크기 UIView 아래에 배치 할 때 자동 레이아웃으로 UIView 크기 조정

분류에서Dev

자동 레이아웃이있는 Swift UIView 서브 클래스

분류에서Dev

R-컷에서 숫자로 돌아 가기

분류에서Dev

전체 화면이 아닌 가로 모드에서 컷 아웃 / 노치 영역의 색상을 지정하려면 어떻게해야합니까?

분류에서Dev

CSS를 사용하여 마우스 아웃시 원래 크기로 조정

분류에서Dev

컷인 원형 홀 스위프트의 테두리

분류에서Dev

획 너비가 다른 SVG 채우기 규칙 컷 아웃

분류에서Dev

CSS로 div 마스킹

분류에서Dev

자바 스크립트 세미 컬럼 컷 메시지 UrlFetchApp으로 전송

분류에서Dev

녹아웃로드에 jasny 입력 마스크 적용

분류에서Dev

UIView를 지속적으로 페이드 인 및 페이드 아웃-완료 : ^ {가능한 무한 루프?

분류에서Dev

마스킹 된 UIView의 그림자 유지

분류에서Dev

서비스 로그인 및 로그 아웃으로서의 Django

분류에서Dev

Visual Studio-새 레이아웃으로 마이그레이션

분류에서Dev

Magento XML 레이아웃 : 블록을 마지막으로 유지

분류에서Dev

브로드 캐스트 로그 아웃

분류에서Dev

css로 마우스 오버 및 마우스 아웃시 전환 효과 없음

분류에서Dev

로그 아웃시 시스템 충돌

분류에서Dev

VBS에서 스레드 로그 아웃

분류에서Dev

로그 아웃 스크립트 실행

Related 관련 기사

  1. 1

    2D 배열의 가장자리에서 잘린 수 많은 원형 마스크 컷 아웃

  2. 2

    이미지에서 컷 아웃 / 반원 감지

  3. 3

    단일 UIView로 여러 iOS UIView 마스킹

  4. 4

    PNG 이미지의 투명 컷 아웃 뒤에있는 회전 목마

  5. 5

    react-native-svg의 모양에서 텍스트 컷 아웃 효과 만들기

  6. 6

    레이아웃 제약으로 UIView 교체 애니메이션

  7. 7

    Flutter에서 텍스트 컷 아웃을 만드는 방법은 무엇입니까?

  8. 8

    스태킹 div-세로 및 가로 레이아웃 혼합

  9. 9

    2 열 레이아웃 문제-스태킹 및 플로팅

  10. 10

    고정 크기 UIView 아래에 배치 할 때 자동 레이아웃으로 UIView 크기 조정

  11. 11

    자동 레이아웃이있는 Swift UIView 서브 클래스

  12. 12

    R-컷에서 숫자로 돌아 가기

  13. 13

    전체 화면이 아닌 가로 모드에서 컷 아웃 / 노치 영역의 색상을 지정하려면 어떻게해야합니까?

  14. 14

    CSS를 사용하여 마우스 아웃시 원래 크기로 조정

  15. 15

    컷인 원형 홀 스위프트의 테두리

  16. 16

    획 너비가 다른 SVG 채우기 규칙 컷 아웃

  17. 17

    CSS로 div 마스킹

  18. 18

    자바 스크립트 세미 컬럼 컷 메시지 UrlFetchApp으로 전송

  19. 19

    녹아웃로드에 jasny 입력 마스크 적용

  20. 20

    UIView를 지속적으로 페이드 인 및 페이드 아웃-완료 : ^ {가능한 무한 루프?

  21. 21

    마스킹 된 UIView의 그림자 유지

  22. 22

    서비스 로그인 및 로그 아웃으로서의 Django

  23. 23

    Visual Studio-새 레이아웃으로 마이그레이션

  24. 24

    Magento XML 레이아웃 : 블록을 마지막으로 유지

  25. 25

    브로드 캐스트 로그 아웃

  26. 26

    css로 마우스 오버 및 마우스 아웃시 전환 효과 없음

  27. 27

    로그 아웃시 시스템 충돌

  28. 28

    VBS에서 스레드 로그 아웃

  29. 29

    로그 아웃 스크립트 실행

뜨겁다태그

보관