궁금한 내용을 검색해보세요!
이 포스팅은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다.
서근 개발노트
티스토리에 팔로잉
SWIFT/Grammar

Swift : 기초문법 [CGSize와 CGRect의 차이점과 CGPoint]

서근
QUOTE THE DAY

-
Written by SeogunSEOGUN

반응형

CGSizeCGRect 둘 다 직사각형을 나타내는 데 사용할 수 있기 때문에 이름이 헷갈릴 수 있습니다.

 

 

우선 CGPoint 부터 알아보도록 하겠습니다.

CGPoint

정의 : 2차원 좌표계의 을 포함하는 구조체.

 

간단하게 생각하면 XY축 처럼 (1, 2) 이런 식으로 점을 찍는 것입니다. 예를 들어 1X좌표 2Y좌표를 나타냅니다.

 

iOS에서는 이것을 CGPoint라고 합니다.

 

CGPoint가 어떻게 구현되는지 아래에서 확인해보겠습니다.

Public struct CGPoint {
   public var x: CGFloat
   public var y: CGFloat
   public init()
   public init(x: CGFloat, y: CGFloat)
}

CGSize

정의 : 너비와 높이  을 포함하는 구조체

 

CGSize 에는 너비와 높이가 있습니다. 꼭 기억해야 할 것은 CGSize너비와 높이의 값이라는 것입니다. 실제로 사각형으로 간주되지 않습니다. 하지만 아래 그림과 같이 나타내 지곤 합니다.

CGSize에 대한 문서에 따르면..

CGSize구조는 때때로 물리적 크기가 아닌 거리 벡터를 나타내기 위해 사용된다. 그것의 값은 음수일 수 있다. 양의 값으로 표시되도록 CGRect 구조를 정규화하려면 CGRectStandardize 함수를 호출해야 한다.

수학의 벡터 에는 크기 (또는 길이)와 방향이 있습니다. 하지만 CGSize에는 원점이 없습니다, 


CGSize구조를 확인해보겠습니다.

struct CGSize {
  var width: CGFloat
  var height: CGFloat
}
var size = CGSize(width: 50, height: 30)

너비와 높이만 가지고 있는 것이 확인되죠?

CGRect

정의 : 사각형의 위치와 크기 를 포함하는 구조체

 

CGRect CGSize와 다르게 사각형입니다. 이름부터 Rect(Rectangle)인 것처럼요 :)

CGRect에는너비와 높이를 가지고 있을 뿐만 아니라 원점(origin)을 가지고 있습니다.

쉽게 말해서 CGRect는 좌표가 있는 CGSize라고 생각하면 됩니다.

 

CGRect구조를 확인해보겠습니다.

Public struct CGRect {
   public var origin: CGPoin
   public var size: CGSize
   public init()
   public init(origin: CGPoint, size: CGSize)
}

CGRect의 변수로는 originsize를 가지고 있습니다. 또,  origin의 타입은 CGPoint 이고, size의 타입은 CGSize인 것을 확인할 수 있습니다. 보통은 너비와 높이만 있어도 사각형을 그릴 수 있지만, iOS에서는 '위치'를 알아야 그릴 수 있습니다.

 

여기서 '위치'가 origin, '크기'는 size를 나타내는 것이죠. 

 

 

CGRect는 일반적으로 상위 뷰의(위, 왼쪽) 좌표에 상대적인 좌표인 UIView 프레임을 지정하는 데 사용됩니다.

struct CGRect {
  var origin: CGPoint
  var size: CGSize
}
struct CGPoint {
  var x: CGFloat
  var y: CGFloat
}

다음과 같이 CGRect를 만들 수 있습니다.

var rect = CGRect(origin: CGPoint(x: 0, y: 0), size: CGSize(width: 50, height: 30))

Negative width and height

너비 및 높이 값은 음수일 수 있습니다. CGRect를 통해 이것이 어떻게 보이는지 볼 수 있습니다. 원점이 서로 다른 모서리에 어떻게 표시되는지 확인해보겠습니다.

 

읽어주셔서 감사합니다🤟


잘못된 내용이 있으면 언제든 피드백 부탁드립니다.


서근


위처럼 이미지 와 함께 댓글을 작성할 수 있습니다.