06 커스텀 뷰와 이벤트 활용 - 간단 패인트 애플케이션
지난 글 - 05 완성도를 높여라 - 직원 급여 관리 애플리케이션 (3) / 루비 코코아 프로그래밍
이번엔 간단한 패인트 예제(14~15장)다. 예제 이름에서 느껴지는 분위기 그대로 선그리기, 색칠하기, 이미지 그리기, 마우스 이벤트 등을 다루게 될 것 같다. 별로 어려운 내용은 없을 것 같다.
커스텀 뷰 (Custom view)
보기좋은 떡이 먹기도 좋다는 말이 있는데, GUI 애플리케이션을 보기 좋게, 예쁘게 만드는 일은 끝도 없다. 그 마지막은 모든 컨트롤은 재창조해서 자신만의 스타일로 그려내는 것이다. 장단점이 있겠지만, 피카사 같은 애플리케이션은 그런 접근으로 차별화에 성공하기도 했다. 하지만 어설피 만들면 안하니만 못한 일이니 양날의 검이라 하겠다. 어쨌든 코코아 애플리케이션에서도 OSX::NSView를 상속해 CustomView를 구현함으로써 자신만의 컨트롤을 만들 수 있다.
- class StretchView < OSX::NSView
def initWithFrame(frame)
if super_initWithFrame(frame)
@path = OSX::NSBezierPath.alloc.init
@path.lineWidth = 3.0
@path.moveToPoint(random_point)
20.times { @path.lineToPoint(random_point) }
end
self
end
def drawRect(rect)
r = bounds
OSX::NSColor.greenColor.set
OSX::NSBezierPath.fillRect(r)
OSX::NSColor.whiteColor.set
@path.stroke
end
protected
def random_point
r = bounds
result = OSX::NSPoint.new
result.x = rand(r.size.width.round) + r.origin.x
result.y = rand(r.size.height.round) + r.origin.y
result
end
end
위 예제의 StretchView는 특정 사이즈 캔버스(녹색 배경)에 흰색으로 임의의 선을 20개 그리는 예제이다. 실행화면은 아래와 같다.
마우스 이벤트와 이미지 처리
위 예제에 이미지를 출력하고, 마우스 이벤트에 따라 이미지의 사이즈를 바꿔볼 것이다.
이벤트 처리는 간단했다. View에 다음 메서드를 구현하는 것만으로 충분했다.
- mouseDown(event)
- mouseDragged(event)
- mouseUp(event)
각 지점에서 이벤트가 일어난 점(event.locationInWindow)를 저장해두고 있다가 StretchView::drawRect에서 이 값을 이용해 이미지를 그린다.
- def drawRect(rect)
if @image
rect = OSX::NSRect.new
rect.origin = OSX::NSZeroPoint
rect.size = @image.size
@image.drawInRect_fromRect_operation_fraction(current_rect, rect, OSX::NSCompositeSourceOver, @opacity)
end
end
- protected
- def current_rect
xs = [@down_point.x, @cur_point.x]
ys = [@down_point.y, @cur_point.y]
OSX::NSMakeRect(xs.min, ys.min, xs.max - xs.min, ys.max - ys.min)
end
end
@cur_point는 마우스를 드래그 시작한 점(mouseDown에서 기록)이고, @down_point는 드래그 중에는 현재 마우스 위치, 마우스를 놓으면 놓은 점을 가리킨다. 따라서, 마우스를 이동한만큼 이미지의 크기가 변경되어 화면에 출력된다.
완성된 애플리케이션 모습은 아래와 같다.
마치며
이번에는 큰 시행착오없이 순조롭게 진행되어, 따로 적을 내용도 별로 없었던 것 같다. 전체 소스 코드는 아래 링크에서 내려받을 수 있다.
다음에는 패인트 애플리케이션에서 한층 발전된 예제로 키보드 이벤트도 다루고, 문자열도 그리는 타자 학습 애플리케이션이다. 07 문자열 그리기와 키보드 이벤트 - 타자 애플리케이션 (1) 따라 만드는 것도 재미있을 것 같다(전체보기 - 루비 코코아 프로그래밍).
Comments (0)